【50代からの学び直し】Webサイトは「意味」でできている。AIと学ぶHTML/CSSの意外な正体 | Day 8

こんにちは！
60日チャレンジ、Day 8です。 昨日まではデザインの「静的な美しさ」を学びましたが、今日からはそれを「Webサイト」というシステムに変換する、実装の基礎に入ります。

正直に言えば、私はコードに対して「プログラム的な、少し距離のあるもの」という先入観を持っていました。しかし、Geminiとの対話を通じて見えてきたのは、コードとは「デザインの論理を記述する言語」であるという事実でした。

📅 Day 8：HTMLとCSSの基礎

今日のテーマは、Webサイトの「構造」と「装飾」を担うHTMLとCSSの基本的な役割、そしてデザイナーが特に理解すべきポイントです。

※私が感じたこと
　きょうからプログラミングですね～
　CSSもJavaScriptも最近はイチから触ることがないので、しっかり復習し
　ましょう！

#1.HTMLとCSSの役割： 料理に例えると一瞬でわかる「食材」と「盛り付け」

💻 1. HTMLとCSSの役割分担

HTMLとCSSの関係は、建物の「骨組み」と「内装・外装」に例えられます。

2. それぞれの違いとデザイナーが知るべき理由

① HTML：なぜデザイナーが構造を意識すべきか
HTMLは、Day 3で学んだ情報設計（IA）をコードで表現する唯一の手段です。

論理的な構造の担保

・良い例
見出しは必ず<h1>、<h2>…と階層順に使う（アクセシビリティの「堅牢性」）。

・悪い例
見た目が大きいからという理由で、論理的な順序を無視して<h4>を使う。

アクセシビリティへの貢献
スクリーンリーダーなどの支援技術は、CSSの見た目ではなく、HTMLのタグが持つ意味を読み上げます。HTMLの構造が正しくないと、情報が正確に伝わりません。

② CSS：なぜデザイナーが装飾ルールを知るべきか
CSSは、Day 1で学んだデザインの四原則をコードで実現する唯一の手段です。

一貫性の確保
全体の配色やフォント、余白（マージン/パディング）をCSSで一元管理することで、サイト全体で反復の原則を守り、統一感を保ちます。

レイアウトの実現
要素を横並びにしたり（Flexbox）、グリッド（Grid）を構築したりする具体的な方法は、すべてCSSで制御されます。

💡 HTMLとCSSの分離
かつてはHTMLの中に装飾を直接記述していましたが、現在は役割を完全に分離するのが標準です。これにより、デザインの変更が容易になり、メンテナンス性が向上します。

HTMLとCSSがそれぞれの役割を果たすことで、Webサイトは「意味があり、美しく、誰でも利用できる」状態を保ちます。

※私が感じたこと
　ここまでは概要ですね。
　このあと、細かなコードの説明に入るのでしょうか？

#2.タグの使い分け： なぜ「見た目」以上に「意味」が重要なのか？

🏷️ デザイナーが意識すべきHTML基本タグ 5選

1. 見出しタグ：<h1> 〜 <h6>

役割
コンテンツの階層構造（セクションの重要度）を定義します。<h1>が最も重要で、ページに１つだけ使用します。

IAとの関連
Day 3で決めた情報の優先順位そのものです。見出しの大きさ（CSS）ではなく、論理的な順番（HTML）を厳守する必要があります。

2. リストタグ：<ul> と <li>

役割
複数の項目が「順序を持たないリスト」であることを定義します（ナビゲーションメニュー、箇条書きなど）。順序がある場合は<ol>を使います。

IAとの関連
情報を近接の原則に基づいてグループ化する際、コード上でもそれを明確に示します。ナビゲーションメニューもリストで作成するのが基本です。

3. リンクタグ：<a>

役割
他のページやコンテンツへの遷移（リンク）を定義します。

IAとの関連
Webサイトの導線そのものです。画像やボタンなど、クリックできる要素のほとんどは、このタグで囲まれます。

4. 段落タグ：<p>

役割
一連の段落テキストを定義します。

IAとの関連
長いテキストを意味のある単位で区切るために使います。改行（<br>）を多用するのではなく、新しい段落は新しい<p>で始めるのが正しい使い方です。

5. 意味を持つコンテナタグ：<header>, <main>, <section>, <footer>

役割
コンテンツの「種類」や「役割」を定義します。これらはセマンティックタグ（意味的なタグ）と呼ばれ、見た目は通常の<div>と変わりませんが、検索エンジンや支援技術にページの構造を伝える上で極めて重要です。

IAとの関連
Day 3で決めたワイヤーフレームの「セクション分け」をコードで明確に表現します。

これらのタグを「見た目」ではなく「意味」で正しく使うことが、デザイナーとして理解すべきHTMLの基礎です。

#3.CSSの再定義： プログラムではなく「デザインのルール」を数値化するツール

🎨 Step 3: CSSの基本的な仕組みとスタイルの適用例

