
【目次】
- 1-1_Web制作の旅へ!アイデアをカタチにする最初のステップ
- 1-2_Webの仕組み:コードとブラウザの協働作業
- 1-3_Web制作の最強コンビ:HTMLとCSSの役割分担
- 2-1_HTMLの基本構文
- 2-2_テキスト情報を構造化する
- 2-3_画像とリンクの扱い
- 2-4_Web構造を明確にするセマンティックタグ
- 3-1_CSSの基本構造と適用方法
- 3-2_空間を制御する:ボックスモデルの理解
- 3-3_現代のレイアウト技術:Flexboxの基礎
- 4-1_必須スキル:レスポンシブデザイン
- 4-2_次の扉:動きを学ぶJavaScriptへのロードマップ
- 5-1_HTMLセマンティックタグ チートシート
- 5-2-1_Flexbox 基本プロパティ チートシート
- 5-2-2_Flexbox 実務テクニック チートシート
- 5-3-1_Grid 基本プロパティ チートシート
- 5-3-2_Grid 実務テクニック チートシート
- 5-4_CSS リセット & 標準化スニペット集
- 6-1_Box Model Visualizer
3-3_現代のレイアウト技術:Flexboxの基礎
Flexboxは、Webサイトの部品を柔軟に配置するための強力なCSS機能です。特に横方向の要素の整列や中央寄せに絶大な効果を発揮します。
【Flexboxの基本手順】
- 親要素に display: flex; を指定し、Flexコンテナ化する。
- その子要素がFlexアイテムとなり、柔軟に配置されるようになる。
【主要なFlexboxプロパティ】
| プロパティ | 適用要素 | 役割 |
| display: flex; | 親要素 | Flexboxを有効化する。 |
| justify-content | 親要素 | 主軸(通常は横方向)に沿ってアイテムを整列する。 |
| align-items | 親要素 | 交差軸(通常は縦方向)に沿ってアイテムを整列する。 |
| flex-direction: column; | 親要素 | アイテムの並びを縦方向(列)に変更する。 |

