このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ランディングページを模写しよう (01:56) 無料公開中
- ランディングページの確認
- 模写コーディングでのルール
-
#02 macOSで作業用フォルダを設定しよう (02:42) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#03 Windowsで作業用フォルダを設定しよう (02:41) 無料公開中
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- ブラウザでの確認
-
#04 headerのマークアップを進めよう (02:36) 無料公開中
- 優先するレイアウトの確認
- 構成の確認
- 要素の配置
-
#05 余白をリセットしていこう (02:59) 無料公開中
- 余白のリセット
- h1の文字サイズ
-
#06 ダウンロードボタンを作ろう (02:43)
- リンクのスタイリング
- text-decoration
- displayプロパティ
-
#07 フレックスボックスを使ってみよう (02:34)
- display: flex;
- align-items: center;
- justify-content: space-between;
-
#08 CSSを整理しておこう (02:36)
- CSSの整理
- セレクターの整理
-
#09 アプリ紹介セクションをマークアップしよう (02:37)
- 紹介セクションのマークアップ
- br
-
#10 ヒーローエリアのスタイリングをしよう (02:29)
- 余白のリセット
- セクション固有のスタイル
-
#11 背景画像を設定していこう (02:56)
- background-image
- background-repeat
- background-position
- backgroundの一括指定
-
#12 要素の配置を整えていこう (02:45)
- divの導入
- 中央揃えの考え方
-
#13 要素間の余白を調整していこう (02:08)
- 余白の考え方
- 余白の調整
- 子孫結合子
-
#14 特徴セクションをマークアップしていこう (02:30)
- 特徴セクションのマークアップ
-
#15 特徴セクションのスタイリングを進めよう (02:54)
- 特徴セクションのスタイリング
- text-align
- class属性の設定
- 余白の設定
-
#16 特徴セクションを仕上げていこう (02:24)
- divの導入
- text-align
- 余白の調整
-
#17 フッターを仕上げていこう (02:09)
- footerのマークアップ
- footerのスタイリング
-
#18 メディアクエリーを導入しよう (01:53)
- メディアクエリーの導入
- 動作確認
-
#19 ロゴ画像を切り替えてみよう (02:41)
- ロゴ画像の配置
- displayプロパティの切り替え
-
#20 ヒーローセクションのレイアウトを整えよう (02:52)
- ヒーローエリアのレイアウト
- フレックスボックスの導入
- marginの設定
-
#21 特徴セクションのレイアウトを整えよう (02:42)
- 特徴セクションのレイアウト
- フレックスボックスの設定
-
#22 画像とテキストを逆にしていこう (02:45)
- セレクターの調整
- flex-direction: row-reverse;
-
#23 コンテンツに最大幅を設定していこう (02:56)
- containerクラスの導入
- 動作確認
-
#24 containerクラスを設定していこう (02:35)
- containerクラスを設定する位置
- ヒーローエリアの設定
-
#25 ランディングページを完成させよう (01:53)
- 特徴セクションの設定
- これまでのまとめ
2023年3月29日