CSSの基本的な仕組みは、「どの要素に」「どんな装飾を施すか」という命令の繰り返しです。この命令を構成するのが、セレクタとプロパティです。

1. CSSの基本的な仕組み
CSSの命令文は、以下の構造で書かれます。

セレクタ { プロパティ : 値 ; プロパティ : 値 ; }

①セレクタ (Selector)
「どの要素に」スタイルを適用するかを指定する部分です。CSSの最大の難所は、このセレクタの種類と指定方法の多さにあります。

② プロパティと値 (Property & Value)
「どんな装飾」を施すかという具体的な命令です。

プロパティ: 適用したい装飾の種類（例: 色、サイズ、余白など）。
値: その装飾の具体的な設定（例: #FF0000、20pxなど）。

2. ワイヤーフレーム要素へのスタイル適用例
Day 8の学習内容を、あなたが作成したジムサイトのワイヤーフレーム要素に適用する例を見てみましょう。

例 ① 見出しのスタイル（タイポグラフィの適用）
ワイヤーフレームの「選ばれる理由」のセクション見出し（<h2>）に、Day 2で決めたタイポグラフィのルールを適用します。

例 ② CTAボタンのスタイル（コントラストの適用）
ワイヤーフレームで最も優先度の高い要素、CTAボタン（クラスセレクタを使用）に、Day 2で決めたアクセントカラー（黄系）を適用します。

例 ③ セクションの余白設定（近接の適用）
Day 6で決めたセクション間の余白を、CSSで設定し、近接の原則を明確にします。

CSSは、デザインの見た目だけでなく、ワイヤーフレームの論理的な構造を視覚的に表現するための、デザイナーの必須ツールです。

#4.まとめ： AIを翻訳機にすれば、コードはもう怖くない

🎨 CSSとデザインの四原則の貢献度

CSS（装飾）は、HTML（構造）が持つ情報を、ユーザーにとって分かりやすく、美しく、使いやすい形で表現する役割を担います。

1. 近接（Proximity）への貢献：余白のコントロール
近接の原則は、関連性の高い要素を近くに配置し、低い要素を離すことで情報のグループ化を明確にするものです。CSSは、この「距離」を数値で正確に設定します。

CSSの機能
margin（要素の外側の余白）と padding（要素の内側の余白）プロパティ。

貢献の例
ジムサイトの「選ばれる理由」の各ブロック間に、margin-bottom: 60px; と設定することで、セクション間の分離を明確にし、情報の塊を際立たせます。

2. 整列（Alignment）への貢献：配置の基準
整列の原則は、要素を見えない線で揃えることで、統一感と安定感を生み出すものです。CSSは、この「線」に基づいた正確な配置を実現します。

CSSの機能
text-align（テキストの揃え）や、Day 9で学ぶ Flexbox や Grid といったレイアウト機能。

貢献の例
全ページのテキストを text-align: left; で左揃えに統一したり、グリッド線に合わせて画像やテキストブロックを完璧に揃えたりすることで、統一感を生み出します。

3. 反復（Repetition）への貢献：一貫したスタイルの適用
反復の原則は、同じ種類の要素には同じスタイルを繰り返すことで、ユーザーに「これは何であるか」を認識させるものです。CSSは、これを一元管理することで実現します。

CSSの機能
セレクタ（特にクラスセレクタ）とプロパティ。

貢献の例
すべてのCTAボタンに .cta-button というクラスを適用し、そのクラスに背景色や文字サイズをまとめて定義することで、サイト内のすべてのボタンが一貫した見た目になります。これにより、ユーザーは「この形のものはクリックできる」とすぐに学習できます。

4. コントラスト（Contrast）への貢献：視線誘導の強調
コントラストの原則は、重要な要素に「差」をつけることで、ユーザーの視線を優先度の高い場所へ誘導するものです。

CSSの機能
color（文字色）、background-color（背景色）、font-size（文字サイズ）、font-weight（太さ）。

貢献の例
メインのキャッチコピー（<h1>）に最大の font-size を適用したり、CTAボタンに背景と文字色のコントラストが高い組み合わせを使用したりすることで、ユーザーの注意を最も引きつけます。

・HTML: 情報設計（IA）を定義する論理的な構造。
・CSS: デザイン原則（四原則）を数値とルールで実現する装飾。

この視点の切り替えこそが、プロのWebデザイナーとしての最も重要なマインドセットです。CSSの苦手意識も、「デザインの原則を実現するためのツール」と捉えれば、きっと克服できます。

以上が、Day8の内容でした。
きょうも盛りだくさんでした。
きょうはHTML・CSSということで、苦手なプログラム関連。
しっかり復習しておきましょう。
また明日です！

ここまでご覧いただき、ありがとうございました。

次回の記事も、Geminiとの対話と具体的なアウトプットを交えながら、学習の様子を見ていただきたいと思います。
がんばります！

#50代からの学び直し #60日チャレンジ #Day8 #学習ログ #生成AI #Gemini活用 #Webデザイン #Webマーケティング #HTML #CSS