新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 アプリ紹介ページを制作しよう (02:37) 無料公開中
- 完成版の確認
- 作業用フォルダの説明
- index.htmlの作成
-
#02 ヘッダーをマークアップしていこう (02:22) 無料公開中
- headerのマークアップ
- styles.cssの作成
-
#03 余白をリセットしよう (02:28) 無料公開中
- デベロッパーツールでの確認
- 余白のリセット
- フォントの設定
-
#04 ヘッダーのスタイルを整えよう (02:09) 無料公開中
- headerのスタイリング
- vertical-align
-
#05 ボタンのスタイルを整えよう (02:45)
- ボタンのスタイリング
- :hover
-
#06 特徴紹介セクションを作ろう (02:16)
- 特徴紹介セクションのマークアップ
-
#07 特徴紹介セクションを完成させよう (02:43)
- 特徴紹介セクションのスタイリング
-
#08 メンバー紹介セクションを作ろう (02:46)
- メンバー紹介セクションのマークアップ
-
#09 メンバー紹介セクションを完成させよう (02:38)
- デベロッパーツールでの確認
- メンバー紹介セクションのスタイリング
-
#10 ダウンロードを促すセクションを作ろう (02:57)
- call-to-actionセクションのマークアップ
- call-to-actionセクションのスタイリング
-
#11 フッターを作っていこう (01:48)
- footer
- favicon
-
#12 ビューポートの設定をしよう (01:36)
- デベロッパーツールでの確認
- ビューポートの設定
-
#13 メディアクエリを設定しよう (02:54)
- メディアクエリー
- flexbox
- 動作確認
-
#14 PC向けのレイアウトを作ろう (02:39)
- 幅の固定
- 中央配置
-
#15 画像を左右に振り分けよう (02:34)
- calc()
- justify-content
- flex-direction
- :nth-child
-
#16 ページを完成させていこう (01:58)
- 余白の調整
- ページの完成
リリース情報（note）
詳細情報
- 最終更新日
- 2019年9月12日
- バージョン情報
- Chrome 76.0 / Visual Studio Code 1.38.0
