あなたは勘違いしてないか？ 真相究明！ CSS都市伝説

CSSとは「表現言語」

CSS正式な名称はカスケーディング・スタイル・シート。シンプルにスタイルシートと呼ばれることもある。

ウェブページを作成する際に記述するHTMLとはウェブページを作成するための構造言語で、文書の骨格を作るためのものだ。これに対してCSSは表現言語という位置づけになる。

ウェブサイトやウェブページを、マンションやビルなどの建築構造物にたとえてみよう。誤解を恐れずに言うと、HTMLは、土台を作る基礎工事の上に鉄骨を組み、さらに階段や廊下、玄関、窓、壁などを作りこんでウェブサイト及び、ウェブページの基本を作るものだ。つまり、この部分がしっかりしていないと、ウェブサイトや、ウェブページは使いにくく、壊れやすいものになってしまうのだ。

これに対してCSSは、塗装や壁紙を使って内装を行う工程だと考えればいい。インテリアや調度品を配置などは、ウェブマスターの好みで決めることができる。

先ほど、「HTMLは文書を構造化する言語である」という書き方をしたので、少し難しく感じるかもしれないが、実際には簡単なことである。文書の構造化で使われる要素は、主に3種類。「見出し」と「段落」と「箇条書き」、たったこれだけなのである。

ほとんどの文書というものは、これらの要素で構成されている。CSSは、これらの見栄えを適用させるための言語として使用する。たとえば「見出し」の設定1つにしても、文字の大きさ、背景の色や画像、行間のスペース、余白、マージンなど、細部に渡って正確な指定を行うことができる。

またHTMLには、文書を構成する要素を「div」として、まとめることができる。「div」とはdivisionの略で、会社でいうなら「宣伝部」とか「営業部」のようなものだ。この「div」には、さらに別の「div」を入れ子にできる。「宣伝部」の中に「制作課」などがあり、さらにそれらは個別の社員で構成されている。この個別の社員に相当するもの、つまり最小の単位が、文書でいう「見出し」や「段落」なのである。

図1　実際にCSSを使ったサイトを調べる場合は、CSSデザイン集の「CSS Mania」が参考になる。
http://cssmania.com/

CSSは、こうした「div」に対しても個別で指定を行える。ボックスという観念を使って、大きさやレイアウト位置、カラーや背景画像、表示／非表示までを詳細に設定できる。

CSSの正しい使い方を知ろう

それではCSSの正しい使い方について簡単に説明しよう。ウェブページにCSSを適用させる、つまり表現言語を使用するにはいくつかの方法がある。一番簡単なやりかたは、HTMLに対してそのつど、スタイルを書き込むことだ。

しかし、この方法は本来のCSSの使い方としては、効率の悪い方法である。たった1ページだけで完結するウェブサイトならこの方法でもよいが、ウェブサイトの多くは複数のページによって構成されている。すべてのHTMLに対して、それぞれCSSを設定していては、大きな無駄が生じる。何よりも、CSSをHTMLファイルに直接書き込む分、ファイルサイズが大きくなってしまう。

CSSを設定する際に、最も一般的で効率のいい方法は、CSSだけを別のファイルにまとめてしまうこと、いわゆる「外部CSSファイル」という方法である。

この方法を使うと、構造と表示は完全に分離され、デザインやレイアウトは一括して管理できる。それぞれのページにスタイルを指定する方法に比べると、一度作ったスタイルをほかのページでも使い回しできるので、作業効率が向上する。また、HTMLファイルには、文書の構造を記すHTMLタグのみの記述になるため、ファイルサイズも小さくできる。

CSSの4大メリット

ここまでの説明で、CSS及び外部CSSファイルを使うことによって、制作の現場だけでなく、ウェブマスターにとっても多くのメリットがあることがわかっただろう。では、その具体的なメリットとは何か。

CSSの4大メリット(1)
コストダウン

外部CSSファイルを使って、装飾部分を別ファイルで管理すると、CSS以前のページデザイン方式（「テーブルレイアウト」と呼ばれる）と比較して、大幅にファイルサイズを小さくできる。特に、1日のページビューが数万を超えるような企業サイトでは、サーバーの転送量が激減し、ダイレクトにコストダウンにつながる。

