"いろは"の先のCSS 第1回

徳保隆夫 2003.08.21

はじめに

CSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。ただし、いきなり作例を示して、ハイおしまい、とはいたしません。私はこれまで、多くの方へのアドバイスの中で、CSSの活用案をいくつか作成してきました。この連載では、実際にあった活きた課題に、みなさんにも取り組んでいただきます。

すぐに解答(もちろんこれは"ひとつの解答"に過ぎません)を読んでしまってもかまいませんが、ほんの数分でもご自分で考えをめぐらせると、よりいっそう楽しめるはずです。よろしくお付き合いいただければ幸いです。

本講座の構成

  1. 教材の紹介
  2. HTMLの修正
  3. CSSによる表示結果の再現
  4. CSSによる改善案の作成

まずHTMLを妥当なものに修正し、続いてCSSにより元の文書と同等の表示結果の再現を目指します。最後に改善案をひとつ示しますので、ご参考まで。

前提知識
HTMLとCSSの"いろは"
想定する閲覧環境
代替CSSを利用できる視覚系WWWブラウザ(Windows版IE6+JavaSript/NN7/Opera7/etc)

課題 No.01

まずは肩慣らし。

教材の紹介

課題 No.01(別ウィンドウに開くと便利です)
課題 No.01 キャプチャ画像

HTMLの修正

"表示結果"ではなく"文章の内容"に即したマークアップに修正します。そうすれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになります。

文法違反も散見されますが、単にその点を修正すればよいという状態ではありません。根本的に書き直す必要があります。br要素は改行という意味しか持ちません。IEなどの表示において、改行した結果が段落やリストのように見えたとしても、それは決して段落ではないし、リストでもありません。改行は改行なのです。教材を見ますと、center要素、font要素、br要素があります。しかしこれだけでは中央寄せとフォントの設定と改行の指定にしかなりません。マークアップがひとつの表示結果に奉仕しており、汎用性がありません。(例えばGoogleなどの検索エンジンは、要素の内容によって重み付けを行いますが、教材の文書には視覚系WWWブラウザ以外には意味のない要素しかありませんから、どのフレーズも同じ重みにしかなりません)

ひとつの解答

ポイントはただひとつ、文章の内容に即したマークアップに徹すること。主な修正点を列挙します。

以上の修正により、この文書が見出し、写真とその説明からなる定義リスト、関連文書のリストという大きく3つの要素からなることが明示されました。

CSSによる表示結果の再現

まず、私の解答を紹介しましょう。

課題 No.01 再現案(別ウィンドウに開くと便利です)
課題 No.01 解答 キャプチャ画像

これは非常に簡単な課題です。全ての要素を画面の真中に寄せて表示するだけでよいのです。したがって、初級者の方でも難なくクリアできたことでしょう。しかし、入門レベルの方には難しかったのではないでしょうか。

ポイントは、ブラウザのデフォルトスタイルに頼らないことです。

今回、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,"MS Pゴシック",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による改善案の作成

単純明快な内容の文書ですが、凝ったスタイルを採用することも可能です。しかし今回は、元のレイアウトをそのままに、マイナーチェンジに努めた例をご紹介します。それでもCSSの記述は再現版の2倍以上になってしまいました。

課題 No.01 改善案(別ウィンドウに開くと便利です)
課題 No.01 改善案 キャプチャ画像
plusというタイトルの代替CSS(→plus.txt)を適用してください。

元のデザインにはシンプルな美しさがありますが、単純素朴に過ぎる、という印象もあります。そこで、全体のレイアウトはそのままに、各要素の表現を派手にしてみました。元のデザインに致命的な欠点があったわけではないだけに、改善案が本当に元のデザインよりよいものなのかは微妙な感じはします。しかし、以下簡単に説明を付します。

  1. 改善案では、紫味の強い青をテーマカラーとしました。配色に困ったら青を使えばよい、というのは有名な話です。今回はちょっとした挑戦の気分で紫味を加えました。これをバランスが悪いと感じる方は、紫ではなく青の方へ色を近づけましょう。たいてい、青へ逃げ込めばなんとかなります。(素人の配色:第1原則)
  2. ところで、画面が落ち着く配色といえば、なんといっても白黒のモノトーンです。さまざまな色を使う場合にもこの原則は生きていますから、困ったときは思い出すとよいでしょう。画面に持ち込んだ色がどうしようもなく違和感を発散することがあります。あきらめてその色を捨ててしまうのも一手ですが、できれば殺したくありませんよね。そんなときは、色を無彩色(白・灰・黒)へ近づけましょう。困ったときの無彩色頼みです。(素人の配色:第2原則)
  3. 鮮やかな色を取り合わせるのは至難の業です。基本的にはグレーに近い配色を検討した方が、悩みは少なくなります。同様に、暗色中心の配色は難しいので注意しましょう。配色のセンスに自信がつくまでは、明色中心の配色を検討するのが無難でしょう。(素人の配色:第3原則)
  4. ……私が書いているのはいずれも単なる経験則ですが、デザイン入門の類によく載っている内容ですから、参考にしてください
  5. というわけで、改善案では青系の配色を採用し、暗色は要所を引き締める程度に活用してみました。定義リストの背景は灰色に近い色、見出しとナビゲーション(この例では事実上のフッター)の背景は黒に近い色を採用しています。
  6. レイアウトについても少々。縦長の要素だけでは安定感がありません。縦のラインとともに、文書の上下だけで結構なので、横のラインを強調する要素がほしいところです。都合よく、ヘッダーとフッターの役割を果たす要素がありましたので、これに背景色を与えて目立つ帯状のラインを引くことができました。
  7. 今回、横のラインに強い色を使いましたので、縦のラインも少し強調したほうがバランスがよさそうです。そこで、縦のラインにも背景色を与えることにしました。
  8. レイアウト、といってもこの改善案では背景色を適当に使っているだけで、実質的には再現案を何ら変わりません。それでも、パッと見の雰囲気はかなり違ってくるわけです。こうして背景を駆使して画面を構成していくのがCSSによるデザインの特徴です。いろいろ試して、その感覚をつかんでいってください。
  9. 余談ですが、見出しなどの背景に用いている画像は、写真7を加工したものです。気付きましたか?

