【目次】
- 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-1_CSSの基本構造と適用方法
CSSはHTMLに対してデザインの指示を与えます。
3.1.1. CSSの基本構文
CSSの命令は、セレクタ、プロパティ、値で構成されます。
- セレクタ: どのHTML要素を装飾するか（例：p、.class、#id）。
- プロパティ: 変更したい項目（例：color、font-size）。
- 値: その項目に設定する具体的な内容（例：blue、16px）。
【CSSの記述例】
p {
color: #333333; /* 文字の色を濃いグレーに設定 */
font-size: 16px; /* 文字の大きさを16ピクセルに設定 */
}
3.1.2. 外部ファイルの利用
CSSは、通常HTMLファイルとは別の外部ファイル（例：style.css）として作成し、HTMLの<head>内で読み込みます。
【HTMLでのCSS読み込み】 <link rel=”stylesheet” href=”style.css”>
Kindle本のご案内
Webサイト制作に関する書籍を執筆しました。
Kindleストアにてご購入いただけます。
