CSS > Webサイトのレイアウトの話

最近よくある3段ぶち抜きペインとか、サイドバーとかってどうよ。横幅の狭いディスプレイとかウィンドウの横幅を狭くしてみたとき、本当に見えなければいけないメインコンテンツ(その多くは真ん中にあるが)の幅がものすごく狭くなったりする。また横幅指定されているがために、横スクロールしないとメインコンテンツが見えなかったりする。これってどうよ。やっぱり一目で情報が見渡せる範囲は限られているわけで限られたスペースを有効に使わないといかんと思う。

1.1 サイトデザイン

結局横にメニューを入れるのはやめた。最終的にもっともよいと思われたのは最もシンプルなものだった。苦労してサイドメニューのレイアウトを考えたが、あまり役に立たなかったようだな。改めて書いてみると、LaTeX的レイアウトだと思う。下のような感じで上から下に向かってずらーっと並べる

+--------------------+
| Title              |
+--------------------+
| Abstract           |
+--------------------+
| Table of Contents  |
+--------------------+
| Contents           |
+--------------------+
| Tanks for everyone |
+--------------------+
| Table of Contents on Upper Document  |
+--------------------+
| Credit             |
+--------------------+

1.2 全称セレクタを使ったブラウザデフォルトスタイルの初期化

全称セレクタを使った初期化はもう時代おくれだそうな。その理由は、ブラウザのデフォルトスタイルも見やすい場合があり、これまでも初期化してしまうのは適当でないと言う理由らしい。

これに対しての疑問を一つ。デフォルトスタイルの初期化はブラウザ間の見栄えを初期化するという目的があるらしいが、それをするには異なるブラウザでのCSSの解釈の違いを吸収する必要がある。そのためには、IEの場合、Operaの場合、Safariの場合、Firefoxの場合のようにして、それぞれのブラウザに対応した*.cssファイルを用意する必要がある。

かなり手間がかかることは間違いないだろうな。そのような情報を統一的に提供するページがあっても良いような気がする。

1.3 マージンとパディング

同じページをIEとFirefoxでに見ると同じスタイルのはずがどこか違って見えることがある。これは、2つのブラウザがレイアウトの解釈に異なるアルゴリズムを用いているからだ。結局人間の目に入る情報はブラウザによって解釈された情報なのだから、Webページをレイアウトするときにはどのブラウザで見ても同じように見えて欲しい。Webページのレイアウトを担当するものは、2つのブラウザのスタイル解釈と本来従うべきCSSの違いを理解しなければならない。

人間が見て次のようにレイアウトされているWebページを作りたいときどうすればいいだろう。まずは絶対指定での課題を考える。幅400pxの親要素(box)の中に、親要素の幅に対する幅80%の子要素(box)が含まれ、子要素の両側に等しいだけの幅(親要素に対する幅10%が両側に)が空いている、子要素の内容は子要素の縁から40pxだけ離れた位置にある。このとき正直に下のようなコードを書いてみた。これが思ったとおりに解釈されるかどうかはブラウザに依存する。

<div style="width:400px;background:yellow;">A
  <div style="width:320px;margin:0px auto;padding:0px 40px;background:green;">B
  C</div>
D</div>

1.3.1 Microsoft Internet Explorerの場合

さてどのように見えただろうか。Microsoft Internet Explorerでは、320pxの緑色の帯、80pxの黄色い帯、の順で表示された。左右のmarginをauto、つまり両サイドを等しいだけ空ける、にしたのにもかかわらず。では子要素の両サイドのマージンを絶対指定するとどうだろうか。400pxと320pxの差、80pxの半分、40pxが両側に空けばよいので次のように考えられる。

<div style="width:400px;background:yellow;">A
  <div style="width:320px;margin:0px 40px;background:green;">B
  C</div>
D</div>

さてどのように見えただろうか。Microsoft Internet Explorerでは、思ったように表示できたと思う。僕は、絶対指定は好きでない。なぜならブラウザのウィンドウの大きさを変えるとはみ出てしまうからだ。そこで幅やマージンを相対指定してみる。相対指定する際の問題点は何に対しての割合かということである。講釈を述べずに成功例を示し、どのように解釈しているかの結論を導こう。

<div style="width:400px;background:yellow;">A
  <div style="width:100%;margin:0px 10%;background:green;">B
  C</div>
D</div>

Microsoft Internet Explorerでは、思ったように表示できた。つまり絶対指定したときと全く同じ様に、40pxの黄色の帯、320pxの緑色の帯、40pxの黄色の帯、の順番だ。つまりMicrosoft Internet Explorerでは、子要素のwidthを相対指定する場合の分母は(親要素のwidth)-(子要素のmargin)、子要素のmarginを相対指定する場合の分母は(親要素のwidth)だとわかる。

|          cWWpx                   cMMpx
|cWW% = ----------- X 100 , cMM% = ----- X 100 
|       pWWpx-cMMpx                pWWpx

