HTMLとCSSの役割（基礎知識編2）

『ホームページを作る』とは？（導入編1）の解説で少し言及したように、ホームページを作成するには『HTML』と『CSS』という二つの言語が最低限必要になります。

『ホームページを作る』とは？（基礎知識編1）

ホームページを手に入れるための手段は一つではありません。ホームページを『作成したい』のか『所有したいだけ』なのか、それに合わせて手段を選べばよいでしょう。ここではその手段ごとの違いについて。詳しく解説しています。

pikoon.jp

HTMLとCSSは、それぞれ以下のように役割が異なります。

• HTML：ページの内容（構造）を担当
• CSS　：内容の装飾（デザイン）を担当

この二つの言語が相互に関係しあってホームページを形成しています。

HTMLの役割

『HTML』とは
『Hyper Text Markup Language』の略で
ファイルや文が相互に参照しあう（ハイパーリンク）、文章構造化型（マークアップ）の言語
という意味になります。
HTMLが担う『ページの内容（構造）』とは、つまりそのページに

• どのような文章や箇条書き、表あるいは画像などが
• どのような順番で
• どれだけの量で盛り込まれているのか

といった情報を指します。

CSSの役割

CSSが担う『内容の装飾（デザイン）』とは、『HTML』によって表現されたそのページの内容を

• どのような見た目（色や大きさなど）で
• どのような配置で（右端や上端あるいは左右中央に配置したり、左端から少し右にズレた場所に配置など）装飾するのか

といった情報を指します。

※CSSはCascading Style Sheetの略
　Cascadingは『滝・縦つなぎ』を表すCascadeの現在分詞形

---

構築・編集・更新しやすさ

ひと昔前にはCSSという言語そのものが存在していませんでしたので、その当時は『内容も装飾も全て』HTML文に記述していました。
HTMLに装飾情報を指定する記法が与えられていた頃のお話です。

しかしそれでは構築や更新の際、極めて『手間が多くなる』ことから、やがて装飾の情報をHTMLから分離させて専門に引き受ける別の言語形式、つまりCSSに記述することにルールが変更されました。

その結果・・・

という状況になったのですが、そのぶんメンテナンス性は向上し、ホームページにおける表現の多様性が加速しました。

※『手間が多くなる』事情についてはまた別ページで解説していきます。

細かい事情はさておき、とにかく今後ホームページを作成する上でHTMLとCSSはそれぞれ欠かせないものであることを理解しておいてくださいね。

ではここで本記事をまとめておきます。

さてさて、HTMLとCSSの役割について理解できたところで今回はここまでにしましょう。
次回はHTMLやCSSを記述していくのに必要な『テキストエディター』についてお話します。

最後までお読みくださりありがとうございました。

おつかれさまでした。