2003.11.25はじめにCSSの"いろは"をご存知の方向けに、CSSを用いたリニューアルのサンプルをご紹介します。作例を示して、ハイおしまい、とはいたしません。私はこれまで、多くの方へのアドバイスの中で、CSSの活用案をいくつか作成してきました。この連載では、私が実際に遭遇した活きた課題に、みなさんにも取り組んでいただきます。解答(もちろんこれは"ひとつの解答"に過ぎません)を読んでしまってもかまいませんが、ほんの数分でもご自分で考えをめぐらせると、よりいっそう楽しめるはずです。お付き合いいただければ幸いです。講義CSSデザイン導入の勘所を解説します。教材の紹介HTMLの修正CSSによる表示結果の再現CSSによる改善案の作成まずHTMLを妥当なものに修正し、続いてCSSにより元の文書と同等の表示結果の再現を目指します。最後に改善案をひとつ示しますので、ご参考まで。break息抜きに、興味深く小さな話題をとりあげます。文書を装飾する方法を採用した文書は、(特定の環境における)「表示結果」を基準に作成されます。それらのほとんどは、デザインの統制が取れていません。文書中で似た役割を果たす要素が、ばらばらの「表示結果」を与えられている場合がほとんどです。なる理由は、「自由度の高い道具を自律的に用いるのは困難だから」です。装飾する手法は、ある意味で窮屈です。制約には、意味があります。文書のデザインは改善されます。より元の文書と同等の表示結果の再現を目指すとき、その窮屈さが障害となって立ちふさがります。勉強する手段としては面白いかもしれません。場合によっては、原状の再現にとらわれず、最初から改善案の作成へと踏み出した方がよいかもしれません。課題No.03では、あえて現状の再現に取り組んで苦労しましたが、課題No.04では改善案のみ作成しました。今回のテーマ課題No.03は、一部だけ見れば再現に苦労しないものの、全体としてのデザインの不統一のために再現が困難な例でした。そこで、改善案では、部分のディテールは踏襲しつつも、統一感のあるデザインを目指しました。今回の課題No.05では、アクセシビリティの見地から再現すべきでないと考えられるデザインが登場します。そのデザイン意図を安易に捨てることなく、できる限り汲み取っていく方向で改善案の作成に取り組みます。(前半)私がこの課題に取り組んだのは2002年8月のことです。アドバイスの前後に数回、メールのやり取りがありました。本稿の原点は、そのやり取りの中にあります。No.05(別ウィンドウに開くと便利です)養護学校の臨時採用教員の方が運営する個人サイトのindexです。(現在はリニューアルされています)1段組中央寄せのレイアウトですが、細かい装飾がたくさん織り込まれています。配色はbody要素、font要素、table要素の各種属性(いずれもHTML4以降非推奨)とCSSで指定。文字サイズはfont要素で様々に指定。教材:ljl.txt作業手順"表示結果"ではなく"文章の内容"に即したマークアップに修正します。すれば、適切なCSSと組み合わせることで、その文書にふさわしい様々な表示結果を無理なく実現できるようになります。これがなかなか骨の折れる作業です。次の手順をおさらいしましょう。テキストのみ抽出し、イチからマークアップをやり直します。blocklevel要素をすべてp要素とします。p要素ではおかしいと思われる箇所について、適宜マークアップを修正します。h1〜h6要素、ul要素、ol要素、dl要素、blockquote要素、address要素でほとんど足りるはずです。(慣れないうちは無闇に使う要素を増やさないこと)inline要素を必要最小限マークアップします。a要素、em要素、strong要素、q要素でほとんど足りるはずです。今回の課題は基本的に1段組のシンプルなレイアウトなので、上から順番にマークアップしていきましょう。サイトの開始日とカウンターサイト情報の羅列とみなし、順不同リストとしました。ここでは定義リストを用いました。Lifeサイトのタイトルですから、h1要素としました。タグライン(?)新しい街、新しい学校、新しい子どもたち。ひとまとまりの文章ですからp要素としました。h2要素、目次を順不同リストとし、div要素でまとめています。以降オマケの情報とみなし、2項目をそれぞれp要素としました。順不同リストの方が適切かもしれません。異論も多いところでしょうが、全体をdiv要素でまとめています。文章自体に手を加えた箇所があります。NEWの内容が冗長なので、整理しました。いう言葉を削除しました。いった記述も削除しました。再現案(別ウィンドウに開くと便利です)JavaScriptの実行が許可されたWindows版IE6では、画面右上にCSSを選択するセレクトボックスが出現します。セレクトボックスでdefaultを選択すれば再現案のCSS(→css1.txt)が適用されます。NNやMozillaなどGecko系ブラウザでは、JavaScriptの実行が不許可の場合にも"表示→スタイル"からCSSを選択できます。Operaにおいても製作者の用意した代替スタイルを利用できます。詳細はOperaのマニュアルをご覧下さい。課題No.05は比較的、再現が容易です。各要素に、文字色、文字サイズ、揃え方向、背景、borderといった基本的なプロパティーを指定するだけでよいのです。唯一トリッキーなのが、大見出しの画像による置き換えです。CSSにテキストを画像で置換する方法は用意されていません。画像は背景に読み込むか、リストマークとして挿入する他ないのです。その他、いくつかのポイントについてまとめておきましたので、さらっと読み流してみてください。高めよう課題No.05は、解像度耐性のたいへん低いHTML文書です。正確にいえば、文字サイズの変更には強いけれども、表示領域の大きさにシビアなのです。「文字サイズの変更に強い」とは、例えばWindows版IEで「表示→文字サイズ→最小・最大」としたとき、レイアウトが崩れず、文章も読みやすいことをいいます。「表示領域の大きさにシビア」とは、ごく限られた表示領域の設定以外では、レイアウトが崩れたり、文章が読みにくくなってしまうことをいいます。私は、この2項目をあわせて「解像度耐性」と称しています。このFolioは横幅が650pxに指定されていますから、それ以上の表示領域を確保しなければ読みにくくて仕方ありません。文字サイズは可変で、大きくしても小さくしても問題はありません。表示領域の横幅を800px以上確保している方が大半であることを考えると、Folioの解像度耐性は、特別にひどいということはないでしょう。解像度耐性チェック再現案は、じつは教材よりは解像度耐性を高めてあります。改善案では、さらに解像度耐性を高めています。解像度耐性をチェックしてみましょう。教材の解像度耐性が低い理由じつは、教材の背景画像の使い方に問題があります。白背景の中央に青背景のメイン領域を設定し、情報をその中に集めることで印象の強いデザインを実現しようという発想なのですが、なんとこの背景画像、解像度が1024×768の画面でブラウザを最大化した場合にのみ、効果を発揮するのです。キャプチャ画像からわかる通り、あらかじめ余白込みで画像が作成されているため、特定の解像度以外では意図通りの表示になりません。背景画像を、製作者側が意図的に解像度にあわせて伸縮する方法は、CSSに用意されていないからです。キャプチャ画像では、表示領域が小さいために問題が生じていましたが、逆に表示領域が大きすぎる場合にも悲劇的な表示結果になることを付記しておきます。再現案では、この問題に一定の解決策を適用しました。背景をbody要素の非推奨属性ではなく、CSSで指定したのです。CSSを用いれば、画面の真ん中に背景画像を配置することが可能です。背景の上に乗せるテキストも、真ん中に配置できます。いずれも真ん中に配置すれば、表示領域の大きさに関係なく、両者は真ん中に表示されますから、解像度耐性が大きく向上するわけです。背景画像の大きさは表示領域の大きさに対応して変化することができません。背景画像は幅固定、高さ固定なのです。再現案のテキストレイアウトは、画像の大きさに合わせて幅を固定しています。そこで改善案では、背景画像を撤廃し、CSSで擬似的に再現することにしました。その結果、さらに解像度耐性を向上させることができました。いうタイトルの代替CSS(→css2.txt)を適用してください。背景画像のデザイン効果は、次の3項目にまとめられます。表示領域(白背景)の中に入れ子のメイン領域(青背景)を作成し、視線を中央に集めるメイン領域をコンパクトに印象づける領域の境界を美しいグラデーションとし、優美さを演出する入れ子のメイン領域を作成するだけなら、ある意味、簡単なんです。div要素などで情報をまとめて、背景色を指定すれば足りるわけですから。設定すればよいでしょう。コンパクトにまとまっているように見せるのも、同じ工夫で実現できます。問題は、繊細で美しいグラデーションをうまく再現する手がないことです。それさえCSSで何とかできれば、高い解像度耐性を実現できるのですが......。#ccf;}これが私の解答です。これはこれで面白い感じじゃないかな、と思います。いうタイトルの代替CSS(→css3.txt)を適用してください。2段組レイアウトの変化形です。カウンターや更新情報などを最上部の緑色の帯の中に収め、目次を左に、サイト名などを右に配置し、右下に配した花の画像で明るい印象を形成しています。改善案としてのご紹介なのですが、じつはあまり解像度耐性がよくありません。少々のことでは全く読めなくなってしまうことはないのですけれども、レイアウト自体は割と簡単に崩れます。参考程度にご覧いただければと思います。画面全体を右寄せでレイアウトし、目次を絶対配置で左へ。Ver.(別ウィンドウに開くと便利です)folioというタイトルの代替CSS(→0311folio.txt)を適用してください。単純素朴なデザインだけに、たいていの文書に(なんとなく)マッチしてしまうのです。これが改善案と呼ぶにふさわしいかというと、やはり疑問符がつきます。ここでも目次は横1列に並べてみました。単語レベルの短い言葉を縦に並べると、いくぶん貧弱な印象がありますので......。テキストを画像で置き換える方法が用意されていません。置き換えたように見せかける手はあります。課題No.05再現案を例に、ご紹介しましょう。画像の大きさに合わせて要素の縦横の長さを指定します。これだけでは、元の文字と画像が重なってしまいますね。文字の透明色指定に対応していません。そこでspan要素の出番です。span{display:none;}解説これにて一件落着。No.06練習問題です。No.06(別ウィンドウに開くと便利です)よくあるレイアウトのサイトです。装飾画像をimg要素として導入したために、少々レイアウトが窮屈な感じになっています。テーブルレイアウトにより画像とメニューの2段組としていますが、画像の扱いを見直すことで1段組となることに注目したいと思います。教材:pika.txt修正案:index.txth1要素周辺が少々トリッキーな感じもしますが、全体としては、単純で素直なマークアップを心がけてみました。いうタイトルの代替CSS(→CSSpika.txt)を適用してください。これが唯一無二の正解というわけではありませんが、私は画像を背景に読み込ませるというアプローチを採用しました。なしを選択して再現・改善案をご覧いただければ一目瞭然なのですが、画像を装飾に過ぎないとみなせば、課題No.06に1系統の情報の流れしかないことは明らかです。記述を見ての通り、単純明快な指定だけで簡単に元のデザインを再現することができました。ご紹介している例では、純粋な再現案に少々手を加えています。画像をリッチに使って、ちょっと贅沢な雰囲気を演出してみました。(成功しているかどうかは不明)。