coffee break

テキスト枠に余裕を!

小さな余白が大きな開放感を演出する

課題 No.02

おまけ。この文書をfolioのスタイルにあわせて整形せよ、という課題。

folioのスタイル(概要)

ひとつの解答

表示結果はご覧の通りです。お粗末さまでした。

余談

テーマに沿った雑文を少し。

58年前の8月15日、母方の祖父は満州でソ連軍の支配地域で奮闘を続けていた。帝国陸軍の精鋭が集まっていたはずの関東軍は物量に勝るソ連軍にまったく歯がたたず、敗走に敗走を重ねた。祖父らの部隊は、既に組織の体をなしていなかった。撤退する本隊から離れた陣地にいたため、前線に置き去りにされたのだった。敵軍の目を逃れて山林に逃げ込んだ頃には、周辺一帯はソ連軍の支配地域となっていた。生き残りを賭けた散発的なゲリラ戦を展開しながら、祖父は絶望的な日々を過ごした。

その後のことはよくわからない。祖父は当時のことを詳しく語らずに亡くなった。ただ、祖父が日本の敗戦を知ったのは8月の末日頃だったという。それは投降した後のことなのか、それとも、終戦を知って投降したのか。

そうして、祖父にとって人生最悪の3年間が始まった。軍で薬学を学んでいた祖父は、厳寒のシベリアで大勢の仲間を看取ることになる。

大正時代のいつ頃だったか、祖父は怒ったような顔をして生まれてきた。そして終世、しかめ面であり続けた。素封家の次男坊だった祖父は、物心つく頃に養子へ出された。子どもができずに跡取に困った親戚筋の家だった。ただ、数百メートルしか家が離れていなかったから、祖父はしょっちゅう実家へと顔を出した。曾祖母のユウジ(昔の女性名はよくわかりませんね)は、祖父を溺愛していたという。

私が小学生の頃、毎年夏休みは、父方か母方の実家で過ごしたものだった。母が父を家において愛知県へと帰ってしまうのである。父の実家は葡萄畑をやっていて、夏場は猫の手も借りたい忙しさなのだった。そして母は、無給人足を黙々と勤めていた。ただしお盆の時期だけは、寝泊りするのは母の実家と決まっていた。

ユウジ曾祖母は、私が小学校へあがる頃まで元気に生きていた。毎年お盆になると、祖父は畑の片隅にある地蔵堂の灯篭に明かりを点し、ユウジ曾祖母の長寿を祝った。家内の祭りだが、幟なども立てるのだった。長男ではなく養子に出された祖父が主催を務めていたのは、一体どういうわけか、私にはよくわからない。夜になると、ふすまを取り払った大きな座敷に親戚一同が集まる。しかめ面をくしゃくしゃにして、祖父は酒をついで回った。そして注いだ酒の2倍を飲んで、赤ら顔でよく笑った。祖父は酒に強かった。

8月半ばの昼間、祭の前の余興で子どもたちが太鼓を叩くのが恒例行事となっていた。

テンツクテンツク、テンテンテンツク、ドーン、ドーン

ただそれだけの拍子を、ひたすらに繰り返す。私と、弟と、いとこが代わる代わるに叩く。観客はいない。うるさく鳴くセミと競うばかりだ。あの頃の夏は暑かった。みな疲れ果てた頃、母が家から出てきて、私たちを呼ぶ。「スイカを切ったわよ〜! 冷えているうちにお食べなさい」

祖父が育てた果肉の黄色いスイカ。その味を、私は憶えていない。