
【目次】
- 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-3_画像とリンクの扱い
2.3.1. 画像の表示(<img>)
画像を表示する**<img>タグ**は、終了タグを持たない空要素です。
- src属性:画像ファイルの**場所(URLまたはパス)**を指定します。
- alt属性:画像の内容を説明する代替テキストを指定します。これは、画像が表示できない場合や、視覚障碍者が利用するスクリーンリーダーのために必須です。
【コード例:画像表示】
<img src=”logo.png” alt=”会社のロゴ画像”>
2.3.2. リンクの作成(<a>)
他のページへの移動を可能にする**<a>タグ(アンカー)**は、href属性で行き先を指定します。
【コード例:外部サイトへのリンク】
<a href=”[https://www.google.com/](https://www.google.com/)”>Googleのウェブサイトへ</a>

