はじめてのスタイルシート

文字の色やサイズなどをHTMLタグで指定するのは効率が悪い。いっそ「デザインはいらない」と割り切って「淡々と文章を書く」という解決方法もある。しかし、訪れた方に興味を持ってもらえるようなデザインも大切な要素のひとつではないか...と思います。

はじめてのCSSデザイン

HTML は、文書の文字色やサイズなどを指定するためにあるのではなく、 文章をHTMLタグによって「見出し」とか「段落」とかに区分けすることで「文書の構造を明確にすること」が本来の役割。

この区分けをマークアップと呼び、そのルールがHTMLの記述方法です。HTMLでは文書の構造だけを記述し、「デザインの指定をしないこと」からスタイルシートの導入が始まります。

実は、このページは書店で非常に参考になるCSSの特集記事が載っている雑誌 Web Designing2005/11を見つけ、発売中に紹介したいと思い急いで書いたものです。

--
このページを公開した時は、記事の紹介がこの部分にありましたが、雑誌発売から随分と経ったためページの後半に移しました。さらに、2007年2月号の情報も追加しました。

日本語の文章を整理する

実際にインターネットで文書を公開する時には、あとで「見出し」をつけることを意識しながら、文章を内容ごとにいくつかのブロックに分けます。さらに、リスト（箇条書き）として表したほうが良い部分は、項目ごとに改行しておくなどの日本語の文章の整理をします。

HTML によるマークアップ

次に、どれが「段落」あるいは「リスト」なのか、またブロックごとに「見出しを何にするか」を考え、それぞれをHTMLタグを使って囲み、必要に応じて画像を表示するためのHTMLタグを追加するなどの作業 -- つまり、マークアップを行います。HTMLマークアップにおいて、文字の色や配置などの指定はしません。このためHTMLに対応したエディターを使えば単純で簡単な作業です。

スタイルシート(CSS) の活用

マークアップされた文書のHTMLタグに対して、文字の色や背景などの見た目（表現方法）に関わる要素を指定するのが、カスケーディング・スタイルシート( Cascading Style Sheets )、あるいは単に「スタイルシート」と呼ばれるものです。 スタイルシートを使う一番の目的は文書の内容と、その表現（デザイン）を分離することにあります。 HTMLでは文書の構造だけをマークアップし、各ページに共通のスタイルシートでデザインを指定すれば、サイト全体のデザインを変更する場合でも、その変更は基本的にCSSファイルの変更だけで行えます。

tableタグからCSSによるレイアウトへの転換

文字の色やサイズをスタイルシートに任せるだけでなく、ページ全体の配置もCSSを使って行うことができます。 たとえば、下のようなページを作るとき、従来はHTMLのtableタグを使って内容を配置するのが一般的でした。しかし本来tableタグは表を作るための物であって、文章をレイアウトするために使うのは避けるべき、とされています。そこでレイアウトもCSSで行うようにすれば、必ずしもtableによる配置を必要としません。

divタグでブロック化

CSSによるレイアウトを使う１つの方法として、HTMLでマークアップする時、ページは「ヘッダ」、「コンテンツ」、「フッタ」からなると決めてしまい、さらにコンテンツはその内容よってに「メイン」と「サブ」に分けるなどのように、文章をdivタグでブロック化し、それらを識別できるようにid属性で名前を付けます。これによりページ全体の構成を明確にするとともにCSSの適用を意識したマークアップができます。

（この図はWeb Designingの記事中の物ではなく、こちらで説明用に作成したもの）

文章全体の構成がマークアップされていれば、 CSSではこの各idごとに配置を指定し、さらに各idに含まれるHTMLタグを狙い打ちするように、つまりCSSの適用範囲を各id内のタグに限定して、色やサイズなどのデザインを指定します。これによりHTMLのマークアップは比較的単純でも、「ヘッダ」や「コンテンツ」などのブロックごとに同じHTMLタグを別の表現にすることが容易になります。 一方、CSSファイルはセレクタ（CSSの適用範囲を指定する部分）が結構複雑になってしまいますが、その適用範囲が絞られていますから修正はそう難しくはありません。