例えば、box要素内のbox要素をセンタリングしたいという要望は多い。body要素内のp要素をセンタリングしたいとかである。センタリングするということは絶対指定した場合の(親要素のwidth)=(子要素のmargin)+(子要素のwidth)が成り立っているということである。これと上の式により、親要素に対してセンタリングされる子要素のwidthは100%でなければならない、ということがわかる。

|       pWWpx-cMMpx      
|cWW% = ----------- X 100 = 100
|       pWWpx-cMMpx

<div style="width:400px;background:yellow;">A
  <div style="width:100%;margin:0px 40%;background:green;">B
  C</div>
D</div>

センタリングされるbox要素のwidthを100%より小さくすると下のようになる。つまり親要素のwidthは指定したとおりの値で子要素のwidthが小さくなる、ということだ。

<div style="width:400px;background:yellow;">A
  <div style="width:50%;margin:0px 10%;background:green;">B
  C</div>
D</div>

センタリングされるbox要素のwidthを100%より大きくすると下のようになる。つまり親要素のwidthが大きくなり子要素のwidthは指定したとおりの値、ということだ。

<div style="width:400px;background:yellow;">A
  <div style="width:150%;margin:0px 10%;background:green;">B
  C</div>
D</div>

1.3.2 草稿

上の絶対指定を相対指定にしてみるとこうなる

Firefoxでは上の2つは全く同じに見えた。InternetExplorerでは上の2つは異なっていた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の2つは全く同じに見えなければならない。

IEのことを考えないと。

Firefoxでは上の2つは異なっていた。InternetExplorerでは上の2つは全く同じに見えた。幅、マージン、パディングのパーセント指定が親要素の幅や高さに対する割合ならば、上の2つが全く同じに見えるのはおかしい。

ということはIEとFirefoxで同じようなレイアウトをなすにはmarginだけ使ってpaddingやwidthを使うのはご法度といううことになる?少なくともいえることは、FirefoxのほうがWebページをレイアウトする方の人間にとってはわかりやすいシステムを採用しているということだ。

1.4 ローカルに保存されたスタールシートを強制的に更新させる。

ファイル名を変えるのも一つの手。シンボリックリンクを張るのもあり。でもこれは思いつかなかった。JavaScriptにも適応できる。

<link href="common.css?20060425" rel="stylesheet" type="text/css">
<script src="common.js?20060425" language="javascript" type="text/javascript"></script>

これってつまり、HTMLファイルの全ての内容を置き換えるという作業をしないと反映されないのでは。と思った。

1.5 CSS - 色指定のマイルール

色指定の基準が合ってもいいと思う。そうは言っても、絶対的な基準を作れるほど色のことについては良く知らない。だからこのページは一般的基準ではなくてマイルール。

1.5.1 16色

色数の少ないところから始めよう。前景色背景色の組み合わせとして見やすいとされているW3Cの基準を満足する組み合わせは256の組み合わせの内たった14個である。意外なことに、注意を喚起すると思われる赤は前景色背景色どちらで使用しても赤以外との組み合わせは見にくいと判断された。

1.6 HTML 4.01非推奨属性タグの置換

1.6.1 strike,s - 打ち消し線

/* style.css */
span.s{
  /* substitution for strike tag */
  text-decoration:line-through;
}

/* style.html */
...
<link rel="stylesheet" href="style2.css" type="text/css" />
...
<span style="s">この文章はCSSを用いて打ち消されます。</span>
...

1.7 ブラウザの設定が変わっても変わってほしくないものはコンテンツの見易さ

自分のサイトのユーザがどのような機器を使って自分のサイトから情報を得ているかはほとんど不明である。例えば、このサイトのユーザがコンテンツをどのようなサイズ(文字のサイズ、windowのサイズ、ディスプレイのサイズ)で見ているか僕には全くわからない。

コンテンツの魅力というものは、内容がユーザによく理解されてこそ得られるもので、内容が貧弱であったり見難いものであったりすると、ユーザの理解度はさがり、よく読めば非常に魅力的な内容であるにもかかわらず、コンテンツの魅力が下がってしまう。類似した内容を提供するWebページが大量に存在する今だからこそ、自サイトのコンテンツの理解度を高める努力をしないことは、類似した内容を提供している他サイトに流れてしまうユーザを増やすことになり、自サイトのユーザ数を減らすことになる。どのようにして他サイトに流れる引き止めるかということはサイトのオーナーにとって重要な戦略だと思う。内容コンテンツを提供する側はこのような点を考慮して、コンテンツの理解度を左右する一つの要素である「コンテンツの見易さ」に配慮したサイトを作成するべきだと思う。ここからは、このサイトにおけるコンテンツの見易さを考えてみる。

1.7.1 p、pre、ol、ul、dl要素間の上下外余白

1.8 ネタメモ

