HTMLとCSSの役割(基礎知識編2)

基礎知識編

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

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

  • HTML:ページの内容(構造)を担当
  • CSS :内容の装飾(デザイン)を担当

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

HTMLの役割

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

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

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

CSSの役割

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

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

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

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


ピコンくん
ピコンくん

内容そのものはHTML
その内容の飾り付けはCSS
ということですね。

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

構築

ホームページを作成することを一般的には『サイトの構築』と言う

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

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

その結果・・・

HTMLとCSSの二つの言語を習得しなければならない

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

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

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

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

まとめ
  • ホームページ作成に必要なHTMLとCSSはそれぞれ役割が異なる
  • HTMLはページの内容を担当
  • CSSは内容の装飾を担当
  • 過去にはCSSという言語は無く、装飾情報はHTML内に記述していた
  • 構築や更新のしやすさのため、装飾情報を分離させたものがCSSである
  • HTMLやCSSはどちらか一方ではなく、どちらも欠かせないものである

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

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

おつかれさまでした。

タイトルとURLをコピーしました