レスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザイン
Web制作初心者の方向けに、レスポンシブデザインの考え方と制作方法を画像たっぷりで解説します。モバイルファーストでCSSメディアクエリを設定し、1つのWebページを完成させるコーディングもご用意。実践的なレッスンで、レスポンシブデザインの重要な部分をマスターしましょう。
無料で今すぐはじめる※ ログインする必要はありません。
レベル
やさしい
18レッスン
1日間
レスポンシブデザインに対応できていますか？
基礎はわかったけど
レスポンシブ化が難しい
モバイルファースト?
方法がわからない
頑張ってCSSを書いても
表示が崩れる…
サクッと短時間で、レスポンシブデザイン・コーディング基礎を習得可能
～作りながら理解する、ウンザリしないレスポンシブデザイン入門～
Webサイト制作では標準仕様になりつつあるレスポンシブデザイン。
基本のHTML、CSSは分かったからレスポンシブデザインに挑戦……と思っても、実際作ってみると上手くいかない部分が出てきてイヤになってしまうことが多いのではないでしょうか？
本講座では、オリジナルの教材で以下のWebページを作ります。
レスポンシブデザインやモバイルファーストの考え方から、画像の書き出し、コーディングまでを図解たっぷりに解説。 デザインを中心に行いたい方も、一度レスポンシブコーディングをしてみると「端末に合わせて、どうデザインの変更していけば良いか」が掴めますよ。
Skillhubなら、短時間で実践的な基礎スキルを習得可能！
多くの未経験者をフリーランスWeb制作者としてデビューさせてきた、Skillhubの講座は無駄なくミニマムな内容。その中でも初心者の方向けに、ほんとうに必要な知識だけを厳選しているからこそ、短期間での基礎習得が可能です。
短期間で「使える」技術を身につけるカリキュラム
レスポンシブとかモバイルファーストって何?から解説します
Web業界以外の方からすれば、馴染みのない「レスポンシブ」や「モバイルファースト」という言葉。説明からしてWeb用語が多くて分かりにくい…なんてこともあります。
本講座では最初に、レスポンシブデザインやモバイルファーストとは何かを解説。その後、実際に制作も行います。解説と実践がセットになっていることで、要点をしっかり体感できますよ。
図解たっぷり! 1つのページを作りながらレスポンシブを理解
スマホやタブレットは、機種によって画面のサイズが違います。ユーザーがどんな端末からアクセスしてもレイアウトが崩れず、問題なく見えようにするための、知識とコツを図解たっぷりで解説。
解説と同時進行で、実際に1つのレスポンシブデザインのページを作っていきます。CSSプロパティの使い所や、組み合わせを習得しつつ、柔軟なレイアウトを構成できる血方も身につきます。
自己解決力・修正力が身につき、臨機応変に対応可能
レスポンシブデザインのコーディングでは、適用されているスタイル指定を把握し、修正する力がとても重要です。
本講座ではコーディングの際、ブラウザの検証ツールも使っていきます。検証ツールの見方に慣れることで、レイアウトが崩れてしまってもすぐに原因発見・修正ができるようになります。
「解説がないとお手上げ」なんてことは、もう卒業しましょう！
本講座を終えると、できるようになること
- レスポンシブデザインとは何かがわかる
- モバイルファーストの意味がわかる
- CSSメディアクエリが使えるようになる
- 柔軟なコーディングができるようになる
- 検証ツールを使って、自分だけで問題発見・修正ができるようになる
レッスン内容
-
1
-
2
Web制作に携わると耳にすることが多い「レスポンシブ」や「モバイルファースト」という言葉。今更「どういうこと？」と聞きにくい、この２つの言葉について初心者の方にも分かりやすいよう、簡単に解説します。
-
3
レスポンシブコーディングに欠かせない、ビューポート（viewport）の指定と、CSSメディアクエリ（Media Queries）の役割・基本書式を解説します。モバイルファーストでのメディアクエリの書き方、ディスプレイファーストでのメディアクエリの書き方の例もありますよ。
-
4
レスポンシブデザインのWebサイトをコーディングする際に使われることが多い、CSSのFlexboxレイアウトについて解説します。実習で一緒にコードを書きながら、flexboxレイアウトの使い方を掴みましょう。
-
5
ここからのレッスンでは、業務のコーディングとおなじ実践的な流れで、1つのWebページを作成していきます。まずは、レスポンシブデザイン/レスポンシブコーディングを行うデザインと、コーディング要件を確認してください。
-
6
Adobe Illustratorでデザインデータから素材を書き出す方法を解説します。「アセットの書き出し」機能を使うと、素早く簡単に画像の書き出しが行なえますよ。
-
7
レスポンシブデザインのコーディングを始めましょう。今回はサイトの全体像（大きなコンテンツ区分）を捉えながら、HTMLのベースを作成する方法を解説します。
-
8
レスポンシブデザインのコーディングを着手方法として、今回はCSSを考えていきます。画面幅が変わっても変わらない部分、レイアウトの規則性を見つけて大まかなスタイル指定を書いてみましょう。
-
9
本格的にWebページのコーディングを行ってきます。CSSクラス指定方法の復習もしながら、ヘッダーとフッターのコーディングを行っていきましょう。デザインからHTMLを起こす時の考え方も解説します。
-
10
ファーストビュー部分をレスポンシブにコーディングしていきます。背景画像を設定する方法や、画像の縦横比を崩さず画面幅に大きさを合わせるbackground-sizeプロパティについても解説します。
-
11
画面幅に応じて、横に並ぶカードの枚数が変わる部分のコーディングを行います。要素に影をつける box-shadowプロパティ、レイアウトや余白指定をしやすくするbox-sizingプロパティについても解説。
-
12
「ズーロッパ東京とは」「お知らせ」のセクションをそれぞれレスポンシブにコーディングする方法を解説します。ここまでの復習も兼ねて、HTMLとCSSを書いていきましょう。
-
13
レスポンシブデザインはどの端末でも、違和感なく表示・利用できる必要があります。色々な画面幅で表示を確認し、細かい部分をデザインに合わせて調整していきましょう。
-
14
レスポンシブデザイン講座の最終課題です。ここまで学んできた内容を生かしつつ、ズーロッパ東京の別ページの作成にチャレンジしてみましょう。
-
15
【Advance】ではCSS変数（カスタムプロパティ）を使ったスタイルシートの書き方、ダークモード対応などを解説していきます。まずはCSS変数の基本を知って、コーディングや更新の効率を上げましょう。
-
16
CSS変数を使うと便利なスタイル指定、活用方法をいくつか解説します。制作するサイトによって使用した方が良い・しなくても良いは分かれますが、書き方・意味がわかると対応できる幅が広がりますよ。
-
17
訪問ユーザーがダークモードを設定している場合も、違和感なくWebサイトを見られるように配色を最適化しましょう。ダークモード用のカラー設定に役立つメディア特性「prefers-color-scheme」の使い方、ブラウザでの確認方法を解説します。
-
18
実践編で作成した動物園zooloppaのトップページを、ダークモード対応にしてみましょう。見本HTML＆CSSのダウンロードもできます。
もっと見る
レスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザインを 無料で始めましょう！
無料申し込み期限
4月21日まで
募集
人数
100名 （残りわずか）
解説を読んだり、お手本のコードをうつすだけではなく、考え方から学んで実際に作ることで応用力も身につきます。