2003.08.21はじめにCSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。作例を示して、ハイおしまい、とはいたしません。私はこれまで、多くの方へのアドバイスの中で、CSSの活用案をいくつか作成してきました。この連載では、実際にあった活きた課題に、みなさんにも取り組んでいただきます。解答(もちろんこれは"ひとつの解答"に過ぎません)を読んでしまってもかまいませんが、ほんの数分でもご自分で考えをめぐらせると、よりいっそう楽しめるはずです。お付き合いいただければ幸いです。教材の紹介HTMLの修正CSSによる表示結果の再現CSSによる改善案の作成まずHTMLを妥当なものに修正し、続いてCSSにより元の文書と同等の表示結果の再現を目指します。最後に改善案をひとつ示しますので、ご参考まで。No.01まずは肩慣らし。No.01(別ウィンドウに開くと便利です)タイの文化を紹介するサイトにあったアルバム風の文書です。(現在はリニューアルされています)1段組中央寄せ、非常にシンプルにまとまったレイアウトを採用しています。レイアウトはcenter要素とbr要素で整えられています。配色はbody要素の各種属性(いずれもHTML4以降非推奨)とCSSで指定。文字サイズはfont要素で小さめに指定。HTMLの修正"表示結果"ではなく"文章の内容"に即したマークアップに修正します。すれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになります。教材:album4.txt文法違反も散見されますが、単にその点を修正すればよいという状態ではありません。根本的に書き直す必要があります。br要素は改行という意味しか持ちません。IEなどの表示において、改行した結果が段落やリストのように見えたとしても、それは決して段落ではないし、リストでもありません。教材を見ますと、center要素、font要素、br要素があります。これだけでは中央寄せとフォントの設定と改行の指定にしかなりません。マークアップがひとつの表示結果に奉仕しており、汎用性がありません。修正案:index.txtポイントはただひとつ、文章の内容に即したマークアップに徹すること。主な修正点を列挙します。今回はHTML4.01Strictとした。h1要素【見出しレベル1】を挿入。phonlamaay"とした。写真とその説明をdl要素【定義リスト】とした。)写真の内容はテキストで説明されるので、写真のalt属性【代替文字】は"写真1"、"写真2"......とした。AlbumとHomeへのリンクはul要素【順不同リスト】とした。以上の修正により、この文書が見出し、写真とその説明からなる定義リスト、関連文書のリストという大きく3つの要素からなることが明示されました。CSSによる表示結果の再現まず、私の解答を紹介しましょう。再現案(別ウィンドウに開くと便利です)JavaScriptの実行が許可されたWindows版IE6では、画面右上にCSSを選択するセレクトボックスが出現します。セレクトボックスでbasicを選択すれば再現案、plusを選択すれば改善案のCSSが適用されます。NNやMozillaなどGecko系ブラウザでは、JavaScriptの実行が不許可の場合にも"表示→スタイル"からCSSを選択できます。Operaにおいても製作者の用意した代替スタイルを利用できます。詳細はOperaのマニュアルをご覧下さい。これは非常に簡単な課題です。全ての要素を画面の真中に寄せて表示するだけでよいのです。したがって、初級者の方でも難なくクリアできたことでしょう。入門レベルの方には難しかったのではないでしょうか。ポイントは、ブラウザのデフォルトスタイルに頼らないことです。今回、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のデフォルトスタイルは、結果としての見た目は似通っています。それに騙されてはいけません。padding:0;}中途半端といえばその通りなのですが、私はCSSの冒頭に上記のような記述を入れて簡便に対処する手をよく使います。フォントと余白関連のデフォルトスタイルを殺すわけです。(*は"全要素"を意味するセレクタ)もちろん、デフォルトスタイルを殺してしまったら自分ですべての指定をしなければならないのですが......一度やってみると、案外、たいした作業量になりません。文書に登場した要素のスタイルだけ指定すればよいからです。私の解答では以下の通りです。border-color:#000;}ところで、この解答ではフォントの大きさやスタイルは何も指定せず、ブラウザのデフォルトスタイルに頼っています。これは矛盾ではありません。......よくわからない?つまり、こういうことです。教材では、中寄せのためにcenter要素を用いています。それゆえに、中寄せ以外の見た目にはしようがないし、その部分が本来どのような意味のある要素なのかわかりません。そこで修正案では、定義リストなどを用いてマークアップをやり直しました。見た目は教材と同じにしたいわけです。各ブラウザは定義リストはこう表示する、といったデフォルトスタイルをもっています。よって製作者がCSSで中寄せだけを指定すると、デフォルトスタイルと一緒に適用されてうまくない表示結果になります。そこで、デフォルトスタイルを殺し、中寄せだけを適用する必要があります。教材で何も指定されていなかった項目についてはどうでしょう。これらはもともとデフォルトスタイルでの表示が期待されているわけです。そのデフォルトスタイルはブラウザによって異なりますから、教材の表示結果を再現するためには、無指定を踏襲しなければなりません。単純明快な内容の文書ですが、凝ったスタイルを採用することも可能です。今回は、元のレイアウトをそのままに、マイナーチェンジに努めた例をご紹介します。それでもCSSの記述は再現版の2倍以上になってしまいました。改善案(別ウィンドウに開くと便利です)plusというタイトルの代替CSS(→plus.txt)を適用してください。元のデザインにはシンプルな美しさがありますが、単純素朴に過ぎる、という印象もあります。そこで、全体のレイアウトはそのままに、各要素の表現を派手にしてみました。元のデザインに致命的な欠点があったわけではないだけに、改善案が本当に元のデザインよりよいものなのかは微妙な感じはします。以下簡単に説明を付します。改善案では、紫味の強い青をテーマカラーとしました。配色に困ったら青を使えばよい、というのは有名な話です。今回はちょっとした挑戦の気分で紫味を加えました。これをバランスが悪いと感じる方は、紫ではなく青の方へ色を近づけましょう。青へ逃げ込めばなんとかなります。(素人の配色:第1原則)ところで、画面が落ち着く配色といえば、なんといっても白黒のモノトーンです。さまざまな色を使う場合にもこの原則は生きていますから、困ったときは思い出すとよいでしょう。画面に持ち込んだ色がどうしようもなく違和感を発散することがあります。あきらめてその色を捨ててしまうのも一手ですが、できれば殺したくありませんよね。そんなときは、色を無彩色(白・灰・黒)へ近づけましょう。困ったときの無彩色頼みです。(素人の配色:第2原則)鮮やかな色を取り合わせるのは至難の業です。基本的にはグレーに近い配色を検討した方が、悩みは少なくなります。同様に、暗色中心の配色は難しいので注意しましょう。配色のセンスに自信がつくまでは、明色中心の配色を検討するのが無難でしょう。(素人の配色:第3原則)......私が書いているのはいずれも単なる経験則ですが、デザイン入門の類によく載っている内容ですから、参考にしてくださいというわけで、改善案では青系の配色を採用し、暗色は要所を引き締める程度に活用してみました。定義リストの背景は灰色に近い色、見出しとナビゲーション(この例では事実上のフッター)の背景は黒に近い色を採用しています。レイアウトについても少々。縦長の要素だけでは安定感がありません。縦のラインとともに、文書の上下だけで結構なので、横のラインを強調する要素がほしいところです。都合よく、ヘッダーとフッターの役割を果たす要素がありましたので、これに背景色を与えて目立つ帯状のラインを引くことができました。今回、横のラインに強い色を使いましたので、縦のラインも少し強調したほうがバランスがよさそうです。そこで、縦のラインにも背景色を与えることにしました。レイアウト、といってもこの改善案では背景色を適当に使っているだけで、実質的には再現案を何ら変わりません。それでも、パッと見の雰囲気はかなり違ってくるわけです。して背景を駆使して画面を構成していくのがCSSによるデザインの特徴です。試して、その感覚をつかんでいってください。余談ですが、見出しなどの背景に用いている画像は、写真7を加工したものです。この文書をfolioのスタイルにあわせて整形せよ、という課題。げありリスト→不明フッター画像が全文書共通ひとつの解答0308folio.txt(本稿のCSS)表示結果はご覧の通りです。余談テーマに沿った雑文を少し。58年前の8月15日、母方の祖父は満州でソ連軍の支配地域で奮闘を続けていた。帝国陸軍の精鋭が集まっていたはずの関東軍は物量に勝るソ連軍にまったく歯がたたず、敗走に敗走を重ねた。祖父らの部隊は、既に組織の体をなしていなかった。撤退する本隊から離れた陣地にいたため、前線に置き去りにされたのだった。敵軍の目を逃れて山林に逃げ込んだ頃には、周辺一帯はソ連軍の支配地域となっていた。生き残りを賭けた散発的なゲリラ戦を展開しながら、祖父は絶望的な日々を過ごした。その後のことはよくわからない。祖父は当時のことを詳しく語らずに亡くなった。祖父が日本の敗戦を知ったのは8月の末日頃だったという。それは投降した後のことなのか、それとも、終戦を知って投降したのか。して、祖父にとって人生最悪の3年間が始まった。軍で薬学を学んでいた祖父は、厳寒のシベリアで大勢の仲間を看取ることになる。大正時代のいつ頃だったか、祖父は怒ったような顔をして生まれてきた。終世、しかめ面であり続けた。素封家の次男坊だった祖父は、物心つく頃に養子へ出された。子どもができずに跡取に困った親戚筋の家だった。数百メートルしか家が離れていなかったから、祖父はしょっちゅう実家へと顔を出した。曾祖母のユウジ(昔の女性名はよくわかりませんね)は、祖父を溺愛していたという。私が小学生の頃、毎年夏休みは、父方か母方の実家で過ごしたものだった。母が父を家において愛知県へと帰ってしまうのである。父の実家は葡萄畑をやっていて、夏場は猫の手も借りたい忙しさなのだった。母は、無給人足を黙々と勤めていた。お盆の時期だけは、寝泊りするのは母の実家と決まっていた。ユウジ曾祖母は、私が小学校へあがる頃まで元気に生きていた。毎年お盆になると、祖父は畑の片隅にある地蔵堂の灯篭に明かりを点し、ユウジ曾祖母の長寿を祝った。家内の祭りだが、幟なども立てるのだった。長男ではなく養子に出された祖父が主催を務めていたのは、一体どういうわけか、私にはよくわからない。夜になると、ふすまを取り払った大きな座敷に親戚一同が集まる。しかめ面をくしゃくしゃにして、祖父は酒をついで回った。注いだ酒の2倍を飲んで、赤ら顔でよく笑った。8月半ばの昼間、祭の前の余興で子どもたちが太鼓を叩くのが恒例行事となっていた。テンツクテンツク、テンテンテンツク、ドーン、ドーンただそれだけの拍子を、ひたすらに繰り返す。私と、弟と、いとこが代わる代わるに叩く。うるさく鳴くセミと競うばかりだ。あの頃の夏は暑かった。みな疲れ果てた頃、母が家から出てきて、私たちを呼ぶ。祖父が育てた果肉の黄色いスイカ。その味を、私は憶えていない。