【目次】
- 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
2-1_HTMLの基本構文
タグと要素の基本
HTMLはすべてタグと呼ばれる記号で記述されます。タグはコンテンツに意味を持たせる役割を果たします。
- 開始タグ (“) と 終了タグ (“) で内容を挟みます。
- 開始タグから終了タグまですべてを合わせて要素（Element）と呼びます。
【コード例：段落要素】
<p>これは一つの段落です。</p>HTML文書の骨格
すべてのHTMLファイルは、以下の構造で始まります。【HTML文書の最小構成】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<!-- ユーザーに見せる内容をここに記述する -->
</body>
</html>Kindle本のご案内
Webサイト制作に関する書籍を執筆しました。
Kindleストアにてご購入いただけます。
