🎯 このマニュアルで学ぶこと

Webサイトのデータの中身は、主に「HTML」と「CSS」という2種類の言語で書かれています。

ここでは、この2つがそれぞれどんな役割を持ち、協力してWebサイトの見た目を作っているのかを、「家づくり」の材料に例えて解説します。

1. Webサイトの「骨組み」：HTML（HyperText Markup Language）

HTMLは、Webサイトの骨格、構造、意味を決める言語です。

「ここが見出しで、ここが段落、ここに画像を置いて、ここにリンクを貼る」という、サイト内のすべての情報と配置を定義します。

🏠 家づくりでの役割：「家の骨組みと建材」

家づくりに例えると、HTMLは以下の役割を果たします。

• 骨組み（構造）： 柱、梁、壁、部屋の間取りなど、情報がどこに、どんな種類で存在するのかを決める土台。
• 建材（情報）： テキスト、画像、ボタンなどの「材料」そのもの。

HTMLの例	Webサイトでの役割
<h1>	一番大きな「見出し（タイトル）」であると指定する。
<p>	「段落」として文章の塊であると指定する。
<img>	「画像」を配置する場所であると指定する。

HTMLだけでは、文字がただ並んでいるだけの簡素なページになりますが、情報としての意味が正確に定義されます。

2. Webサイトの「装飾」：CSS（Cascading Style Sheets）

CSSは、HTMLで作られた骨組みに対して、**見た目（デザイン、装飾、レイアウト）**を指定する言語です。

色、フォントの大きさ、要素の配置、アニメーションなど、「見栄え」に関わるすべてを担当します。

🎨 家づくりでの役割：「インテリアと外装デザイン」

CSSは、HTMLという「骨組み」を、以下のように魅力的に変身させます。

• 色と質感： 壁紙の色、床材の種類、家具の色。
• レイアウト： 家具を部屋のどこに配置するか、窓の大きさ、屋根の形。

CSSの例	Webサイトでの役割
color: red;	文字の色を「赤」にする。
font-size: 16px;	文字の大きさを「16ピクセル」にする。
margin-left: 20px;	要素を左から「20ピクセル」ずらして配置する。

HTMLで「ここにボタンがある」と定義し、CSSで「そのボタンを青色で角を丸くする」と指示することで、はじめて私たちが普段見ているWebサイトの見た目が完成します。

3. HTMLとCSSの関係性：協力してサイトを作る

HTMLとCSSは、どちらが欠けてもWebサイトとして機能しません。

• HTMLがない場合： 装飾する対象（情報）がないため、何も表示されない。
• CSSがない場合： 情報は表示されるものの、デザインやレイアウトが崩れ、骨組みだけの素っ気ない見た目になる。

WordPressでは、このHTMLとCSSを、テーマやブロックエディターといった機能を通して自動で生成・管理してくれます。

そのため、私たちがHTMLやCSSをゼロから書かなくても、プロが作ったデザインのWebサイトを簡単に作れるのです。

💡 まとめ：次のステップへ

Webサイトが**「情報と構造（HTML）の上に、デザインと装飾（CSS）を重ねることでできている」**と理解できれば、次のステップである「Webデザインの基本」がより深く理解できます。

次は、Webサイトの「見た目」について、良いデザインと悪いデザインの基準を解説します。