戻る

CSSの基本を理解する

スタイルシートとは、文書の「表示（見栄え）等のデザイン・レイアウト」を定義するための文書の雛型を意味します

Web制作の場合、主にCSS（Cascading Style Sheets）と呼ばれるスタイルシート言語で作成されたファイルのことを指します。HTML文書で文書構造を、CSSファイルで表示を指定します。

XHTML文書にCSSを適用するためには、次の4つの方法があります。

HTMLのlink要素で外部スタイルシートを読み込む

<link rel="stylesheet" type="text/css" href="style.css" media="screen,print">

CSSの@import命令で外部スタイルシートを読み込む

@import url("style.css")
@import url('style.css')
@import url(style.css)
@import "style.css"
@import 'style.css'

HTML文書内に、style要素の内容として書き込む

<style type="text/css" media="screen,print">
～styleの記述～
</style>

HTML文書内に、style属性の値として書き込む

<p style="font-color:#FF0000"; font-weight:bold;">
style属性を指定しています。
</p>

4つの方法のうち推奨されているのは、上の2つです。

CSSのファイルをXHTML文書とは別に用意して、それを読み込んで使うことには、様々なメリットがあります。

CSSファイルを別に用意することのメリット

1つのCSSファイルを複数のHTML文書で共有することで、共通する部分のスタイルを一元管理できる

HTML文書には一切手を加えることなく、膨大な量の（たとえば1000ページを超えるようなサイトの）ページのデザインを変更できます。CSSでレイアウトに関する指示を行いますので、HTML文書の容量は極端に減少します。一度読み込まれたCSSはキャッシュされるので、CSSを共有していればさらに表示が早くなります。

CSSを適用するブラウザを指定することが可能

ブラウザの種類やバージョンによって、CSSの対応状況に大きな差があります。そのためブラウザによっては、CSSを適用することでかえってレイアウトが崩れます。CSSを適用するブラウザを指定することで、使えるCSSの幅が広がり、ブラウザ固有のバグで悩む時間も大幅に減らすことができます。正しいXHTML文書であれば、古いブラウザでも内容は正しく伝わります。

アクセシビリティの向上

CSSを導入して構造と表示を分離することにより、一般的ではない様々な環境からもWebサイトを利用できるようになります。

Copyright © 2012 YOHSUKE NAKANO