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

レッスン内容

• 本コースの内容について

  本コースを進めるために必要となる知識、最終目標を紹介します。
• レスポンシブデザインとは？モバイルファーストとの違いも解説

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

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

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

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

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

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

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

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

  ファーストビュー部分をレスポンシブにコーディングしていきます。背景画像を設定する方法や、画像の縦横比を崩さず画面幅に大きさを合わせるbackground-sizeプロパティについても解説します。
• イベント紹介セクションのレスポンシブコーディング

  画面幅に応じて、横に並ぶカードの枚数が変わる部分のコーディングを行います。要素に影をつける box-shadowプロパティ、レイアウトや余白指定をしやすくするbox-sizingプロパティについても解説。
• 紹介・お知らせセクションのレスポンシブコーディング

  「ズーロッパ東京とは」「お知らせ」のセクションをそれぞれレスポンシブにコーディングする方法を解説します。ここまでの復習も兼ねて、HTMLとCSSを書いていきましょう。
• 最終確認と細かい部分の調整

  レスポンシブデザインはどの端末でも、違和感なく表示・利用できる必要があります。色々な画面幅で表示を確認し、細かい部分をデザインに合わせて調整していきましょう。
• 講座終了課題

  レスポンシブデザイン講座の最終課題です。ここまで学んできた内容を生かしつつ、ズーロッパ東京の別ページの作成にチャレンジしてみましょう。
• CSS変数（カスタムプロパティ）について知ろう

  【Advance】ではCSS変数（カスタムプロパティ）を使ったスタイルシートの書き方、ダークモード対応などを解説していきます。まずはCSS変数の基本を知って、コーディングや更新の効率を上げましょう。
• CSS変数の活用例

  CSS変数を使うと便利なスタイル指定、活用方法をいくつか解説します。制作するサイトによって使用した方が良い・しなくても良いは分かれますが、書き方・意味がわかると対応できる幅が広がりますよ。
• ダークモード対応のためのCSS

  訪問ユーザーがダークモードを設定している場合も、違和感なくWebサイトを見られるように配色を最適化しましょう。ダークモード用のカラー設定に役立つメディア特性「prefers-color-scheme」の使い方、ブラウザでの確認方法を解説します。
• Zooloppaをダークモード対応にしてみる

  実践編で作成した動物園zooloppaのトップページを、ダークモード対応にしてみましょう。見本HTML＆CSSのダウンロードもできます。
もっと見る