- タイの文化を紹介するサイトにあったアルバム風の文書です。（現在はリニューアルされています）
- 1段組中央寄せ、非常にシンプルにまとまったレイアウトを採用しています。
- レイアウトはcenter要素とbr要素で整えられています。
- 配色はbody要素の各種属性（いずれもHTML4以降非推奨）とCSSで指定。
- 文字サイズはfont要素で小さめに指定。
CSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。ただし、いきなり作例を示して、ハイおしまい、とはいたしません。私はこれまで、多くの方へのアドバイスの中で、CSSの活用案をいくつか作成してきました。この連載では、実際にあった活きた課題に、みなさんにも取り組んでいただきます。
すぐに解答（もちろんこれは"ひとつの解答"に過ぎません）を読んでしまってもかまいませんが、ほんの数分でもご自分で考えをめぐらせると、よりいっそう楽しめるはずです。よろしくお付き合いいただければ幸いです。
CSSデザイン導入の勘所を解説します。
まずHTMLを妥当なものに修正し、続いてCSSにより元の文書と同等の表示結果の再現を目指します。最後に改善案をひとつ示しますので、ご参考まで。
息抜きに、興味深く小さな話題をとりあげます。
従来、個人サイトのリニューアルは、
という手順を経ていました。このようなやり方は、お勧めできません。それは、なぜでしょうか?
HTMLはテキストの内容をコンピュータにも理解できる形で分類整理するためのマークアップ言語です。
<title>"いろは"の先のCSS 第1回 補足</title>
上記の例では、「"いろは"の先のCSS 第1回 補足」というテキストをtitle要素としてマークアップすることで、それが文書の題名だということを明らかにしています。
本来、内容を精査しなければ、ある文字列がどのような意味を持っているかわかりません。HTMLが先にあって、そこに後からテキストを流し込むのは不自然な手順です。この倒錯が、後の手間の原因となります。例えば、テーブルで2段組みのレイアウトを（擬似的に）実現し、そこにテキストを流し込んだとしましょう。この文書をリニューアルして3段組にするためには、マークアップを修正しなければなりません。10文書程度ならともかく、100〜1000もの文書を修正するとなったらたいへんですね。
結果を先に考えるのは、一見、先の見通しがよいように思われます。ところが、実際には後々困ったことになる発想なのです。「まず結果ありき」ではなく、この文章にふさわしい結果は何か、と考えるべきなのです。文章自体を修正しようとすると、リニューアルは終わりなき戦いとなります。HTMLの修正は、相当の手間になります。表示結果だけの修正なら……案外、楽なんです。（追々説明していきます）
修正の簡単なモノを基準にして、修正困難なモノを決めてしまうのはバカバカしいですね。
まずは肩慣らし。
"表示結果"ではなく"文章の内容"に即したマークアップに修正します。そうすれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになります。
文法違反も散見されますが、単にその点を修正すればよいという状態ではありません。根本的に書き直す必要があります。br要素は改行という意味しか持ちません。IEなどの表示において、改行した結果が段落やリストのように見えたとしても、それは決して段落ではないし、リストでもありません。改行は改行なのです。教材を見ますと、center要素、font要素、br要素があります。しかしこれだけでは中央寄せとフォントの設定と改行の指定にしかなりません。マークアップがひとつの表示結果に奉仕しており、汎用性がありません。（例えばGoogleなどの検索エンジンは、要素の内容によって重み付けを行いますが、教材の文書には視覚系WWWブラウザ以外には意味のない要素しかありませんから、どのフレーズも同じ重みにしかなりません）
ポイントはただひとつ、文章の内容に即したマークアップに徹すること。主な修正点を列挙します。
以上の修正により、この文書が見出し、写真とその説明からなる定義リスト、関連文書のリストという大きく3つの要素からなることが明示されました。
まず、私の解答を紹介しましょう。
これは非常に簡単な課題です。全ての要素を画面の真中に寄せて表示するだけでよいのです。したがって、初級者の方でも難なくクリアできたことでしょう。しかし、入門レベルの方には難しかったのではないでしょうか。
ポイントは、ブラウザのデフォルトスタイルに頼らないことです。
今回、HTMLの修正において定義リストと順不同リストを採用しました。これが曲者です。IEなど主な視覚系WWWブラウザでは、dd要素とli要素の左側にインデント【字下げ】をつけます。ですから、CSSで単純にtext-align:center;としても、文字が真中に揃いません。左インデントのために、dd要素とli要素が右にずれてしまうのです。そこで、余計な左インデントを消さねばなりません。
問題は、ブラウザによって左インデントの実現方法がまちまちだということです。IE6ではli要素に左margin【外側余白】が設定されています。だからCSSでli要素の左marginを0にすれば、IE6ではli要素の左インデントが消えます。ところがMozillaではul要素の左padding【内側余白】で左インデントを行っている（デフォルト設定の場合）ので、li要素の左marginは最初から0です。Mozillaでli要素の左インデントを消すには、ul要素の左paddingを0にしなければなりません。
……しかし、このような考え方は馬鹿げています。"li要素の（視覚系WWWブラウザにおける）デフォルトスタイルは左インデント有り"は業界の標準となりましたが、その実現方法はブラウザ製作者に任されています。IEの次期バージョンではul要素の左paddingとli要素の左marginを併用するかもしれません。あるいはli要素のpaddingを使うかもしれないのです。ブラウザは世の中にたくさんあります。同じブラウザにもバージョン違いがいくつもあります。特定のブラウザのデフォルトスタイルに頼ったCSSではダメなのです。
CSSを使った場合、しばしば問題となるのがIEではちゃんと見えているのにNNではヘンな表示になってしまうこと（またはその逆）です。しかしそれらはほとんどの場合、IEやNNのバグではなく、CSSの書き方のまずさに由来しています。IEのデフォルトスタイルに依存したCSSを書けば、異なるデフォルトスタイルを持つNNで困ったことになるのは当然なのです。IEとNNのデフォルトスタイルは、結果としての見た目は似通っています。しかし、それに騙されてはいけません。
*
{font:normal normal normal 100%/1.5em osaka,"ＭＳ Ｐゴシック",sans-serif;
margin:0;
padding:0;}
中途半端といえばその通りなのですが、私はCSSの冒頭に上記のような記述を入れて簡便に対処する手をよく使います。フォントと余白関連のデフォルトスタイルを殺すわけです。（*は"全要素"を意味するセレクタ）
もちろん、デフォルトスタイルを殺してしまったら自分ですべての指定をしなければならないのですが……一度やってみると、案外、たいした作業量になりません。文書に登場した要素のスタイルだけ指定すればよいからです。私の解答では以下の通りです。
*
{color:#000; background:#fff;
padding:0; margin:0; text-align:center;}
dd
{padding:1em 0; font-size:90%;}
li
{list-style:none outside;}
a,a:link,a:visited,a:hover,a:active,img
{color:#000; border-color:#000;}
ところで、この解答ではフォントの大きさやスタイルは何も指定せず、ブラウザのデフォルトスタイルに頼っています。これは矛盾ではありません。……よくわからない?
つまり、こういうことです。教材では、中寄せのためにcenter要素を用いています。しかしそれゆえに、中寄せ以外の見た目にはしようがないし、その部分が本来どのような意味のある要素なのかわかりません。そこで修正案では、定義リストなどを用いてマークアップをやり直しました。しかし見た目は教材と同じにしたいわけです。各ブラウザは定義リストはこう表示する、といったデフォルトスタイルをもっています。よって製作者がCSSで中寄せだけを指定すると、デフォルトスタイルと一緒に適用されてうまくない表示結果になります。そこで、デフォルトスタイルを殺し、中寄せだけを適用する必要があります。
一方、教材で何も指定されていなかった項目についてはどうでしょう。これらはもともとデフォルトスタイルでの表示が期待されているわけです。そのデフォルトスタイルはブラウザによって異なりますから、教材の表示結果を再現するためには、無指定を踏襲しなければなりません。
単純明快な内容の文書ですが、凝ったスタイルを採用することも可能です。しかし今回は、元のレイアウトをそのままに、マイナーチェンジに努めた例をご紹介します。それでもCSSの記述は再現版の2倍以上になってしまいました。
元のデザインにはシンプルな美しさがありますが、単純素朴に過ぎる、という印象もあります。そこで、全体のレイアウトはそのままに、各要素の表現を派手にしてみました。元のデザインに致命的な欠点があったわけではないだけに、改善案が本当に元のデザインよりよいものなのかは微妙な感じはします。しかし、以下簡単に説明を付します。
テキスト枠に余裕を!
おまけ。この文書をfolioのスタイルにあわせて整形せよ、という課題。
表示結果はご覧の通りです。お粗末さまでした。
