小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


テーブルレイアウトの構造を調べるときに使えるユーザスタイルシート

近年、スタイルシートを利用したCSSレイアウトが普及してきましたが、テーブルレイアウトのサイトは依然としてたくさんあります。サイトを作る側(デザイナやプログラマ)からしても、テーブルレイアウトで作られているHTMLは非常に難解で、メンテナンスしづらいことが多々あります。

そうしたテーブルレイアウトの画面をメンテする際、僕はユーザスタイルシートを利用しています。ユーザスタイルシートとは、サイト側が指定したスタイルシートとは別に、ブラウザ側で任意のスタイルシートを読み込んでそのスタイルを適用することができます。

テーブルの罫線を表示するユーザスタイルシート

ユーザスタイルシートでtableタグやtdタグの罫線を表示することで、視覚的にテーブルレイアウトの構造を確認することができます。僕はこれにより、メンテがしやすくなると感じています。必要に応じて、背景色なんかも変更することで、どういう構造になっているのかを確認しながら、HTMLに手を入れていきます。

table {
  border: 1px solid #FF3689;
}
th {
  border: 1px solid #C601FF;
}
td {
  border: 1px solid #7AA6FF;
}
ユーザースタイルシートを適用して表示したgoogle


IEでユーザスタイルシートを利用する方法

参考までにIEでユーザスタイルシートを利用する方法を以下に記載します。

  1. ユーザスタイルシートを任意の場所に保存します。
  2. IEを起動し、ツール-インターネットオプションを開き、デザインの項目にあるユーザ補助ボタンをクリックします。
  3. ユーザスタイルシートの項目で、「自分のスタイルシートでドキュメントの書式を設定する」にチェックを入れ、さきほど用意したスタイル―トを参照ボタンから選択します。


HTML テーブルの枠を色つき表示するブックマークレット

ブックマークレットを利用するという方法もあります。