ホームページの構造

まずはホームページがどういう仕組みでできているかを勉強しましょう。
いきなり結論を言うと、ホームページはHTMLファイルとCSSから成り立っています。
・・・はいっ!いきなりちんぷんかんぷんになりましたね!(笑)
わからなくて大丈夫です。それぞれ説明していきましょう。

HTMLとは

Internet Explorer などのブラウザを使ってホームページを見ると、画像や文章がきれいにレイアウトされて見ることができます。
これは、ホームページのそれぞれのページが HTML (エイチティーエムエルと読みます) と呼ばれる規則を用いて、その決まり通りに表示するように、ブラウザに指示を出しているためです。
その書き方(決まり)のちょっとした例を見てみましょう。

表示サンプル ソースコード
今日の出来事
今日は以下のような出来事があった。
・宝くじで300円当たった
・昼飯にうどんを食べた
・友人と会った
<h1>今日の出来事</h1>
<p>今日は以下のような出来事があった。</p>
<ul>
<li>宝くじで300円当たった</li>
<li>昼飯にうどんを食べた</li>
<li>友人と会った</li>
</ul>

左の文章は、あなたなら「今日の出来事」が文章のタイトルで、以下説明文と出来事が箇条書きで記述されている、と文脈から推測できます。でも、コンピュータが同様に文脈から文章構造(見出し・段落・箇条書きなど)を判別することは非常に困難です。

そこで、HTMLでは上記右のようにタグと呼ばれる特殊文字を記述することで、文章構造をコンピュータに判別させています。

タグについて少し説明します。
タグ<hoge>…</hoge>で囲まれた部分をhoge要素と言います。上のHTMLでは「今日の出来事」がh1要素、「今日は以下のような出来事があった」がp要素となっています(HTMLでは、h1要素が最上位の見出し、p要素が段落、ul要素が箇条書き、li要素が箇条書きの項目を意味しています)。

このようにタグで囲むことによって「この部分はこういう意味なんだよ」とコンピュータに文章の構造を伝えているのです。
これがHTMLです。

CSSとは

HTMLがタグを使ってホームページの文章構造を記述するためのものというのはなんとなくわかってきたのではないでしょうか?
タグを使えば「文章を箇条書き」にしたり、先程の例にはなかった「画像を表示する」なんてこともできます。
じゃあタグとその意味がわかればホームページが書けちゃうの?
・・・残念!
いや、書けないことはないんですが、HTMLはあくまで文書の構造を記述するためのものであって、レイアウトやデザインを調整するためのものではないんですね。
だから、「文字の色を変えたい」とか「2段組みで書きたい」なんてことをタグを使ってやるのはよろしくないのです。(できないのではなく、できるけどやっちゃいけない)
じゃあレイアウトやデザインを調整したいときはどうするの?・・・ってことでCSSと呼ばれる文章装飾専用の規則が用意されています。
このCSSを使って記述すればより柔軟・高度なレイアウトが実現できるし、タグを純粋に文脈用として記述できるのでHTMLファイルもスッキリする利点があるのです。

この決まりが出来た当初は対応ブラウザーの普及が不十分でしたが、2000年代中頃より十分な普及が見られるようになってから、CSSを使ったデザインへと変化しています。

実際にホームページをつくるうえで役立つ知識はこちら

リンク集