CSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。ただし、いきなり作例を示して、ハイおしまい、とはいたしません。私はこれまで、多くの方へのアドバイスの中で、CSSの活用案をいくつか作成してきました。この連載では、私が実際に遭遇した活きた課題に、みなさんにも取り組んでいただきます。
すぐに解答（もちろんこれは"ひとつの解答"に過ぎません）を読んでしまってもかまいませんが、ほんの数分でもご自分で考えをめぐらせると、よりいっそう楽しめるはずです。よろしくお付き合いいただければ幸いです。
CSSデザイン導入の勘所を解説します。
まずHTMLを妥当なものに修正し、続いてCSSにより元の文書と同等の表示結果の再現を目指します。最後に改善案をひとつ示しますので、ご参考まで。
息抜きに、興味深く小さな話題をとりあげます。
従来の、font 要素や br 要素、あるいは table 要素などを多用して HTML 文書を装飾する方法を採用した文書は、（特定の環境における）「表示結果」を基準に作成されます。それらのほとんどは、デザインの統制が取れていません。文書中で似た役割を果たす要素が、ばらばらの「表示結果」を与えられている場合がほとんどです。そうなる理由は、「自由度の高い道具を自律的に用いるのは困難だから」です。
正しく HTML を使い、CSS で装飾する手法は、ある意味で窮屈です。しかし、正しい HTML + CSS の制約には、意味があります。そして多くの場合、制約に従うことで HTML 文書のデザインは改善されます。
CSS により元の文書と同等の表示結果の再現を目指すとき、その窮屈さが障害となって立ちふさがります。あえて徹底的に再現にこだわるのは、CSS を勉強する手段としては面白いかもしれません。けれども場合によっては、原状の再現にとらわれず、最初から改善案の作成へと踏み出した方がよいかもしれません。課題No.03では、あえて現状の再現に取り組んで苦労しましたが、課題No.04では改善案のみ作成しました。
課題No.03は、一部だけ見れば再現に苦労しないものの、全体としてのデザインの不統一のために再現が困難な例でした。そこで、改善案では、部分のディテールは踏襲しつつも、統一感のあるデザインを目指しました。今回の課題No.05では、アクセシビリティの見地から再現すべきでないと考えられるデザインが登場します。しかしそのデザイン意図を安易に捨てることなく、できる限り汲み取っていく方向で改善案の作成に取り組みます。
私がこの課題に取り組んだのは2002年8月のことです。アドバイスの前後に数回、メールのやり取りがありました。本稿の原点は、そのやり取りの中にあります。
"表示結果"ではなく"文章の内容"に即したマークアップに修正します。そうすれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになります。しかしながら、これがなかなか骨の折れる作業です。次の手順をおさらいしましょう。
今回の課題は基本的に1段組のシンプルなレイアウトなので、上から順番にマークアップしていきましょう。
WHAT'S NEWの内容を示すのが
2002.08.25 diary 更新です。ここでは定義リストを用いました。
新しい街、新しい学校、新しい子どもたち。（後略）は、ひとまとまりの文章ですからp要素としました。
menuをh2要素、目次を順不同リストとし、div要素でまとめています。
文章自体に手を加えた箇所があります。
動作確認という言葉を削除しました。
解像度１０２４×７６８ピクセルを推奨といった記述も削除しました。
課題No.05は比較的、再現が容易です。各要素に、文字色、文字サイズ、揃え方向、背景、borderといった基本的なプロパティーを指定するだけでよいのです。唯一トリッキーなのが、大見出しの画像による置き換えです。CSSにテキストを画像で置換する方法は用意されていません。画像は背景に読み込むか、リストマークとして挿入する他ないのです。では、一体どうやっているのでしょう? 解答は coffee break にて。
その他、いくつかのポイントについてまとめておきましたので、さらっと読み流してみてください。
課題No.05は、解像度耐性のたいへん低いHTML文書です。正確にいえば、文字サイズの変更には強いけれども、表示領域の大きさにシビアなのです。
「文字サイズの変更に強い」とは、例えばWindows版IEで「表示→文字サイズ→最小・最大」としたとき、レイアウトが崩れず、文章も読みやすいことをいいます。「表示領域の大きさにシビア」とは、ごく限られた表示領域の設定以外では、レイアウトが崩れたり、文章が読みにくくなってしまうことをいいます。私は、この2項目をあわせて「解像度耐性」と称しています。
このFolioは横幅が650pxに指定されていますから、それ以上の表示領域を確保しなければ読みにくくて仕方ありません。ただし、文字サイズは可変で、大きくしても小さくしても問題はありません。表示領域の横幅を800px以上確保している方が大半であることを考えると、Folioの解像度耐性は、特別にひどいということはないでしょう。
再現案は、じつは教材よりは解像度耐性を高めてあります。改善案では、さらに解像度耐性を高めています。再現案が可読性を失わない最小の表示領域を基準として、教材、再現案、改善案の解像度耐性をチェックしてみましょう。（以下にキャプチャ画像へのリンクを示しますが、実際にブラウザで確認されることをお勧めします）
じつは、教材の背景画像の使い方に問題があります。白背景の中央に青背景のメイン領域を設定し、情報をその中に集めることで印象の強いデザインを実現しようという発想なのですが、なんとこの背景画像、解像度が1024×768の画面でブラウザを最大化した場合にのみ、効果を発揮するのです。
キャプチャ画像からわかる通り、あらかじめ余白込みで画像が作成されているため、特定の解像度以外では意図通りの表示になりません。背景画像を、製作者側が意図的に解像度にあわせて伸縮する方法は、CSSに用意されていないからです。キャプチャ画像では、表示領域が小さいために問題が生じていましたが、逆に表示領域が大きすぎる場合にも悲劇的な表示結果になることを付記しておきます。
再現案では、この問題に一定の解決策を適用しました。背景をbody要素の非推奨属性ではなく、CSSで指定したのです。CSSを用いれば、画面の真ん中に背景画像を配置することが可能です。背景の上に乗せるテキストも、真ん中に配置できます。いずれも真ん中に配置すれば、表示領域の大きさに関係なく、両者は真ん中に表示されますから、解像度耐性が大きく向上するわけです。
しかし、背景画像の大きさは表示領域の大きさに対応して変化することができません。背景画像は幅固定、高さ固定なのです。ですから、再現案のテキストレイアウトは、画像の大きさに合わせて幅を固定しています。そこで改善案では、背景画像を撤廃し、CSSで擬似的に再現することにしました。その結果、さらに解像度耐性を向上させることができました。
背景画像のデザイン効果は、次の3項目にまとめられます。
入れ子のメイン領域を作成するだけなら、ある意味、簡単なんです。div要素などで情報をまとめて、背景色を指定すれば足りるわけですから。入れ子を入れ子らしく表現するには、適当な margin を設定すればよいでしょう。また、コンパクトにまとまっているように見せるのも、同じ工夫で実現できます。
問題は、繊細で美しいグラデーションをうまく再現する手がないことです。それさえCSSで何とかできれば、高い解像度耐性を実現できるのですが……。
div#contents
{margin:5% 10% 0; padding:1em 1em 0; color:#ccc; background:#248; text-align:center; border:10px outset #ccf;}
これが私の解答です。ちょっと、苦しいですね。でも、これはこれで面白い感じじゃないかな、と思います。
2段組レイアウトの変化形です。カウンターや更新情報などを最上部の緑色の帯の中に収め、目次を左に、サイト名などを右に配置し、右下に配した花の画像で明るい印象を形成しています。
改善案としてのご紹介なのですが、じつはあまり解像度耐性がよくありません。少々のことでは全く読めなくなってしまうことはないのですけれども、レイアウト自体は割と簡単に崩れます。参考程度にご覧いただければと思います。
前回に引き続き、Bonus Track として。
本稿で使用している CSS は、単純素朴なデザインだけに、たいていの文書に（なんとなく）マッチしてしまうのです。ただ、これが改善案と呼ぶにふさわしいかというと、やはり疑問符がつきます。
ここでも目次は横1列に並べてみました。単語レベルの短い言葉を縦に並べると、いくぶん貧弱な印象がありますので……。
CSS には、テキストを画像で置き換える方法が用意されていません。しかし、置き換えたように見せかける手はあります。課題No.05再現案を例に、ご紹介しましょう。
<h1><span>Love. Jam. Life</span></h1>
span要素を使います（つまり邪道だということです）
h1
{color:#27408b; background:#fff url(title11.gif) no-repeat left top; width:558px; height:41px;}
画像の大きさに合わせて要素の縦横の長さを指定します。しかしこれだけでは、元の文字と画像が重なってしまいますね。ここで文字色を透明にできればよいのですが、最大のシェアを誇る IE6 が文字の透明色指定に対応していません。そこでspan要素の出番です。
h1 span
{display:none;}
これにて一件落着。
練習問題です。
よくあるレイアウトのサイトです。装飾画像をimg要素として導入したために、少々レイアウトが窮屈な感じになっています。テーブルレイアウトにより画像とメニューの2段組としていますが、画像の扱いを見直すことで1段組となることに注目したいと思います。
h1要素周辺が少々トリッキーな感じもしますが、全体としては、単純で素直なマークアップを心がけてみました。
決してこれが唯一無二の正解というわけではありませんが、私は画像を背景に読み込ませるというアプローチを採用しました。
CSS なしを選択して再現・改善案をご覧いただければ一目瞭然なのですが、画像を装飾に過ぎないとみなせば、課題No.06に1系統の情報の流れしかないことは明らかです。
線形に連なった情報をデザインするのは CSS の得意技です。CSS の記述を見ての通り、単純明快な指定だけで簡単に元のデザインを再現することができました。なお、ご紹介している例では、純粋な再現案に少々手を加えています。画像をリッチに使って、ちょっと贅沢な雰囲気を演出してみました。（成功しているかどうかは不明）
