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

徳保隆夫 2003.08.21

はじめに

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

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

本講座の構成

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

望ましいリニューアル方針

まず文章ありき
リニューアルは必ずテキストの整理からはじめます。
HTMLからCSSへ
まず文章をHTMLを適切に用いてマークアップし、続いてCSSによる装飾を行います。
大から小へ
全体のレイアウトを決め、続いて細かい部分を整えます。

従来の手順ではなぜダメなのか

従来、個人サイトのリニューアルは、

  1. 完成形を先に想定する
  2. 完成形を実現しうるCSSの記述、またはテーブルの組み方を検討する
  3. 出来上がったデザインの中にテキストを流し込む

という手順を経ていました。このようなやり方は、お勧めできません。それは、なぜでしょうか?

コトの軽重を間違えてはいけない

HTMLはテキストの内容をコンピュータにも理解できる形で分類整理するためのマークアップ言語です。

<title>"いろは"の先のCSS 第1回 補足</title>

上記の例では、「"いろは"の先のCSS 第1回 補足」というテキストをtitle要素としてマークアップすることで、それが文書の題名だということを明らかにしています。

本来、内容を精査しなければ、ある文字列がどのような意味を持っているかわかりません。HTMLが先にあって、そこに後からテキストを流し込むのは不自然な手順です。この倒錯が、後の手間の原因となります。例えば、テーブルで2段組みのレイアウトを(擬似的に)実現し、そこにテキストを流し込んだとしましょう。この文書をリニューアルして3段組にするためには、マークアップを修正しなければなりません。10文書程度ならともかく、100〜1000もの文書を修正するとなったらたいへんですね。

結果を先に考えるのは、一見、先の見通しがよいように思われます。ところが、実際には後々困ったことになる発想なのです。「まず結果ありき」ではなく、この文章にふさわしい結果は何か、と考えるべきなのです。文章自体を修正しようとすると、リニューアルは終わりなき戦いとなります。HTMLの修正は、相当の手間になります。表示結果だけの修正なら……案外、楽なんです。(追々説明していきます)

修正の簡単なモノを基準にして、修正困難なモノを決めてしまうのはバカバカしいですね。

課題 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のスタイル(概要)

ひとつの解答

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