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

こんな方へWeb制作未経験/初心者の方

Web制作初心者の方向けに、レスポンシブデザインの考え方と制作方法を画像たっぷりで解説します。モバイルファーストでCSSメディアクエリを設定し、1つのWebページを完成させるコーディングもご用意。実践的なレッスンで、レスポンシブデザインの重要な部分をマスターしましょう。

この講座で、できるようになること

HTMLの概要と基礎知識が身につく
CSSの概要と基礎知識が身につく
レスポンシブデザインを理解できる

この講座について

レスポンシブデザインに対応できていますか？

サクッと短時間で、レスポンシブデザイン・コーディング基礎を習得可能

～作りながら理解する、ウンザリしないレスポンシブデザイン入門～

Webサイト制作では標準仕様になりつつあるレスポンシブデザイン。
基本のHTML、CSSは分かったからレスポンシブデザインに挑戦……と思っても、実際作ってみると上手くいかない部分が出てきてイヤになってしまうことが多いのではないでしょうか？

本講座では、オリジナルの教材で以下のWebページを作ります。

レスポンシブデザインやモバイルファーストの考え方から、画像の書き出し、コーディングまでを図解たっぷりに解説。デザインを中心に行いたい方も、一度レスポンシブコーディングをしてみると「端末に合わせて、どうデザインの変更していけば良いか」が掴めますよ。

解説を読んだり、お手本のコードをうつすだけではなく、考え方から学んで実際に作ることで応用力も身につきます。

Skillhubなら、短時間で実践的な基礎スキルを習得可能！

多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、短期間での基礎習得が可能です。

短期間で「使える」技術を身につけるカリキュラム

レスポンシブとかモバイルファーストって何?から解説します

Web業界以外の方からすれば、馴染みのない「レスポンシブ」や「モバイルファースト」という言葉。説明からしてWeb用語が多くて分かりにくい…なんてこともあります。

本講座では最初に、レスポンシブデザインやモバイルファーストとは何かを解説。その後、実際に制作も行います。解説と実践がセットになっていることで、要点をしっかり体感できますよ。

図解たっぷり! 1つのページを作りながらレスポンシブを理解

スマホやタブレットは、機種によって画面のサイズが違います。ユーザーがどんな端末からアクセスしてもレイアウトが崩れず、問題なく見えようにするための、知識とコツを図解たっぷりで解説。

解説と同時進行で、実際に1つのレスポンシブデザインのページを作っていきます。CSSプロパティの使い所や、組み合わせを習得しつつ、柔軟なレイアウトを構成できる血方も身につきます。

自己解決力・修正力が身につき、臨機応変に対応可能

レスポンシブデザインのコーディングでは、適用されているスタイル指定を把握し、修正する力がとても重要です。

本講座ではコーディングの際、ブラウザの検証ツールも使っていきます。検証ツールの見方に慣れることで、レイアウトが崩れてしまってもすぐに原因発見・修正ができるようになります。
「解説がないとお手上げ」なんてことは、もう卒業しましょう！

本講座を終えると、できるようになること

レスポンシブデザインとは何かがわかる
モバイルファーストの意味がわかる
CSSメディアクエリが使えるようになる
柔軟なコーディングができるようになる
検証ツールを使って、自分だけで問題発見・修正ができるようになる

この講座で学べること

HTMLの概要と基礎知識が身につく

CSSの概要と基礎知識が身につく

レスポンシブデザインを理解できる

レスポンシブなコーディングがイチからできる

こんな方におすすめです

Web制作未経験/初心者の方
HTMLとCSSの基本的な仕組みを理解したい方
HTML/CSS初心者からレベルアップしたい方
無料で基礎を学びたい方

受講の前に用意するもの

WindowsもしくはMacのパソコンがある方
パソコンの基本操作ができる方
HTML/CSSの基本がわかる方
【推奨】Google Chrome がインストールされている環境 ※他のブラウザでもOKですが、動画と同じ操作画面にするために、同じ環境を推奨します。

カリキュラム

4章全18レッスン上から順に進めると、最後まで迷わず進めます

1章　ガイダンス1レッスン

1本コースの内容について本コースを進めるために必要となる知識、最終目標を紹介します。

2章　レスポンシブコーディング基礎知識3レッスン

