CSS 非対応ブラウザへのちょっとした心遣い

　sb でページを作る人の多くは CSS で外観を整えていると思いますが、CSS 非対応（もしくはオフにしている状態）での表示を意識したことがあるでしょうか。
　非対応環境での表示における配慮というのは、追求するとあまりにも多岐にわたり大変ですが、簡単かつ非常に効果のある方法が一つあるのでご紹介します。

区切って見やすく

　CSS で全ての見た目を制御している場合、非対応環境では当然それらが表示されません。このページのような1カラム構成のページであろうが、CSS によって 2カラム、3カラムにしているページであろうが1列にズラーっと表示されます。（CSS を適用していない状態での表示は、Netscape や Firefox で簡単に確認する事ができます。なお、HTML のテーブルによって 2カラムにしていれば、当然 CSS 非対応環境でも 2カラムで表示されます）

　その場合、ただただ上から下までびっしりと文章が敷き詰められるため、各記事の区切りや記事とメニューの境界がパッと見では全く分かりません。そこで、 <hr /> タグを使って CSS 非対応環境でだけ表示される区切り線を用意しましょう。

　まず、下準備として CSS ファイルに「　.divider {display: none;}　」を加えます。これは class="divider" になっているものを画面に表示させない CSS の設定です。display: none の場合はレイアウトに影響を与えない（スペースが空いたりする事が無い）ので、今使っているデザインが崩れる心配もありません。
　次に、HTML の区切りを入れたい部分に「　<hr class="divider" />　」を挿入します。これだけで、CSS 対応環境では今までと同じデザインのまま、非対応環境用の区切り線を挿入する事ができます。

区切りを挿入するポイント

　当然ページのデザインによって変わって来ますが、<!-- END entry --> / <!-- END comment_area --> / <!-- END trackback_area --> / <!-- END profile_area --> の直前に入れるのがおすすめです。こうすると通常のページ表示状態では各記事およびメニューとの境界に区切りが挿入され、個別表示・プロフィール表示の場合もコメント / トラックバックやプロフィールとメニューの境界に区切りが挿入されます。
　区切りは「全く別の物が連続する時にそれを知らせる・同じ物が長く続く場合にアクセントを入れる」といった状況で使うものなので、メニュー部分が長い人はその中に入れるのもよいかもしれません。

実際はこんな感じ

　言うまでもなく左が区切り線なし、右がありの状態です。単に1本の線が入っているだけですが、随分と見やすくなっていると思います。（今見ているこのページは、CSS をオフにすると右のように表示されます）
　本格的に CSS 非対応環境での表示を考慮に入れるといろいろと大変ですが、この方法はちょっとした労力で大きな効果を得る事ができます。

△ PageTop | comments (0) | trackbacks (0)