BLOG

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(実践編)
投稿日:2020年9月15日

「Prepros」はSassを超簡単にコンパイルすることがきるGUIツールです。 PreprosができることはSassのコンパイルだけではありません。ざっと以下のことが可能です。 Preprosでできること(一部抜粋) 1. Sass(それ以外にもLess、Styl ...

Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
Sass(SCSS)を始めよう!「Prepros(プリプロス)」で簡単にSass環境を作ろう!(基礎編)
投稿日:2020年9月15日

Sassを使い始めるためにはどうしたらよいでしょうか? 主に以下の2つの方法があります。 エディタの拡張機能を使う Gulpを使う ひとりで案件を進めるであれば1の方法でも問題ないでしょう。 しかし、この方法だとエディタに依存してしまうため複数人が関わる案件の場 ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(実践編)
投稿日:2020年9月15日

この記事では、Fractalというスタイルガイドジェネレーターの実践的な使い方をご紹介します。 ちなみに、この記事は「【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)」の続編になります。 まだ読んでいない方はそちらを読んでからの方がスム ...

【初心者でも簡単!】スタイルガイドジェネレーターの「Fractal」の使い方を徹底解説(環境構築編)
投稿日:2020年9月15日

WEBアプリやそれに近い大規模な案件を進めていくにあたって、共通のパーツってありますよね。 LP(ランディングページ)であれば、そういったものはないのですが、ある程度規模が大きくなるとそういった共通パーツ(モジュールまたはコンポーネント)が何回も登場して、それを組み立ていくというのはよ ...

【意外と知らない?!】コーディングを速くするために知っておきたいテクニック集
投稿日:2020年9月9日

突然ですが、みなさん。 コーディング(HTML,CSS)得意ですか? 筆者は、「得意です!」と自信をもって言えるほどではありません。汗 「どうやって再現したらいいんだ...」と、頭を悩ませ時間が溶けていくことが多いです。 しかし、コーディングでは「スピード」が求められますよね。 ...

【無料で利用できるWebアイコンフォント】Font Awesome を使ってみよう
投稿日:2020年8月28日

ボタンの横にアイコンを配置することが多々ありますよね。 そんなとき、画像を書き出さなくてもアイコンフォントを使えば、簡単に設置できるので紹介します! 【目次】 概要 事前準備 ダウンロードして使う CDNを使う ...

目指せデザイン完コピ!!少しでもデザインに近づけるためのHTMLコーディング
投稿日:2020年8月21日

HTMLコーディングをしていて、見た目では完璧にデザイン通りになっていると思っていても実際比べてみるとすごくズレてる… 皆さんそういう経験あるのではないでしょうか。 まず気を付けないとどれぐらいズレてしまうのか、また努力次第でどれぐらいデザイン通りになるのか比較してみました! まず ...

スマホの傾き検知、Web制作で使える? or 使えない?
投稿日:2020年6月24日

スマートフォンでアプリを使っていると、時々デバイスの傾きで画面内もお洒落に傾く事があるかと思います。 Webでも出来るかなと思い調べたところ「DeviceOrientationEvent」というものが見付かりましたので、簡単なデモを作成してみました。 今回は手軽にwebpackとBabe ...

【保存版】レスポンシブサイトでよく見かける「あのフッター」どうやって作っているの? デザイン別パターン6種類
投稿日:2020年6月23日

コーディングを始めたてのころは誰でもPCのサイトを作ることに精一杯になり、スマートフォン用の展開をおこないやすいコードを書くことが頭から抜け落ちてしまいますよね。今回の記事では、レスポンシブサイトでよく見かけるフッターを、どのようにレスポンシブ化するかを理解していただくことが目的となっていま ...

HTMLコーディングの検証ってどこ見るの?チェックポイントとよくある不具合をまとめました
投稿日:2020年6月19日

コーディングの検証は見る場所やブラウザ・端末も多く、チェックが大変ですが重要な作業です。 特にヘッダーなどの共通要素、TOPページのチェックは重要です。 確認すべきポイントは多岐にわたりますが、明文化されていないことが多い作業でもありますよね。 担当者によってチェックするポイントが違っ ...

【まとめ】Webフォントの使い方!完全ガイド 初級編【2020年版】
投稿日:2020年6月11日