id属性
HTMLタグには、headerタグとかmainタグのような物は用意されていません。divタグは『単にブロックであること』を示すHTMLタグで、これに属性としてid="header"とかid="footer"などを持たせることで、特定のブロックをCSSから識別できるようにするという考え方です。このheaderやfooterなどは属性値と呼ばれ任意のキーワードです、hajimeやmu-su-biなどでも差し支えありません。しかしながらユニークな属性値より、多くの方が使っているような「ありふれたキーワード」のほうがなにかと便利です。よくわからないかもしれませんが、 とりあえずid属性はCSSを適用する時の目印のような物と考えておいてください。

CSS Analysis 大藤幹
このような「divタグでブロック化」してstyleを適用する方法は、Web Designing 2004年8月号のCSS Analysisという大藤幹氏の連載記事を読むまで知りませんでした。この時「いままでの私のスタイルシートの使い方は何だったんだろう!？」というくらいにショックを受け、急遽Fab51のスタイルシートを全面的に見直しました。ところが、あとで調べてみると比較的一般的な手法だったようで、早めに調べておけば悩まずにすんだものを...と反省しました。

HTMLの記述は、単純で規則性のある物に

HTMLのマークアップは、単純な構造（文章の表現に関わるHTMLタグを省いた）にすることで、CSSの適用がし易くなります。逆に言うと、不規則な、あるいは複雑なHTMLマークアップが行われているページではCSSを効果的に適用することが難しくなります。 また、文法的に正しいHTMLマークアップであることも重要です、そうでないとスタイルシートの適用結果が予想できません。

現在HTMLに近い構造のXHTMLがBlogでも使われていますから、CSSがある程度わかればBlogの見栄えを変更することも、そう難しいことではありません。

CSSによるレイアウトはお勧めできない!？
CSSを使って配置をする方法はいくつかありますが、配置されるブロック内のHTMLタグに対するCSSの適用方法が適切でないと、表示が大きくくずれるなどの問題が起きたりします。また、CSSの適用方法が適切であってもブラウザによっては正しく表示されないこともあり、一筋縄ではいきません。 特にIE6以前ではCSSで多少小細工をしないと正しく表示されない部分ができたりします。たとえ自分がIE7以降を使っている場合でも、御覧になる方にIE6以前のブラウザを使っている方が含まれていれば表示確認は必要であり、さらにFireFoxなどのIE以外のブラウザでの表示も確認しないと、どんなふうに表示されるかわかりません。

従来のtableを使ったレイアウトなら多少の表示の差ですんでいたのに、CSSによるレイアウトにしたら、特定のブラウザで表示が大きく崩れるということもよくあります。このため現在tableレイアウトで組んでいるページを一気にCSSによるレイアウトに置き換えるのはお勧めできません。 とりあえずはtableによる配置を最小限になるようにHTMLの構造の改良を行うだけにして、その段階でCSSでどんな表現ができるのかを試すこと、そしてスタイルシートに慣れてから、CSSによる配置が可能かどうかを試してみるほうが良いと思います。

実はここでも「tableによる文字などの配置を最小限にしてある」という段階で、いまだtableレイアウトのページとCSSによるレイアウトのページが混在しています。現実には「tableによる左右2段組の配置」程度なら、CSSにレイアウトに置き換える場合でもHTMLファイルの変更自体は簡単ですから、 CSSレイアウトに急いで「表示が大きくくずれる」くらいならそのままのほうが良いわけです。しかし...方向性としてはサイト全体をCSSによるレイアウトに置き替えていこうと考えています。

• 履歴
• 全面改訂 2008/07/26 ページ分割
• 加筆 2008/04/04
• 改訂2008/03/22
• 改訂2006/02/06
• 改訂2006/01/25
• 改訂2006/01/08
• 公開：2005/11/10

次のページで実際のCSSサンプルを使って、CSSの働きを説明します。
（文章の量が増えたため、ページを2分割しました）続きはスタイルシート2へ