2004.1.20はじめにCSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。第3回までは講義に重点を置き、作例はひとつの実践例としてアッサリ取り扱ってきました。今後数回は実践篇となります。個別具体例の紹介に重点を置き、ていねいに私の試行錯誤の過程をご紹介します。お付き合いいただければ幸いです。代替CSSを利用できる視覚系WWWブラウザ(Windows版IE6+JavaSript/NN7/Opera7/etc)著作権について筆者は本稿(本文)の著作権を主張いたしません。解説の中で、筆者の著作物でないサンプルをご紹介しますが、いずれも必然性があって引用するものです。たしかに、一般論としてのテーブルレイアウトからの移行を解説するために、各サンプルが選ばれたこと自体には必然性がありません。一般論を語る際にも(絶対にその例でなければならないという必然性のない)具体例を持ち出すことは慣例的に認められています。著作権法第32条に示される引用の要件を満たす必要はあるでしょう。筆者はこのような考えに基づき、各著作者に断りなく批評の意図を持って各サンプルを例示しております。引用のみならず改変まで行っている点については、「彼の書いた「Aである」という文章は「Aです」と書くべきであった」といった批評が一般に問題ないものとして通用している事実をもって、説明に代えさせていただきます。個人ニュースサイトをCSSでリニューアルする実践篇初回のテーマとして、個人ニュースサイトをとりあげます。このジャンルの著名なサイトとして、今回はカトゆー家断絶をCSSを用いてリニューアルしていきます。長丁場の解説になりますが、よろしくお付き合いいただければ幸いです。同等)マークアップの修正2004年1月19日夜の表紙を原本とします。あまりに長大な文書なので、一部の内容を切り詰めさせていただきました。原本のHTMLソース作業開始まず、原本からテキストを抽出します。抽出されたテキストここから、作業を始めましょう。2つのレベルマークアップの修正には、2つのレベルがあります。文書全体の構成を再考する各部分を適切にマークアップするこの順番はどちらでもよいのですが、私は全体の構成を先に考えることをお勧めします。慣れないうちは、順番を逆にすると手戻りが発生しやすいからです。問題となりやすいのは見出しレベルです。まとめこの例では、内容から素直に構成を整理しています。一般のWebサイト作成においては、そう明快にこれが正解と決められるものではありません。好みの問題で情報を提示する順番を決めてしまうとしてもです。具体的には、例えばナビゲーションを本文の前におくか、後におくか、といったことが問題となります。どちらがいいのかは、判断が難しいところです。視覚系ブラウザにおいては、表示結果はCSSでどうとでもなるだけに、悩ましいですね。した構成に関する決定事項は多くの文書に波及することが多いわけです。各構成要素のマークアップを終えた段階で迷い出すと、何度も多くの文書をマークアップし直すことになりかねません。文書全体の構成を再考するさて、今回はまず、CSSで元のレイアウトを再現することを狙います。そこで基本的に、元の表示結果通りの順番で上からマークアップしていくことにします。大きく4つに分けるカトゆー家断絶のレイアウトは、大きく4つの部分に分けて考えることができます。この4つのブロックの順番が果たして適切なのかということは、今回、疑わないものとします。(CSSで表示結果を再現するのが困難になるため)じつは、これとはまったく異なる分け方も考えられます。カトゆー家断絶は、変形の3段組レイアウトを採用していますから、「3段組が上下に二つ重なっているとみて、まず大きく上下2つに分け、それぞれを左、真ん中、右の3つに分ける」というのもアリです。小項目の順番を考えるHTMLは、ソースを見れば明らかなように、いくつかの内容を並列に記録できる形式ではありません。結果としての見た目はともかく、マークアップの段階では情報の登場順は一意に定まっています。正しくHTMLを用いようと志したならば、文書を構成する要素の登場順序を考えないわけにはいきません。本来であれば結果としての見た目など気にせず、純粋に内容だけを考えて順番を決めてしまえばよいわけです。割り切ることもできないのが現実でしょう。そこで、何をどこまでこだわるのかが重要になります。要素を横に並べる場合(いわゆる多段組レイアウトの場合)、CSSで登場順序と異なる表示結果にしやすい今回、大きな4つの構成要素の登場順序は、再現したい表示結果を考えて、手をつけないことにしました。大きな構成要素の中にある小項目の登場順序については、再考の余地があるでしょう。左上に表示されるものが、ソース上でも最初に登場しなければいけない、ということはありません。小項目は、内容から考えて登場順序を考えていくことにいたします。実践例4つの大きな構成要素をそれぞれdiv要素とし、適当なid属性を与えました。1.タイトルが最初にくるべきではないか。「タイトル→サイト情報→募金バナー」の順に修正し、表示結果はCSSの工夫で再現することにします。募金バナー</div>2.絵が最初に来るのが、情報の流れから考えて適切なように思われます。順に修正し、表示結果はCSSの工夫で再現することにします。近況(募金バナー含む)・更新履歴・検索</div>3.諸注意しかないので、これはそのままです。id="caution">諸注意</div>4.リンクよりニュース記事を楽しみになさっている方が多いはずです。「ニュース記事→リンク柱(個人ニュースサイト)→リンク柱(その他)」の順に修正し、表示結果はCSSの工夫で再現することにします。id="contents">ニュース記事リンク柱(個人ニュースサイト)リンク柱(その他)</div>HTML文書に仕立てるマークアップ言語には、HTML4.01Transitionalを利用することにします。文書型宣言などを添えて、とりあえず以下のような文書が出来上がりました。見出しをh1要素、サイト情報をul要素としました。サイト情報は詳細にマークアップしようと考えたなら、もっといろいろありうるわけですけれども、ここでは非常に単純に考えることにします。alt="募金を"></a></p></div>目次などイラストはp要素とし、目次は定義リスト、近況なども定義リストにまとめました。div#menu直下にあるブロックレベル要素は、この3つだけです。詳細は、みな入れ子のリスト類でマークアップしました。href="#">自己紹介</a></dt><dd>放置の方向で。alt="カウンター"></dd></dl><dl><dt>近況</dt>(中略)</dl></div>諸注意ごくシンプルに、h2要素とp要素、hr要素としてみました。Explorer6.0で動作確認済みです。画面サイズ1024×768、文字サイズ小推奨。当HP内のバナーを除く全ての画像について無断転載、複製を禁じます。(中略)</p><hr></div>ニュースとリンク見出しの使い方に注意してください。◆Favoritelink◆(その他)リンク柱はニュース記事の一部ではありません。「戯言」という見出しの下に配置するのは奇妙です。「link」という見出しは原本に存在しないのですが、これがないと情報の整理ができませんので、私が追加しました。再現案では、この見出しをCSSで消します。消すなら最初から書かなければいいじゃないか、という意見は正しくありません。原本のデザインでは「その見出しを表示する必要がないから表示しない」のであって、最初からなくていいというわけではないのです。リニューアルしてデザインを変えた場合にはどうでしょうか。特定の視覚デザインに依存してマークアップをサボると、他のデザインを採用できなくなってしまうのです。世の中には少数とはいえ音声系ブラウザなどの利用者もいます。視覚デザインのことだけを考えてマークアップをサボってはいけません。キャラクター紹介追加</a></dt><dd>3人追加されております。表示結果の再現はなかなか難題です。少々面倒ながら、id属性とclass属性をあちこちに付加します。(詳細は後述)以上でマークアップの修正は完了です。HTMLソースと表示結果は次のようになります。マークアップの修正が完了したHTMLソース表示結果(代替CSS「00」対応)続いて、表示結果の再現に取り組みます。別ウィンドウに開くと便利です。このサンプルには「00」「01」「02」「03」「04」「katoyuu」「simple」「folio」という7種類の代替CSSが用意されています。代替CSS「00」〜「04」は再現案「katoyuu」が完成するまでの途中経過を示します。CSSを切り替えていくと、CSSデザインの作業過程を追いかけることができるというわけです。代替CSS「simple」「folio」は、HTMLをいじらずCSSだけでデザインを変更することに挑戦したものです。HTMLソースは同じなのに、「katoyuu」と表示結果が異なっていることをご確認ください。JavaScriptの実行が許可されたWindows版IE6では、画面右上にCSSを選択するセレクトボックスが出現します。NNやMozillaなどGecko系ブラウザでは、JavaScriptの実行が不許可の場合にも"表示→スタイル"からCSSを選択できます。Operaにおいても製作者の用意した代替スタイルを利用できます。詳細はOperaのマニュアルをご覧下さい。表示結果(代替CSS「01」対応)原本のHTMLソースには以下の記述があります。これを再現しましょう。#006;}解説ポイントは文字サイズの指定でしょう。原本には見出しがまったく用いられていませんが、改善案では見出しを用いて文書の論理構造を明らかにしています。このとき問題となるのが、ブラウザのデフォルトスタイルとのバッティングです。IEなどでは、見出しは大きな太字で表現されますが、これでは原本の表示と異なってしまいます。」を用いて文字サイズを100%とするとともに、原本にあわせてbody要素の文字サイズを90%に指定しています。原本ではtd要素などにも文字サイズが指定されていますが、これはIEの互換モードがテーブルの中には文字サイズの指定を継承しないというバグがあったためです。標準モードでは文字サイズが継承されますし、そもそも今回の再現案ではテーブルを用いておりませんので、td要素などへの指定はしないことにしました。指定していることをお見逃しなく。ブラウザのデフォルトスタイルはできるだけ殺しておかないと、後々困ることになります。それはフォーム部品があるからです。CSSでフォーム部品をデフォルトスタイルに似せることは困難で、とくにpadding周りは鬼門です。全称セレクタではなく、個別の要素に対して指定します。CSS選択スクリプトの生成するセレクトボックスの配置もここで指定しました。表示結果(代替CSS「02」対応)原本の冒頭HTMLソースではタイトルが先に登場しますが、再現案ではサイト情報をタイトルの左上に表示しなければなりません。→タイトルの余白を工夫&サイト情報を絶対配置タイトルは1文字ずつ異なる文字色にしなければなりません。第3回に解説した手法でテキストを画像で入れ替えました。グラデーション文字をCSSで再現するのは、あまり賢い方法ではありません。1文字ずつclass属性(またはid属性)の異なるspan要素などを指定する必要があるからです。それではfont要素を使うのと大差ありません。ここで最も重要なポイントは、h1要素に内側の余白を与えていることです。これによりタイトルの表示位置が下がり、上に余白が生じます。そこにサイト情報のul要素を絶対指定で配置します。表示結果(代替CSS「03」対応)原本の目次などある程度、再現できればよしとしてください。目次のテーブルや中央の画像の配置など、再現が困難な部分があります。概ねそれらしく再現できたと思います。スタイルの指定がいささか煩雑ですね......。統一感の足りない表示結果を再現しようとすれば、当然、CSSもこうなります。これは致し方ないことでしょう。みなさんが応用しやすいのは、段組の実現方法ではないでしょうか。絶対配置で左右にレイアウトしています。後にメインコンテンツなどが控えているということです。段組を全部、絶対配置にしてはいけません。重なってしまうからです。適当な高さを指定しています。dl要素をテーブル風に表示するスタイル設定の一例をdl#index周りで示しています。dd要素の左側にpaddingを指定し、dt要素のmargin:-1em;でdt要素とdd要素を横に並べたものです。きれいにできていますが、文字を大きくすると少し表示が崩れます。表示結果(代替CSS「04」対応)原本の諸注意これは非常に簡単です。幅600pxの白いブロックを中央に配置すれば完成です。内の文字列のセンタリングは、目次などのスタイル設定の中で既に指定しています。br要素を排除しても、ソースの改行を表示結果に反映させるよう指定することで、改行位置を再現することが可能です。hr要素の色指定は、WinIEではcolorを指定すればよいのですが、Operaなどにも指定を反映させるためにはborderを設定する必要があります。ニュースとリンクをCSSで再現ようやくこれで、表示結果の再現も最終ステップです。表示結果(代替CSS「katoyuu」対応)原本のニュースとリンクこの3段組を「目次など」と同じ発想で実現しようとすると、WinIEのバグに引っかかってうまくいきません。バグに引っかかります。シェアが大きいので無視できない場合も多いだろうと思います。指定することにします。レイアウトさえ組むことができれば、あとは機械的な作業となります。原本の表示結果を、CSSで(ほぼ)再現できたといっていいのではないでしょうか。CSSでお手軽リニューアルHTMLソースはそのままでも、CSSを書き換えるだけでこんなことができますよ、というコーナ。作例(代替CSS「think」)適用しているCSSは以下の通り。う〜ん、そのまんまですね。作例(代替CSS「folio」)適用しているCSSは以下の通り。これも、そのまんまといえばそうなんですけれども、目次周りをちょっと工夫して、あまり見かけない感じのデザインを少しだけ狙っていたりします。NN7とOpera7ではIE6とけっこう違う表示になるのですが、(私には)黙認できる範囲内だったので、これでよしとします。Green作例(代替CSS「green」)適用しているCSSは以下の通り。なんだかゴチャゴチャしていて見にくいですね、これは。この段階では失敗作なんですけれども、丹念に作り込んでいけば新聞社風のデザインに進化させることができるのではないかと思います。終わりに今回は意想外に手間取りました。本当は、私のトライアンドエラーの過程まで詳述しようと考えていたのですが、分量が膨大になりすぎて全然書き終わりません。結局「こうしたらうまくいきました」という、いつも通りの展開になってしまいました。以上で本稿を終えます。最後まで読んでくださったみなさま、本当にお疲れ様でした。それでは、次回をお楽しみに。段組風レイアウト/etc第3回デザイン意図を損なわずにアクセシビリティ向上/解像度耐性を高めよう/背景画像をCSSで代替する/CSSでテキストを画像で置換する方法/etc。