« 『Webデザイン 知らないと困る現場の新常識100』 こもりまさあき他 (MdNコーポレーション) | メイン | 『Webアクセシビリティ』 ジム・サッチャー他 (毎日コミュニケーションズ) »

2009年03月31日

『現場のプロから学ぶXHTML+CSS』 CSS Nite編 (毎日コミュニケーションズ)

現場のプロから学ぶXHTML+CSS →bookwebで購入

 Webデザイナーのための再教育本はたくさん出ているが、一歩進んだ内容の本を紹介しよう。CSS NiteというWeb技術関係のセミナー会社が編纂した『現場のプロから学ぶXHTML+CSS』で、『Web標準の教科書』の益子貴寛氏ら七人の専門家が執筆している。

 多彩な執筆者が参加しているだけに、話題は多岐にわたっており、読者の関心の持ち方によってさまざまな面を見せる本になっている。

 自分自身のサイトならうまく表示されないブラウザがあっても気にしないで通してきたが(悪いのはブラウザの方だと思っている)、他人様のサイトではそうも言っていられない。2001年に電子文藝館の立ちあげに係わった時はスタイルシートを使うといっても、まだそんなに高度なことはやっていなかったので、Netscape4でレイアウトがおかしくなる程度だったが、今回、お手伝いした立教大学文芸・思想専修サイトの場合は段組レイアウトやオーバーラップメニュー等々をやっているので、ブラウザの互換性が問題になった。IEとそれ以外のモダンブラウザの違いは予想していたが、W3Cに忠実とされるモダンブラウザでもいろいろと理屈に合わないことが出てくるのである。

 本書を読んで、どんなブラウザでも同一の表示結果がえられるようにプロは苦労しているのだなということがわかった。完全に同一の表示になるはずはないが、同一に近づけるためのテクニックがいろいろ蓄積されているのである。

 たとえば、リセットスタイルという技法が紹介されている。絵を描く前に下地を白く塗っておくとムラなく仕上がるが、それと同じように、ブラウザに組みこまれた表示スタイルを無効するためのスタイルシートをまず読みこませ、その後、メインのスタイルシートを適用するわけである。

 リセットスタイルと似た発想で、マージンを設定する時はパッディングを0に設定し、パッディングを設定する時はマージンの方を0に設定するというワザも役に立った。

 文章量のすくないページだと、ブラウザ右端のスクロールバーが表示されず、ウィンドウの横幅がその分広がるが、横幅が変わらないようにするために、スクロールバーを強制的に表示させるワザも紹介されている。

 もちろん、どんなに手をつくしても完全に同一に表示されるわけではないし、お荷物のブラウザまでカバーしようとすると時間もコストもかかる。サイトの性格と予算によって、どこかで線引きをしなければならない。どのブラウザがどのような問題をかかえ、どんな対策があるか、どれだけ手間がかかるか、経験的にどこで線を引いたらいいかが本書では随所でふれられている。実務経験の豊富な人の言葉は説得力がある。

 もう一つ興味を引かれたのはメディア別のスタイルシート、特に印刷用スタイルシートだ。

 現在、Webページはパソコンで見るだけのものではなくなっている。フルブラウザをそなえたケータイ電話は当たり前になっているし、インターネット対応のTVも増えている。視覚障碍者のための音声ブラウザもある。プリンタに出力することもパソコン以外の表示法にはいるだろう。

 印刷用のスタイルシートを画面用とは別に指定することによって不要な要素を印刷からはずしたり、レイアウトをシンプルにしたり、画面表示にはゴシック体、印刷には明朝体というような使いわけをしようというわけだ。

 印刷するとリンクはただの下線強調になってしまうが、リンクの張られた語句の後ろにリンク先の URL を出力させるワザがあるのは知らなかった。

 こういうおいしそうな機能を知ると、自分のサイトでも使ってみたくなる。数年前からWebに飽きていて更新する意欲が減退しているが、本書によって久しぶりにカツをいれられた格好である。

→bookwebで購入

トラックバックURL

このエントリーのトラックバックURL:
http://booklog.kinokuniya.co.jp/mt-tb.cgi/3200