2 レスポンシブデザインとは？モバイルファーストとの違いも解説Web制作に携わると耳にすることが多い「レスポンシブ」や「モバイルファースト」という言葉。今更「どういうこと？」と聞きにくい、この２つの言葉について初心者の方にも分かりやすいよう、簡単に解説します。
3レスポンシブコーディングに使う、ビューポートとメディアクエリレスポンシブコーディングに欠かせない、ビューポート（viewport）の指定と、CSSメディアクエリ（Media Queries）の役割・基本書式を解説します。モバイルファーストでのメディアクエリの書き方、ディスプレイファーストでのメ...
4レスポンシブデザインに役立つCSS Flexboxレイアウト基礎レスポンシブデザインのWebサイトをコーディングする際に使われることが多い、CSSのFlexboxレイアウトについて解説します。実習で一緒にコードを書きながら、flexboxレイアウトの使い方を掴みましょう。

3章　実践編10レッスン

5実習デザインとコーディング要件ここからのレッスンでは、業務のコーディングとおなじ実践的な流れで、1つのWebページを作成していきます。まずは、レスポンシブデザイン/レスポンシブコーディングを行うデザインと、コーディング要件を確認してください。
6Illustratorのデザインデータから、必要な画像を書き出すAdobe Illustratorでデザインデータから素材を書き出す方法を解説します。「アセットの書き出し」機能を使うと、素早く簡単に画像の書き出しが行なえますよ。
7レスポンシブデザインのコーディングを始めようレスポンシブデザインのコーディングを始めましょう。今回はサイトの全体像（大きなコンテンツ区分）を捉えながら、HTMLのベースを作成する方法を解説します。
8レスポンシブコーディング向け、CSSファイルのベースを作ろうレスポンシブデザインのコーディングを着手方法として、今回はCSSを考えていきます。画面幅が変わっても変わらない部分、レイアウトの規則性を見つけて大まかなスタイル指定を書いてみましょう。
9ヘッダーとフッターのコーディング本格的にWebページのコーディングを行ってきます。CSSクラス指定方法の復習もしながら、ヘッダーとフッターのコーディングを行っていきましょう。デザインからHTMLを起こす時の考え方も解説します。
10ファーストビューのレスポンシブコーディングファーストビュー部分をレスポンシブにコーディングしていきます。背景画像を設定する方法や、画像の縦横比を崩さず画面幅に大きさを合わせるbackground-sizeプロパティについても解説します。
11イベント紹介セクションのレスポンシブコーディング画面幅に応じて、横に並ぶカードの枚数が変わる部分のコーディングを行います。要素に影をつける box-shadowプロパティ、レイアウトや余白指定をしやすくするbox-sizingプロパティについても解説。
12紹介・お知らせセクションのレスポンシブコーディング「ズーロッパ東京とは」「お知らせ」のセクションをそれぞれレスポンシブにコーディングする方法を解説します。ここまでの復習も兼ねて、HTMLとCSSを書いていきましょう。
13最終確認と細かい部分の調整レスポンシブデザインはどの端末でも、違和感なく表示・利用できる必要があります。色々な画面幅で表示を確認し、細かい部分をデザインに合わせて調整していきましょう。
14講座終了課題レスポンシブデザイン講座の最終課題です。ここまで学んできた内容を生かしつつ、ズーロッパ東京の別ページの作成にチャレンジしてみましょう。

4章　Advance4レッスン

15CSS変数（カスタムプロパティ）について知ろう【Advance】ではCSS変数（カスタムプロパティ）を使ったスタイルシートの書き方、ダークモード対応などを解説していきます。まずはCSS変数の基本を知って、コーディングや更新の効率を上げましょう。
16CSS変数の活用例CSS変数を使うと便利なスタイル指定、活用方法をいくつか解説します。制作するサイトによって使用した方が良い・しなくても良いは分かれますが、書き方・意味がわかると対応できる幅が広がりますよ。
17ダークモード対応のためのCSS訪問ユーザーがダークモードを設定している場合も、違和感なくWebサイトを見られるように配色を最適化しましょう。ダークモード用のカラー設定に役立つメディア特性「prefers-color-scheme」の使い方、ブラウザでの確認方法を解...
18Zooloppaをダークモード対応にしてみる実践編で作成した動物園zooloppaのトップページを、ダークモード対応にしてみましょう。見本HTML＆CSSのダウンロードもできます。