このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 メディアクエリーを使ってみよう (01:50) 無料公開中
- 概要
- レスポンシブWebデザイン
- ビューポート
- ブレイクポイント
- 学習を進めるための準備
-
#02 作業用フォルダを設定しよう (02:22) 無料公開中
- 作業用フォルダの作成
- 作業用フォルダの設定
- index.htmlの作成
- style.cssの作成
-
#03 背景色を切り替えてみよう (02:23) 無料公開中
- 開発者ツールの起動
- @media
- min-width
-
#04 ブレイクポイントを増やしてみよう (02:49)
- ブレイクポイントの設定
- モバイルファースト
-
#05 デスクトップファーストで組んでみよう (02:51)
- デスクトップファースト
- max-width
- 使い分けのコツ
-
#06 3カラムレイアウトを組んでみよう (01:59)
- 要素の配置
- スタイリング
-
#07 要素を横並びにしてみよう (02:32)
- メディアクエリーの設定
- フレックスボックスの設定
- order
-
#08 要素を消してみよう (01:58)
- 要素の追加
- display: none;
-
#09 要素を出現させてみよう (01:46)
- display: none;
- display: block;
-
#10 ヘッダーメニューを作ってみよう (02:45)
- 要素の配置
- スタイリング
- PCメニューの非表示設定
- フレックスボックスの設定
-
#11 PC用のメニューに切り替えよう (01:26)
- メディアクエリーの設定
- displayの操作
-
#12 配置の列数を変更してみよう (02:18)
- 要素の配置
- スタイリング
-
#13 列数に応じて幅を計算しよう (02:58)
- flex-wrapの設定
- widthの計算
- メディアクエリーの設定
- widthの再計算
-
#14 次のステップを確認しよう (01:26)
- ここまでのまとめ
- 次のステップ
- 256timesの紹介
次におすすめのレッスン
特訓CSS メディアクエリー編 256times
「256times」の無料体験クラスを終えた方へ。このクラスではCSSメディアクエリーによる実践的なレイアウト手法を習得していきます。
256times
