CSSのoutlineプロパティを駆使したHTMLのデバッグとテスト

CSSの『outline』プロパティを使用して、HTMLの構造を確認したり、
非推奨のタグの発見や推奨タグの未定義の発見、
リンク切れ等をとても簡単にCSSのセレクタを使って見つける方法を解説します。

ただのCSSの定義となる為、有効・無効も簡単に変更出来ますし、
仕組みは簡単なので、独自に拡張する事も可能です。

デバッグやリリース前のテスト等に御使い下さい。

ワイヤーフレームを表示させてHTML構造を確認しよう

レイアウトの境界を表示し、
HTML構造のワイヤーフレームを簡単に確認する方法です。

今回解説するやり方は、CSSの『outline』プロパティを使用します。
『outline』プロパティは、『border』プロパティの様に境界を表示しますが、
縁取りに沿って描画される為、要素の位置や形が確立してからの描画になる関係上、
『outline』プロパティ自体の太さはレイアウトに影響しません。

また、形を認識しますので、対象が丸い場合は丸く縁取りされます。
フォーム要素にフォーカスが入ったときに、
縁取りが光るようなアクションを定義する時などに
良く使われるプロパティです。

フォーム要素が『radius』プロパティ等で丸くなっている場合は、
『outline』も丸く引かれます。

HTML構造を確認する時に、『border』プロパティを使用すると、『border』プロパティの幅の分だけ
他の要素に影響を与えてしまう為、『カラム落ち』等のレイアウト崩れを起こしてしまいます。

これではCSSのデバッグがとても不便です。

今回は、『border』プロパティでは無く、『outline』プロパティを使用して
他の要素へ影響の無いように、単純に要素の境界を解りやすく表示する事で
CSSのデバッグを可能にします。

簡単にですが、『outline』プロパティを全要素へ対応させたサンプルです。

/* outlineを全要素で表示させる
-----------------------------------------------------------------------------------*/
body * { outline: 2px dotted rgba(255,0,0,1) !important; } /* red */
body * * { outline: 2px dotted rgba(0,128,0,1) !important; } /* green */
body * * * { outline: 2px dotted rgba(255,165,0,1) !important; } /* orange */
body * * * * { outline: 2px dotted rgba(0,0,255,1) !important; } /* blue */
body * * * * * { outline: 1px solid rgba(255,0,0,1) !important; } /* red */
body * * * * * * { outline: 1px solid rgba(0,128,0,1) !important; } /* green */
body * * * * * * * { outline: 1px solid rgba(255,165,0,1) !important; } /* orange */
body * * * * * * * * { outline: 1px solid rgba(0,0,255,1) !important; } /* blue */

セレクタは、body配下にてワイルドカード『*』にしていますので、
全ての要素に適用されます。

また、実際のHTMLでは構造が入れ子になって構築されていくかと思いますので、
階層によって色分け出来る様に、ワイルドカードを繋げて
階層毎に色を指定しています。

このCSSを適用させる事によって、レイアウト崩れを起こさずに
HTML構造のアウトラインに色付けされ、
位置やサイズを簡単に確認する事が出来ます。

CSSを適用するかしないかで表示状態を一括で切り替えられるのも魅力ですね。

とても解りやすいので、是非とも活用しましょう。

現在非推奨となっているタグを見つけるstyle直指定、fontタグ、centerタグ

HTML構造の表示と同じく、他のレイアウトに影響を与えない『outline』プロパティを使って
特定の要素を発見しやすくするCSSです。

今回は、現在では非推奨となっている『fontタグ』『centerタグ』と、出来ればCSSは外出しが理想的という事で、
タグに直接『style=""』でスタイルを指定している箇所を見つけやすくする為のCSSです。

/* 現在非推奨となっているタグを見つけるstyle直指定、fontタグ、centerタグ
-----------------------------------------------------------------------------------*/
*[style], font, center {outline: 5px solid rgba(255,0,0,1) !important; } /* red */

これで、スタイルを直接記述している要素と、fontタグ、centerタグが赤色の実践で囲われます。
これも、ただのCSSですので、不要な場合はコメントアウトし、確認したい時だけ有効にする様な
手軽な扱いが可能です。

