10日目:メインの内容を最初にもってくる

テーブルを使わないでCSS で完全にレイアウトする大きな利点のひとつに、視覚的なレイアウトを変えずに HTML 中の要素の並べ替えができるっていうのがある。このおかげで、メインじゃない部分がまだロードしている間にも、メインコンテンツを表示することが可能になるんだ。ただ僕だって、ほとんどのWebサイトはまだテーブルでレイアウトを組んでるのは知ってるからね。だからこそ、ここで書いとくこと覚えておいて欲しいんだな。

ナビゲーションが左側にあるテーブルレイアウトの場合。目が不自由な マーカスとかジャッキー には、メインコンテンツよりもナビゲーションが前に来ることになっちゃうんだ。これがどんなに不便かってのは、見てわかってもらうしかないね。

  1. テーブルで組んだレイアウトのサンプル
  2. 変更後のレイアウトサンプル。コンテンツが前。視覚的なブラウザだと、ふたつとも基本的に同じように見えるけど、Lynx で見たら違いは歴然なんだ。
  3. 元のレイアウトの Lynx での表示
  4. 変更後のレイアウトの Lynx での表示。メインのコンテンツが先に、ナビゲーションバーが後に来てるよね。

ま、でもこの問題を避けたいからって、わざわざテンプレート全体をデザインしなおす必要はないよ。わりとシンプルな「テーブル・トリック」っていう技を使えば、ナビゲーションのバーを左側に置いたままでメインのコンテンツを前に来させることができるんだ。

誰がトクする?

  1. マーカスが助かる。上の例でわかるように、Lynx は HTML ソースで表示される順に内容も表示される。ってことは、マーカスはナビゲーションバー全体をページに行く度毎回スクロールしなきゃならないってことだよ。それってかなりムカつくじゃんか。
  2. ジャッキー もだね。Lynx と同じように、JAWSHTML のソースコードに書かれてる順番どおり内容を表示するんだ。画面に表れる順じゃなくてね。JAWS の場合、ナビゲーション全部を読み上げるのを聞き終わるまで実のあるコンテンツへ移ってくれないわけだから、なおヒドイ状況になる。対策にはコレだ!ってのがないんだよね。(これについてはまた違う回で説明するけど。)
  3. Google も喜ぶね。Google はページのてっぺんに近いコンテンツほど重きを置くんだ。これは HTML ソースの上の方ってことで、見た目的に上にきてるってことじゃないよ。実際この技について知ってる人のほとんどは検索エンジン対策(SEO)業界の人たちなんだ。あの人たちにとってはアクセシビリティって意味での特典はオマケだけどね。

どうしたらいい?

自分のサイトを Lynx ビューワー で見て、ナビゲーションより先にエントリーがくるようになってるかチェックしてみて。Movable Type のデフォルトテンプレートはちゃんとエントリーが先になってるはず。だからこのテンプレートをそのまま使うか、これを元にちょっとだけ変更を加えるつもりの人は、何もする必要なし。にしても 一度見ておくとどういう問題が起こりえるかってことがよくわかるから、Lynx ビューワーで見てみることはオススメ。

Radio のデフォルトテンプレートを使う人は、メイン・コンテンツが先にくるようにするには修正がいるかもしれない。特にこうコピペすべきっていう方法は決まってないんで、自分のテンプレートをよく見て、テーブルがどう組まれてるか調べてみて。レイアウトのサンプル変更後のレイアウトのサンプルを見れば基本的な技術はわかってもらえると思う。

普通テーブルでレイアウト組むときはこう:

<table>

<tr>

  <td valign="top" align="left" width="25%">

    ... ナビゲーション ...

  </td>

  <td valign="top" align="left">

    ... メインのコンテンツ ...

  </td>

</tr>

</table>

代わりにこうする:

<table>

<tr>

  <!-- 上部左のセルに透明 GIF -->

  <td><img src="/images/1.gif" width="1" height="1" alt=""></td>

  <!-- メインコンテンツのセルを先にして、rowspan=2にする -->

  <td valign="top" align="left" rowspan="2">

    ... メインのコンテンツ ...

  </td>

</tr>

<tr>

  <td valign="top" align="left" width="25%">

    ... ナビゲーション ...

  </td>

</tr>

</table>

さらなる情報源(英語)