1. http://woork.blogspot.com/2008/03/css-message-box-collection.html
2. http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx
3. 10 Ways to Increase Your Site Crawl Rate
4. Kick Butt With Internal Site Search Analytics | Occam's Razor by Avinash Kaushik
5. スタートアップが押さえておくべきSEOの極意、6カ条 - ＠IT

1.9 サイトデザインの指標として

1. http://builder.japan.zdnet.com/news/story/0,3800079086,20378931,00.htm
2. http://www.okuramkt.com/dic/mkt/landing_page.html
3. ASHのコンテンツについて
4. ウェブアクセシビリティチェックサイトHAREL
5. Firebugでラクラク診断～Yahoo!が明かすページ表示の高速化13のルール - Dragon.jp
6. Unobtrusive Google Analytics Integration » The Notebook » Refract, the online landscape of Rommert Zijlstra

1.10 baseタグを使う僕なりの理由

ネームスペースとかクラスとかの考え方がある。あるネームスペースが有効な範囲内では、ある名前は其のネームスペース内で有効な名前と考えられる。baseタグを使うと同じようなことが出来ると思う。もしbaseタグに自分のホームページスペースのルートディレクトリが書いてあれば、ルートディレクトリが変わらない限り其のページが同じホームページスペース内で移動したとしても、リンク先のアドレスの変更は必要ない。

ただし、もしミラーサイトを作った場合、ミラーサイトにあるページを見ているユーザがリンク先に飛ぶリクエストは常にマスターサイトへのリクエストになってしまう、という問題がある。

1.11 google ガジェットは邪魔

ためしに数日間google ガジェットの検索ボックスを設置してみたが、僕が邪魔に感じてしまってやめてしまった。やめた理由の一つはcssで位置とか見かけを恒久的に変更する方法が見つからなかったから。ガジェット部分のJavascriptを読めばいいのだけれど、これだとGoogle側の仕様変更についていけないしなぁ。ということでやはり昔ながらの検索ボックスに戻ってしまった。

1.12 linkタグrel要素とかrev要素に対応したページ

Operaのナビゲーションバーを表示させると出てくるボタンはそれぞれ、下のような感じ。各ページのheadセクションにこのようなlinkタグを付け足して、それぞれのlinkタグに対応したページを独立させて作っておくというのはどうだろう。まぁ裏取れてないけれど。

ホーム

<link rel="home" href="home.html" />

索引

<link rel="index" href="index.html" />

目次

<link rel="contents" href="hoge.html#contents" />

検索

<link rel="search" href="search.html" />

用語集

<link rel="glossary" href="glossary.html" />

ヘルプ

<link rel="help" href="help.html" />

最初

<link rel="start" href="hoge.html#start" />

前へ

<link rel="prev" href="prev.html" />

次へ

<link rel="next" href="next.html" />

最後

<link rel="last" href="hoge.html#last" />

親階層

<link rel="up" href="up.html" />

著作権

<link rel="copyright" href="index.html#copyright" />

作成者

<link rel="author" href="index.html#author" />

それぞれのリンクタイプについての解説は邦訳：Modularization of XHTML - Defining Abstract Modulesが詳しい。

1.13 検索ユーザが求めるもの

よくまとまっているページなのではないだろうか。では、「よくまとまっているページ」とはどのようなものだろうか。どのようなユーザも満足することが出来るようなページを作るのはかなり難しいと思う。自分のページが対象としているユーザを、僕はどのようにして決定すればよいのだろうか。検索ユーザからのレスポンスは、検索キーワード以外にはわからないだろう。ということは、それぞれのページが対象としているキーワードを明確にして、そのキーワードについてのコンテンツを書き上げるというアプローチが適しているのだろう。

1.14 表現の正規化、統一

検索エンジンがどのようにしてランク付けをしているのか全くわからないけれど、自分のサイトの中では同じものを意味する物については同じように表現するように心がけてみよう。たとえば、operaとかOPeraとかのかわりにOperaで代替するとかね。c言語の変わりにC言語と書くとかね。それ以外にも、urlの正規化とか。つまり、同じ内容を参照する際に最も信頼の置けるソースをurlにするとかはどうなんだろう。たとえば、日本語版perldocは腐るほど同じ内容ページがあるが、その内容を参照する場合に全部perldoc.jpにしたら、perldoc.jpにはすごい負担がかかるわけで。これは負荷分散の感覚からしたらだめなんだろうけど。

1.15 strongタグ

強調のためと太字のためというのは違うわけだ。文脈上の意味合いとして強調したい場合はstrongたぐを使うわけだし、強調したい部分を視覚的にわかりやすくするために太字にしたり斜体にしたり色付けしたりする。太字というのは視覚的な変更であって文脈上の意味合いとはまた違ったものだと思う。

1. 強調,引用,グループ化,画像などの要素 -- ごく簡単なHTMLの説明