HTMLは「骨組み」！ CSSは...「服」？ Webページを作る２つの言語の違いをやさしく解説！

ブログを書いていると、ときどき目にする

「HTML」や「CSS」という言葉。

テーマの説明やカスタマイズ方法を調べると

当たり前のように出てきますよね。

「なんとなく難しそう」

「自分には関係ない」と

読み飛ばしていませんか？

プログラミングの専門用語のようで

身構えてしまう気持ちもよくわかります。

実はこの２つ、あなたが毎日見ている

Webページのすべてを支えている

とても身近な存在なんです。

仕組みがわかると、

ブログのちょっとした表示の崩れにも

落ち着いて対応できるようになります。

お疲れ様！じゅんです(^^)/

元気にブログ書いてますか？

今回は、

HTMLとCSSの違いを、

家づくりや服にたとえながら

やさしく解説しますね。

Remember this！(≧∇≦)b

HTMLは「骨組み」をつくる言語

HTMLは、Webページの

「構造」をつくるための言語です。

ここは見出し、ここは段落、ここは画像。

文章の一つひとつに

「これは何か」という意味を

与えていくのがHTMLの役割なんです。

具体的には、

文字を「タグ」と呼ばれる目印で

囲んで書きます。

・<h2>見出し</h2>：大きな見出し

・<p>本文</p>：段落

・<a>リンク</a>：

ほかのページへのリンク

・<img>：画像

家にたとえるなら、

HTMLは柱や壁、部屋の間取り。

どこが玄関で、

どこがリビングかを決める

家の「骨組み」にあたります。

CSSは「見た目」を整える言語

一方、CSSはWebページの

「見た目」を整えるための言語です。

文字の色や大きさ、背景の色、

余白の広さ、レイアウトの配置。

こうしたデザインに関わる部分を

CSSがまとめて担当しています。

HTMLが骨組みなら、

CSSは壁紙やカーテン、家具の配置。

人にたとえるなら、

HTMLが体で、CSSが服やヘアスタイル

といったところでしょう。

なぜ２つに分かれているの？

CSSは1994年、

ホーコン・ウィウム・リーによって

提案されました。

それまでは、見た目の指定も

HTMLの中に直接書き込むのが

一般的だったんです。

けれどそれでは、

デザインを少し変えるだけでも、

すべてのページを１枚ずつ

書き直さなければなりません。

そこで生まれたのが、

「構造」と「見た目」を分けて管理する

という考え方でした。

・HTMLは中身と構造に集中できる

・CSSを1か所直すだけで、

サイト全体のデザインを変えられる

・検索エンジンや読み上げソフトにも

ページの構造が伝わりやすくなる

役割を分けることで、

作る人にも読む人にも

やさしいWebページになったわけですね。

ブログ運営とどう関係するの？

WordPressなどのブログでは、

HTMLやCSSを直接書かなくても

記事は作れます。

でも実は、

その裏側ではちゃんと動いているんです。

たとえば、

エディターで「見出し2」を選ぶと、

裏ではHTMLの<h2>タグが使われています。

見出しを正しい順番で使うことは、

読者だけでなくGoogleにも

記事の構造を伝えることにつながります。

また、

テーマを変えるとブログの雰囲気が

一瞬で変わるのは、

主にCSSが切り替わるため。

記事の中身（HTML）はそのままで

「服」だけを着替えている

イメージなんです。

ちなみに、

パソコンのブラウザでページを開き、

右クリックから「ページのソースを表示」

を選ぶと、そのページのHTMLを

実際に見ることができます。

自分のブログで試してみると、

「見出し」や「段落」が

タグで囲まれているのがわかりますよ。

意味はすべてわからなくても、

「こうやって作られているんだ」

と知るだけで、

かなり身近に感じられるはずです。

---

まとめ

☑️HTMLは、見出しや段落など

Webページの「構造（骨組み）」を

つくる言語

☑️CSSは、色や大きさ、配置など

Webページの「見た目（服）」を

整える言語

☑️1994年に提案されたCSSによって、

構造と見た目を分けて

管理できるようになった

☑️ブログの見出しやテーマ変更の裏側でも

HTMLとCSSが働いている

HTMLとCSSは、

プログラマーだけのものではありません。

しくみを知っておくだけで、

ブログの見え方や見出しの使い方が

ぐっと理解しやすくなります。

次に記事を書くときは、

「この見出しは骨組みのどこだろう？」

と意識してみてください。

今日も

最後まで読んでくれてありがとう～！

では！また (*´▽｀*)