近年、スタイルシートを利用したCSSレイアウトが普及してきましたが、テーブルレイアウトのサイトは依然としてたくさんあります。サイトを作る側(デザイナやプログラマ)からしても、テーブルレイアウトで作られているHTMLは非常に難解で、メンテナンスしづらいことが多々あります。
そうしたテーブルレイアウトの画面をメンテする際、僕はユーザスタイルシートを利用しています。ユーザスタイルシートとは、サイト側が指定したスタイルシートとは別に、ブラウザ側で任意のスタイルシートを読み込んでそのスタイルを適用することができます。
テーブルの罫線を表示するユーザスタイルシート
ユーザスタイルシートでtableタグやtdタグの罫線を表示することで、視覚的にテーブルレイアウトの構造を確認することができます。僕はこれにより、メンテがしやすくなると感じています。必要に応じて、背景色なんかも変更することで、どういう構造になっているのかを確認しながら、HTMLに手を入れていきます。
table { border: 1px solid #FF3689; } th { border: 1px solid #C601FF; } td { border: 1px solid #7AA6FF; }
IEでユーザスタイルシートを利用する方法
参考までにIEでユーザスタイルシートを利用する方法を以下に記載します。
- ユーザスタイルシートを任意の場所に保存します。
- IEを起動し、ツール-インターネットオプションを開き、デザインの項目にあるユーザ補助ボタンをクリックします。
- ユーザスタイルシートの項目で、「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れ、さきほど用意したスタイル―トを参照ボタンから選択します。