装飾はCSSで指定する

CSSとは

CSS(Cascading Style Sheets)とは、Webページのスタイルを指定するための言語です。 ちなみにWebページに限らず、文書のスタイルを指定する技術全般をスタイルシートといいます。 HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。

CSSを使うメリット

CSSを使う最大のメリットはメンテナンス性の向上です。HTMLだけで装飾する場合、例えば見出しの色やサイズを変えようとすると、 見出しが使用されているすべての箇所を変更する必要がありますが、 CSSではこうしたスタイルを一括で管理することができます。 また、複数の文書でスタイルを共有できるため、メンテナンス性が格段に向上します。
昔は装飾用にに使われていた一部のHTMLタグ(<center>、<font>など)が非推奨、廃止になっていることからも、CSSの使用は必須になっていると言えるでしょう。 特に最近では、PCとスマホで別々の表示をさせるレスポンシブデザインが主流になりつつありますが、この機能(メディアクエリ)を実装するためにもCSSが必要になります。

CSSの書き方

HTML文書にスタイルシートを適用するには、大きく分けて以下の3つの方法があります。

このうち、CSSのメリットであるメンテナンス性を最大に活かせるのは、外部にCSSファイルを置く方法です。 スタイルシートを記述したCSSファイルをHTMLファイルとは別に作成して、HTMLファイル内から呼び出します。 呼び出しには、HTML文書の<head>内に<link> を記述して、外部CSSファイルを指定します。

CSSの指定にはIDclassを用いて指定箇所を割り当てます。どちらをどこに使っても構いませんが、IDは1ページに1回しか使えません。なので必然的に大きなブロックにはID、小さなブロックや複数箇所指定したい場合はclassを用いることになります。

CSSもほとんどの場合コピペでOKです。Dreamweaverなどを使えばコードが書けなくても指定をパネルから選ぶことができますし、効果を確認しながら作成することができます。

>> レイアウトはブロックで考える