インターネットで見ているWebサイト。きれいに色が付いていて、写真や文字が並んでいますよね。あれは、ただの文章ではなく、プログラミングの言葉でできています。
Webサイトを作るには、主にHTMLとCSSという二つの言葉を使います。これを人間の体に例えると、とても分かりやすいんです。
HTML：Webサイトの「骨組み」を作る
まず、**HTML（HyperText Markup Language）**は、Webサイトの「骨組み」や「構造」を作る役割をします。
- 人間の体で例えると: HTMLは、私たちの骨格です。どこに頭があり、どこに腕があり、どこに足があるか、という体の構造を決めています。
Webサイトで言うと、「ここに見出しを置く」「ここに文章を入れる」「ここに画像を入れる」といった、情報の中身と配置を決めていきます。
たとえば、<h1>というタグで「見出し」を作り、<p>というタグで「段落」を作る、といったように、タグを使ってWebサイトのパーツを組み立てていきます。
CSS：Webサイトの「お化粧」をする
次に、**CSS（Cascading Style Sheets）**は、Webサイトを「きれいに飾る」役割をします。
- 人間の体で例えると: CSSは、髪型や服装、メイクです。骨格であるHTMLに、色をつけたり、形を整えたりして、見た目を魅力的に見せます。
HTMLで作った骨組みに、CSSを使って「この文字の色を赤にする」「この画像の大きさを変える」「背景に色をつける」といったように、デザインや装飾を加えていきます。
骨組み（HTML）と装飾（CSS）の関係
HTMLとCSSは、それぞれ単独でも機能しますが、二つを組み合わせて使うことで、Webサイトが完成します。
- HTMLだけだと…: 文字と画像がただ並んでいるだけの、シンプルなWebサイトになります。
- CSSだけだと…: 飾りつけをする対象がないので、何も表示されません。
Webサイトは、まずHTMLで骨組みを作り、その骨組みにCSSでデザインを加えていくという順番で作られます。
まとめ：Webサイト作りは、HTMLとCSSで誰でもできる
Webサイト作りは、まるでプラモデルを組み立てるような感覚です。
- HTMLでパーツの配置を決め（骨組み）、
- CSSで色や形を整える（お化粧）。
この二つの言葉を覚えるだけで、あなただけのWebサイトを自由にデザインできるようになります。
まずは、自分の簡単なプロフィールサイトを作ってみるのはいかがでしょうか？
