今回はHTMLとCSSについてです。
ここでは、HTML(Hyper Text Markup Language) の概要は知っているものとして話を進めます。
昔のWebサイト
HTMLのタグの中には、文章の段落を表す <p></p> や、画像表示の<img />、ハイパーリンクの<a></a>のように、テキスト（文章）に意味を与えるためのタグと、<font></font>のように、見た目を変えるためのタグがあります。
また、本来は「表」の意味を持つ<table></table>タグですが、使い方によってはレイアウトを整えることもできるため、今でも多くのWebサイトが、本来の用途とは別の目的で使用しています。
このようなWebサイトのメンテナンスは、かなり骨の折れるものでした。というのも、例えばサイトのデザインを変えるために文字の色を変更する場合、すべてのHTMLファイルの文字の色を変えるタグを置換しなければならないのです。
さらに、段組などのレイアウト変更はもっと大変でした。<table></table>の中の<tr></tr>や<td></td>の数を1つ間違えるだけで、ガタガタにずれてしまいます。そのような表構造が何重にもネストしているのです。
意味構造はHTML、見た目はCSS
しかし、今の主流は、「HTMLには文章の意味や構造だけを記述する」そして「見た目はCSS（Cascading Style Sheet）に記述する」というものです。
例えば、HTMLには、「この部分は見出し」「ここは本文」「ここは強調する」というようなタグをつけます。
そして、CSSに「見出しは文字サイズを大きく、背景に星の画像を入れる」「本文は文字の色を黒、背景は薄いブルー」「強調は文字を太くして、色を赤くする」などと記述するのです。
段組などのレイアウトも、CSSで定義することができます。
こうすることのメリットは、いろいろありますが、この研修に関して言えば「デザインを変えたければ、CSSファイルだけを変えればOK」という点です。
関係ありそうな記事
WordPress研修 の記事