このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 アプリ紹介ページを作っていこう (02:32) 無料公開中
- 完成版の確認
- 素材の確認
- プロジェクトフォルダの設定
-
#02 ファビコンを設定しよう (02:48) 無料公開中
- index.htmlの作成
- titleタグの設定
- ファビコンの設定
- ソースコード比較機能の紹介
-
#03 ロゴ画像を配置しよう (02:48) 無料公開中
- Emmetの活用
- ロゴ画像の配置
-
#04 CSSを読み込んでいこう (02:40) 無料公開中
- 画像サイズの設定
- linkタグ
- style.cssの作成
-
#05 余白をリセットしていこう (02:10) 無料公開中
- bodyのmarginリセット
- h1のmarginリセット
- ダウンロードリンクの配置
-
#06 ボタンのスタイルを整えていこう (02:38)
- aのスタイリング
- .btnのスタイリング
-
#07 containerクラスを設定しよう (02:55)
- .containerのスタイリング
- headerのpadding設定
-
#08 ヒーローエリアを作っていこう (02:42)
- ヒーローエリアのマークアップ
- 画像サイズの設定
- font-familyの設定
-
#09 見出しや段落のスタイルを整えよう (02:28)
- h1のスタイリング
- pのスタイリング
- ヒーローエリアの背景色設定
-
#10 背景画像を設定していこう (02:48)
- background-image
- background-repeat
- background-position
-
#11 余白を調整していこう (02:41)
- 余白の調整
- vertical-align: bottom
- 中央揃えの設定
-
#12 特徴セクションを作っていこう (02:49)
- 特徴セクションの配置
- 画像、見出し、段落のマークアップ
-
#13 画像の大きさを調整しよう (02:24)
- 画像の調整
- h2のスタイリング
-
#14 特徴セクションを完成させよう (02:51)
- 余白の調整
- sectionの複製、調整
-
#15 ユーザーの声セクションを作ろう (02:46)
- ユーザーの声セクションの配置
- footerタグの利用
- 画像の調整
-
#16 ユーザーの声のスタイルを整えよう (02:00)
- .voicesのスタイリング
- .voices h1のスタイリング
- .voices sectionのスタイリング
-
#17 ユーザーの声セクションを完成させよう (02:06)
- footerのスタイリング
- sectionの複製、調整
-
#18 ダウンロードを促すセクションを作ろう (02:59)
- .call-to-actionのマークアップ
- .call-to-actionのスタイリング
-
#19 フッターを作っていこう (02:26)
- footerのスタイリング
- smallのスタイリング
-
#20 メディアクエリを設定しよう (02:49)
- メディアクエリの設定
- ヒーローエリアのレイアウト調整
-
#21 ブラウザ幅に応じて画像を調整しよう (02:50)
- 画像幅の調整
- .containerの調整
-
#22 特徴セクションを横並びにしよう (02:34)
- フレックスボックスの設定
- flex-direction: row-reverse
-
#23 ユーザーの声を横並びにしよう (01:48)
- フレックスボックスの設定
- 余白のリセット
-
#24 アプリ紹介ページを完成させよう (02:13)
- レイアウトの調整
- flex-direction: column
