
レスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザイン
Web制作初心者の方向けに、レスポンシブデザインの考え方と制作方法を画像たっぷりで解説します。モバイルファーストでCSSメディアクエリを設定し、1つのWebページを完成させるコーディングもご用意。実践的なレッスンで、レスポンシブデザインの重要な部分をマスターしましょう。(※レッスン順次公開中)
無料で今すぐはじめる※ ログインする必要はありません。
レベル
ビギナー
9レッスン
1日間
HTMLとCSSの基本はわかった、けどレスポンシブ化が上手く出来ない。
そんなWeb制作初心者の方向けに、レスポンシブデザインの考え方と制作方法を画像たっぷりで解説します。
モバイルファーストでCSSメディアクエリを設定し、1つのWebページを完成させるコーディングもご用意。実践的なレッスンで、レスポンシブデザインの重要な部分をマスターしましょう。
(※レッスン順次公開中)
レッスン内容
-
1
-
2
Web制作に携わると耳にすることが多い「レスポンシブ」や「モバイルファースト」という言葉。今更「どういうこと?」と聞きにくい、この2つの言葉について初心者の方にも分かりやすいよう、簡単に解説します。
-
3
レスポンシブコーディングに欠かせない、ビューポート(viewport)の指定と、CSSメディアクエリ(Media Queries)の役割・基本書式を解説します。モバイルファーストでのメディアクエリの書き方、ディスプレイファーストでのメディアクエリの書き方の例もありますよ。
-
4
レスポンシブデザインのWebサイトをコーディングする際に使われることが多い、CSSのFlexboxレイアウトについて解説します。実習で一緒にコードを書きながら、flexboxレイアウトの使い方を掴みましょう。
-
5
ここからのレッスンでは、業務のコーディングとおなじ実践的な流れで、1つのWebページを作成していきます。まずは、レスポンシブデザイン/レスポンシブコーディングを行うデザインと、コーディング要件を確認してください。
-
6
Adobe Illustratorでデザインデータから素材を書き出す方法を解説します。「アセットの書き出し」機能を使うと、素早く簡単に画像の書き出しが行なえますよ。
-
7
レスポンシブデザインのコーディングを始めましょう。今回はサイトの全体像(大きなコンテンツ区分)を捉えながら、HTMLのベースを作成する方法を解説します。
-
8
レスポンシブデザインのコーディングを着手方法として、今回はCSSを考えていきます。画面幅が変わっても変わらない部分、レイアウトの規則性を見つけて大まかなスタイル指定を書いてみましょう。
-
9
本格的にWebページのコーディングを行ってきます。CSSクラス指定方法の復習もしながら、ヘッダーとフッターのコーディングを行っていきましょう。デザインからHTMLを起こす時の考え方も解説します。
もっと見る
レスポンシブ・デザイン入門【図解たっぷり】 - はじめてのWEBデザインを 無料で始めましょう!
無料申し込み期限
3月26日まで
募集
人数
100名 (残りわずか)