ステップ１ – デザインの仕上げ

アクセシビリティや標準準拠の考えについていろいろ書いたが、これは別に脅かすためではない。このガイドのための調査をしているときに、前回に行ったことをいくつか取り消す必要のあることに気がついた。これは間違っていたということではなく、十分には正しくなかったということだ。おまけとして回り込みの問題がきれいに片付けることができる。

テーマのカスタマイズというのは大部分が経験的観測の実施にほかならない。うまくいくまでいろいろな値や順序を試し、また元に戻っておかしくなった箇所を修正する。単に新しい効果を導入するために何時間もの入念な作業を取り消さなければならないことも度々ある。最初からはうまくいかないというのは言い訳の一つでもあるが、ウェブサイトという物はたくさんの試行錯誤を必要とする物だし、しかもその試行錯誤はハッキングに取りかかるチャンスを得る前の段階の話だ。

よりよくする

最初の仕事は index.php をもとの状態に戻すことだ。前回は get_sidebar 関数の呼び出し位置の変更しかしていない。最も簡単なのはデフォルトの Kubrick テーマから index.php をコピーしてくることだ。

なぜこれを行う必要があるのか？技術的に言えばこれは必要ないし、このセクションを飛ばすこともできた。しかしガイドを書く以上、そのガイドには自分の知っている最高の情報を確実に書き入れようと決心した。コンテンツを最初に、サイドバーを次に置く理由は、先に書いたアクセシビリティと Google のメリットのためだ。このメリットは小さいかもしれないがやるだけの価値はある。

では index.php ファイルを元に戻したところでレイアウトのスタイリングを続けよう。最初にまずコンテンツ（content）のスタイルを追加する：

このコンテンツ（content）は画面の７０％を占め、左にフロートしている。

次にサイドバー（sidebar）のスタイルを変更する：

右にフロートしている固定幅のサイドバーを取り除き、左から７０％離した可変幅のサイドバーに置き換えた。

これで行ったことは何か？一つ目として、index.php をオリジナルの状態に戻したのでフロートさせる要素を再配置する必要が生じた。フロートさせる理由は div がブロックレベルの要素だからである。ブラウザはブロックレベルの要素をレンダリングすると自動的に改行を加え、次の要素をその下に置く。ここでは最初の要素をフロートさせることによってこれを防ぎ、サイドバーをコンテンツの下ではなく右側に置くことができる。

二つ目として、すべてが可変幅となった。ブラウザの表示サイズを変えるとコンテンツをサイドバーのサイズも変更される。これについてはまたすぐ後に書くことにする。

三つ目として、サイドバーに左マージンを導入した。前回のデザインではコンテンツがサイドバーに回り込んでしまう可能性があった。コンテンツとサイドバーの再配置により今度はサイドバーがコンテンツに回り込んでしまう可能性が出てきた。この左マージンは、ページの左から７０％以内にサイドバーが現れないよう指定している。コンテンツは左から７０％まで延びるが、左マージンのおかげでサイドバーが回り込むことは決してない。

マージンがサイドバーをコンテンツから切り離す

簡単に言うとこれまでに行ったのはサイドバーとコンテンツ周りの変更だ。第一章ではサイドバーを最初に置いて、これをコンテンツの右側にフロートさせていた。今ではコンテンツを最初に置いて、これをサイドバーの左側にフロートさせている。これは見た目は同じだがいくつかのメリットがある：

• 回り込みがなくなった
• よりよいアクセシビリティ
• Google による認識の改善

もしサイドバーを左側に置きたいのなら、このスタイルを逆にして、コンテンツを右側にフロートさせてサイドバーのマージンを右側に入れればよい。