CSSの4大メリット(2)
制作・管理の効率化

サイト制作や管理に関する効率化にも大きなメリットがある。CSSを使うということは、デザインやレイアウトの要素をモジュール化しておくことだ。見出しやリンクボタンのデザイン、写真の配置と余白の設定、文字の先頭に配置したいデザインアイコンなど、多くのデザイン要素をあらかじめCSSを使ってデザインしておくのである。

たとえば、新規にウェブページを作成する際、CSSで見出しや本文、あるいは特別な囲みのスタイルを作っておけば、HTMLでそのスタイル名を指定するだけで見た目のデザインを実現できる。

図2　CSSによるデザインは、従来の方法に比べて、ファイルサイズを小さくできるのはもちろん、複数のウェブページのデザインを一括して変更することもできる。

また、外部スタイルシートによって、デザインやレイアウトのモジュールを一か所で管理しているメリットも見逃せない。CSSを使えばHTMLのコードを一切修正することなく、サイト全体を一気に更新することも可能だ。企業サイトのように何千、何万ページもあるような場合は絶大な効果を発揮するのはいうまでもない。

CSSの4大メリット(3)
SEO効果の向上

多くのサイト利用者が、検索エンジンを使って目的のページを見つけ出している昨今、SEO効果は、企業サイトにとっては重要な要素の1つだといえる。CSSを使ってデザインやレイアウトをするということは、HTMLのソースコードをキレイに書くということ、つまり、論理的な文書構造に基づいてシンプルなHTMLを書くということだ。

検索エンジンは、HTMLページを読んで、その構造を分析している。つまり、シンプルかつ正しいHTMLほど、検索エンジンはそこに書かれている内容を理解しやすくなるのである。見出しや強調、リンク要素といった、利用者に対して重要だと思われる内容を正しく検索エンジンに伝えることは、検索で上位に表示されることにもつながる。

CSSの4大メリット(4)
アクセシビリティ

アクセシビリティとは、ウェブを利用するすべての利用者に対して、平等に情報を提供しようとする姿勢のことである。とりわけ、老眼などの要因によって小さな文字が判別しにくい高齢者にとっては、アクセシビリティ対応は必須だといわれている。特に2004年6月に交付された日本工業規格（JIS）の「高齢者・障害者等配慮設計指針」（JIS 8341、通称：Web-JIS）は、国内初の公的なウェブサイト制作のガイドラインとしてアクセシビリティを規定している。これにより、官公庁などの公的なサイトはもちろん、多くの企業サイトもアクセシビリティに準拠することが、1つの社会貢献活動であるとして、企業イメージの向上に結び付けて実施しているケースが増えてきている。

Web-JISの中でも最も難易度が高く、かつ効果的な手法が、HTMLとCSSを使って、文書情報と視覚要素を分離することである。特にフルCSSでレイアウトされたウェブページは、全盲の利用者が使用する「音声ブラウザ」で正しい読み上げが可能だ。また、文字の大きさをCSSで相対指定しておけば、老眼の利用者も文字を大きくして見ることができる。

CSSレイアウト導入に関する注意点

これらの多くのメリットを生むCSSの導入に際して、ウェブマスターはどのように制作会社と付き合っていけばいいのか。

その中で注意すべきことは、CSSを単なる技術としてとらえ、従来のテーブルレイアウトの手法の代替手段として考えてはいけないということだ。CSSを使いこなすことは、まずHTMLを正確に記述できなくてはならない。かつウェブページに情報の構造を明確にできる設計が必要である。さらにサイト全体の情報構造を設計できないと無理なのである。ウェブサイトは、建築構造物に似ていると書いたが、設計図を作らないでマンションやビルを作れないのと同様なのだ。

今後、CSSを使ったウェブサイトは、間違いなく増え続けていく。どのタイミングでサイトをリニューアルし、どの制作会社と一緒にサイトを設計していくのか、今がその重要な時期といえる。