レスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザイン

レッスン内容

• 1

  講座内容について
• 2

  レスポンシブデザインとは？モバイルファーストとの違いも解説

  Web制作に携わると耳にすることが多い「レスポンシブ」や「モバイルファースト」という言葉。今更「どういうこと？」と聞きにくい、この２つの言葉について初心者の方にも分かりやすいよう、簡単に解説します。

• 3

  レスポンシブコーディングに使う、ビューポートとメディアクエリ

  レスポンシブコーディングに欠かせない、ビューポート（viewport）の指定と、CSSメディアクエリ（Media Queries）の役割・基本書式を解説します。モバイルファーストでのメディアクエリの書き方、ディスプレイファーストでのメディアクエリの書き方の例もありますよ。

• 4

  レスポンシブデザインに役立つCSS Flexboxレイアウト基礎

  レスポンシブデザインのWebサイトをコーディングする際に使われることが多い、CSSのFlexboxレイアウトについて解説します。実習で一緒にコードを書きながら、flexboxレイアウトの使い方を掴みましょう。

• 5

  【実践編】デザインとコーディング要件

  ここからのレッスンでは、業務のコーディングとおなじ実践的な流れで、1つのWebページを作成していきます。まずは、レスポンシブデザイン/レスポンシブコーディングを行うデザインと、コーディング要件を確認してください。

• 6

  Illustratorのデザインデータから、必要な画像を書き出す

  Adobe Illustratorでデザインデータから素材を書き出す方法を解説します。「アセットの書き出し」機能を使うと、素早く簡単に画像の書き出しが行なえますよ。

• 7

  レスポンシブデザインのコーディングを始めよう

  レスポンシブデザインのコーディングを始めましょう。今回はサイトの全体像（大きなコンテンツ区分）を捉えながら、HTMLのベースを作成する方法を解説します。

• 8

  レスポンシブコーディング向け、CSSファイルのベースを作ろう

  レスポンシブデザインのコーディングを着手方法として、今回はCSSを考えていきます。画面幅が変わっても変わらない部分、レイアウトの規則性を見つけて大まかなスタイル指定を書いてみましょう。

• 9

  ヘッダーとフッターのコーディング

  本格的にWebページのコーディングを行ってきます。CSSクラス指定方法の復習もしながら、ヘッダーとフッターのコーディングを行っていきましょう。デザインからHTMLを起こす時の考え方も解説します。