最近、ブランディングのためにWebフォントを使用しているサイトを多く見かけますよね。 そんな中、「Webフォントってよく分からない…」「Webフォントって重いんじゃないの…?」「使いたいフォントがWebフォントにない…」と思っている方は多いのではないでしょうか? この記事では「Webフォ ...

【HTMLから】WordPress化しやすいコーディングのすすめ【手順付】
投稿日:2020年5月18日

無料で使用できて、コンテンツの管理が簡単にできる上に、カスタマイズ次第でなんでもできるWordPress。なんでも全世界のサイトの4分の1はWordPressが使われているとかいないとか。 弊社でもWordPressの案件は多く、リニューアルから新規作成など多岐にわたります。 中でもHT ...

【デザイン段階でも動く?!】Adobe XDのプロトタイプで、デザインに動きをつけてみよう!
投稿日:2020年5月15日

ウェブデザインを製作する際、「ページを更新した時、順番に下から出てくるアニメーションを付けて欲しい…。」など、言葉で挙動の説明は難しく、伝えるためにアニメーションをデザイナー側で用意するのも大変…。 デザイン・コーディングどちらも自分が担当できる場合であれば融通が利きますが、チームでの作業 ...

覚えておいて損はないCSS一覧
投稿日:2020年2月28日

コーダーの皆さんはコーディングする際に使うCSSはある程度決まっているのではないでしょうか。 僕自身、使いどころは異なっていても、使用するプロパティなどは大体いつも同じものの組み合わせであることが多いです。 そこで、今回は少しだけ視点を変えて普段あまり触れる機会は多くないけれど、 うま ...

今すぐコーディング爆速化!プロ仕様なChrome検証ツールの使い方
投稿日:2020年2月28日

軽くて拡張機能も豊富で、日本国内でも世界でもトップシェアを誇るブラウザ・それがGoogle Chrome。 Chromeの検証ツール(ディベロッパーツール)のお世話になっているサイト制作者は多いはずです。 この記事ではサイト制作のプロであるサイト制作会社の人でも意外と知らなかった知られざ ...

【HTMLメール】デザインからコーディングまで!これだけはおさえておきたいポイント
投稿日:2020年2月5日

みなさん、HTMLメールを作成したことはありますか? テキストだけで作ったメールよりも凝ったレイアウトにすることができ、画像を使って華やかに見せることもできるので、よりユーザーの目を引くことができますよね。 華やかなメルマガなどが送られてくると、ついつい見てしまう方も多いのではないでしょ ...

コーディングをより効率的に!楽にHTMLやCSSを生成できるジェネレータ8選(おまけあり)【2020年度版】
投稿日:2020年2月5日

「毎回テーブルタグ書くの、面倒くさい…」と思った経験はありませんか? Webエンジニアにとって、サイトを作るときには必ずコーディングをおこないますが、いろいろなサイトを作っていても共通して出てくるパーツは意外とありますよね。ただ、都度入力していくのは時間もかかって骨も折れる作業です。 ...

webサイト制作でお役立ち! デザイン&コーディングをする時に便利なwebサイト6選
投稿日:2020年1月30日

入力するだけでパパっと数値や単語を変換してくれるwebサイトや、直感的に操作出来る色の見本webサイトなど、普段業務で使用しているデザインやコーディング時に便利なサイトを集めました。 デザイン編 3:2、黄金比等を一括計算「アスペクト比計算ツール」 見ているだけでも楽しい2 ...

リキッドレイアウトは誰でもできる!!コーディングのコツまとめました
投稿日:2020年1月17日

Webデザインのスタンダードのひとつである「リキッドレイアウト」。 実はレスポンシブデザインとの違いがよくわからないとか、コーディングしてみたらなんだかうまくいかなかった・・・なんてことありませんか? この記事ではリキッドレイアウトのメリットと、実際にコーディングするうえでのポイントを解 ...

[Webデザイナーさんへ] そのデザインがコーディングしにくい理由と、改善ポイント詳説
投稿日:2019年12月27日

Webデザイナーにとって、自分のデザインがコーディングしやすいのかどうかは意外と気になるもの。 コーダー側は受け取ったデザインを粛々とコーディングするだけなので、あまり「こうしてほしい」と声を上げることはありませんが、デザイナーの観点だけでは気付きにくい問題が埋もれてしまっているか ...