柔軟な囲い込み

今のところ私たちのデザインは可変幅のデザインで、コンテンツとサイトバーがともに wrapper に囲まれている。この wrapper は大きな柔軟性を私たちにもたらしていて、一つのスタイルを修正するだけで可変幅から固定幅のレイアウトに変更することができる。

オプション１ – 固定幅のレイアウト

これは最も単純なレイアウトで多くのブログで使用されている。固定幅のレイアウトにはメリットがたくさん有る：

• 多くの人が新聞や本に親しんでいる
• どのモニターでもほぼ確実に同じように見える
• 厄介なブラウザの問題がない

固定幅のスタイル：

幅を７００ピクセルにしたのは最小のモニター解像度は一般的に８００X６００だからだ。固定幅テーマの多くがこのスクリーンサイズに対応していて、ここではそれに１００ピクセルの余裕を持たせている。

マージンを見てみよう：

ここではマージンに二つの値を与えている。一つ目の値が上下（ここでは０）、二つ目の値が左右（ここでは ‘auto’ ）のマージンになり、’auto’ にするとブラウザが値を自動的に選択する。ここでは左右の値に ‘auto’ を入れることにより、この要素が画面の中央に来るようにしている。

ここでの overflow の設定は、あいまいな CSS ルールを使用して wrapper に囲まれている部分の高さを一番高い要素にあわせている。これにより、一番高い要素がサイドバーであれコンテンツであれ、フッターはいつもその下に表示される。「hidden」という値は Mac の IE のバグを避けるためだ。

Firefox でも Internet Explorer でもこのテーマはうまく表示されている。

Firefox

Internet Explorer

このテーマは 800×600 のスクリーンサイズにうまく調和し、別のスクリーンサイズには影響されない。

コンテンツとサイドバーの割合を変更するのは簡単で、該当するスタイルのパーセンテージを変更すればよい。これで最初のデザインが仕上がった。

オプション２ – 少し可変幅にする

ブログの大多数は固定幅のレイアウトを採用しているので少し変化をつけてみるのもいいかもしれない。コンテンツのほとんどは拘束したいが、完全な固定幅にはしたくない。そこでこれを少しだけ可変幅にしてみよう。幸いなことに私たちのテーマは、新しいラッパー（wrapper）要素のおかげでほとんど手間を掛けることなくこれを行うことができる。

wrapper のスタイルを次にように変更する：

これでコンテンツとサイドバーは利用可能な幅のうち８５％を占めるようになった。画面のサイズが８００X６００ピクセルであればこれでうまく調和するし、それより大きくなるとこの幅も大きくなる。８５％というのは見栄えがいいので選んだ。時としてもっとも単純な手段がベストなことがある。

テーマの作成でするべきことの一つは、さまざまなブラウザやさまざまなスクリーンサイズでどのように見えるか確認することだ。特に８００ピクセル以下の幅のサイズで閲覧したときに特定のブラウザがおかしな動作をするので注意が必要だ。

では幅が４００ピクセルの時の私たちの新しい可変幅のテーマを見てみよう。

Firefox
Internet Explorer

Firefox ではとても良く表示されているが Internet Explorer ではおかしい – サイドバー要素がコンテンツの下に落ちてしまっている。これは理想的とはいえないが受け入れがたいものでもない。Internet Explorer はサイドバーを慎重に邪魔にならないようにしている。多くのウェブサイトでこのように表示されているので、可変幅を採用するための妥協としてこれを受け入れてもいいだろう。

とはいえ、これに関して何かできることは無いだろうか？実はある。一応は。

オプション３ – ちゃんと表示される可変幅

ここではかなり複雑な CSS コードを少し使用してみる。これにより Internet Explorer がサイドバーをわきに追いやるのをやめさせることができ、また、より狭いスクリーン幅でも Firefox がより良く対応することができる。これを行うには最小幅（minimum width）という CSS の概念を導入する。これは文字どおり要素の最小幅を設定するものだ。ブラウザの画面が設定した幅よりも狭くなるとその要素のサイズ変更をやめてブラウザのウインドウにスクロールバーを表示させる。これならば完全に許容範囲だろう。

このすばらしいコンセプトにも一つ問題がある。 Internet Explorer は最小幅をサポートしていないのだ。さいわいダイナミックプロパティを用いることでこの問題を回避することができる。これは JavaScript を CSS に埋め込む方法だ。あまり好ましくは無いが、JavaScript を有効にしておかなければならない。

目的は次のようなスタイルをいくつか導入することだ：

• 最小幅をサポートするブラウザには可変幅のレイアウトで最小幅を固定
• Internet Explorer は JavaScript が有効なときに可変幅のレイアウトで最小幅を固定
• Internet Explorer は JavaScript が無効なときに固定幅のレイアウト

以上は wrapper のスタイルを変更することによってきれいに実現することができる：

ではこれを説明していこう。margin の「auto」の働きについては既に説明した。その後にここでは幅（width）を二度定義している：

CSS は最も適切なものを優先させて属性を何度も定義することができる。最初の width はすべてのブラウザに固定されたサイズの幅を表示させる。これはデフォルトの包括的なケースだ。つぎは Internet Explorer 専用のダイナミック表示形式（expression）だ。他のブラウザはこの行を無視するが JavaScript が有効な Internet Explorer はこれに注目して前の行の幅設定を上書きする。

この expression はドキュメントの幅が６０５ピクセル以下になった場合最小幅を６００ピクセルに変更し、それ以外では８５％（可変幅）に設定するよう指定している。ユーザは JavaScript がループに陥ったりブラウザがクラッシュするのを好まないので、こうしたことを防ぐために６００ピクセルではなく６０５ピクセルでテストする必要がある。

最後に CSS子セレクタを使用する新しいスタイルを定義した。子セレクタにより特定のコンテキスト内の特定の要素に特定のスタイルを定義することができる。これはつまり特定の階層のパーツである要素にのみ適用されるスタイルだ。上記では次のスタイルがそれに当たる：

これは次のように解釈される：

• このスタイルは #wrapper が div の子要素のときにのみ適用される

このことはまだ書いていなかったが、header.php は div ‘page’ を定義していて、これは wrapper を含むすべてを囲んでいる。したがって wrapper は div の子要素である。

なぜ新しいスタイルでは子セレクタを使用しているのか？これは巧みな裏技だ。 Internet Explorer は子セレクタをサポートしていない。 Internet Explorer はこの特別なスタイルを読み込んでも完全に無視する。これによって Internet Explorer には何の影響も及ぼすことなく、 Internet Explorer 以外のブラウザに対する可変幅スタイルを適切に書くことができる。

ここで使用した裏技をまとめると：

• 新しいブラウザでは表示がおかしくならないように最小幅を持ったすてきな可変幅のデザイン
• JavaScript が有効な Internet Explorer では部分的に有効な最小幅（少しちらつく）を持った可変幅のデザイン
• JavaScript が無効な Internet Explorer では固定幅のデザイン

これは実際にユーザが意識することはない。