リリース前に念の為にチェックする一連の流れに組み込むのも良いかもしれません。

現在推奨されている、画像に対するtitleとaltを見つける

Google画像検索などで、画像に対する注目が高まっています。
また、altとtitle属性は、画像を読む事の出来ない検索エンジン向けのSEOとして、
キーワードを埋め込むのに活用されていました。（本来の用途は別ですが）

そして、画像検索でも、これが何の画像を示すのかを明確にすると、
検索結果で表示されやすくなりますので、画像にはなるべく『altタグ』と『titleタグ』は指定しましょう。

下記のCSSは、そんな画像に対して『altタグ』と『titleタグ』の指定が無いものを見つける為のものです。
『altタグ』の指定が無いものは赤色の実践で囲まれ、
『titleタグ』の指定が無いものは、fuchsiaの実践で囲まれます。

これも、リリース前のチェック項目に入れておくと良いでしょう。

/* 画像に対して推奨されているalt,titleの未設定を見つける
-----------------------------------------------------------------------------------*/
img[alt=''] {outline: 3px dotted rgba(255,0,0,1) !important; } /* red */
img:not([alt]) {outline: 5px solid rgba(255,0,0,1) !important; } /* red */
img[title=''] {outline: 3px dotted rgba(193,84,193,1);} /* fuchsia */
img:not([title]) {outline: 5px solid rgba(193,84,193,1);} /* fuchsia */

tableタグに推奨されるsummary属性やthの未定義scopeを見つける

同じように、推奨されているのが『tableタグ』に対する『summary属性』です。
これも下記の様なCSSで見つける事が出来ます。

/* tableに対するsummaryの未定義を見つける
-----------------------------------------------------------------------------------*/
table[summary=''] {outline: 3px dotted rgba(255,0,0,1) !important; } /* red */
table:not([summary]) {outline: 5px solid rgba(255,0,0,1) !important; } /* red */

また、thタグには『scope属性』が指定されている事が望ましいです。
『th』が指定されているにも関わらず、『scope属性』が指定されていない場合は、
下記の記述にて、赤い枠で表示されます。

/* thタグのscope属性の未定義を見つける
-----------------------------------------------------------------------------------*/
th {outline: 2px solid red;}
th[scope='col'], th[scope='row'] {outline: none;}
th:not([scope='col']), th:not([scope='row']) {outline: 2px solid red;}

初めに、『th』は全て赤い枠線を表示し、『scope属性』が正しく指定されていれば『outline』プロパティを『none』にする事で
枠線を消しています。
結果、『scope属性』を正しく指定していない『htタグ』に関しては、赤い枠線が表示される（赤い枠線の表示が残る）
という制御です。

リンク先の未指定を発見する

続いて、リンク先が未定義な場合にアウトラインを表示する様に指定します。
リンクは通常、『aタグ』に『href属性』にて指定します。
よくある慣習として、未設定の場合は『#』にしていたり、未定義だったりします。
その倍には、CSSでセレクタにて判別して色を載せます。

下記の例では、未定義の場合と、『#』が指定されている場合、
それと、推奨されている『title属性』の未定義時にも色を載せるように指定しています。

/* リンク先の未定義と、title属性の未設定を発見する
-----------------------------------------------------------------------------------*/
a[href]:not([title]) {outline: 5px solid red;}
a[title=''] {outline: 3px dotted rgba(255,0,0,1) !important; } /* red */
a[href='#'] {background: lime;}
a[href=''] {background: fuchsia;}

コチラも、リリース前に一度適用してチェックした方が良いでしょう。
うっかりしたリンク切れを防ぐ事が出来ます。

CSSのセレクタは強力で、様々な要素を特定できます。
そこへ、他の要素やレイアウトに影響を与えない、CSSの『outline』プロパティを掛け合わせれば
とても便利なデバッガが構築できてしまいます。

他にも応用が利きますので、
オリジナルで、どんどんデバッグやテスト等のチェック機構を作成してくださいね。
中でも使い勝手の良い『outline』プロパティの紹介でした。