カスケーディング・スタイル・シート(CSS)は、ウェブページのレイアウトを専門的に行う言語です。タグでのレイアウトデザインでは、ブラウザによって変わってしまう場合がありますので、HTMLから分離した形で外見を記述します。

１つのスタイルシートは、サイトの全てのページに適用することができます。
また、複数のスタイルシートファイルを用意することで、サイト内のデザインをコンテンツによって使い分けることが可能です。

スタイルシートのメリットはサイト全体に統一感を出せることにあります。
一般の書籍のレイアウトに統一感があるように、ウェブにも同じ背景やフォントを使用したりと統一感を出すことも重要です。全てのページに同じスタイルシートを用いることで、サイト全体が１つのブランドとしての協調性を持つことができるのです。

スタイルシートの実装

スタイルシート実装するには主に２つの方法があります。

埋め込み型スタイルシート：style属性を用いてタグに実装する
リンク型スタイルシート：別ファイルにスタイルシートを記述し、そのスタイルを使うウェブページのヘッダーからリンクで読み込む

リンク型スタイルシートを用いると、外部スタイルシートファイルを更新するだけでサイト全体の見せ方を簡単に変更できるためメンテナンスが楽になるというメリットがあります。

また、スタイルシートファイルは最初にダウンロードするだけでよいので、そのスタイルを適用したページは、埋め込み型スタイルシートを利用したページよりもダウンロードが速くなります。

スタイルが多くのページに共通するものであればサイト全体のスタイルシートとして追加するべきですが、たった１ページでしか使わないスタイルは埋め込み型にした方がよいでしょう。

そうすると、ページ共通のスタイルにリンクしたままで、そのページの埋め込み型スタイルシートが追加されます。これは、修正されたページにも、共通のスタイルシートに対する変更が反映されるという利点があります。

スタイルシートが機能するかを確認する

スタイルシートをユーザーのブラウザが未対応だったとしても、ページが見苦しく表示されることは避けなければなりません。
例えば、同じ文字列を少しずらして表示して影効果を持たせるようなスタイルは、スタイルシートが機能しないページでは訳がわからなくなります。

スタイルシートを使用するときは、必ずスタイルシートを使用しない時のページを確認し、見づらくないかをチェックしましょう。

スタイルシートについてはこちらで詳しく解説してあります

eWeb