ちょっとした依頼で HPのリニューアル作業をやっていて発見！
以前からIEや Chromeというブラウザに HTMLコードをチェックするコンテキストメニュー（右クリックで表示されるメニュー）がある事は知っていた。Chromeで言うと「ページのソースを表示」「要素を検証」というメニューだ。　「ソースを表示」の方は別タブが開いてそのページの HTMLソースが表示されるので、気になるデザインやレイアウトなどのページをチェックにする時に参考になる。或いは画像やメディアファイル等の不正利用対策で右クリックを禁止しているページの画像ファイル名などをチェックする場合にも役立つが。こちらは今までもたまに使っていた。しかし「要素を検証」の方は昔１～２度見ただけでその後あまり気にしなかったが、数日前に自分で書いたコードの表示が エディタのプレビューと Chromeでかなり違うので「もしかして」と思って開いて見た。
結果、昔理解していたのよりも随分と進化していることに気付いた。例えば、知りたい要素の部分にカーソルを持って行って右クリックで「要素を検証」をクリックするとその要素のタグの部分が画面下に展開表示されるが、その親となっている要素が何なのか一目して分かるし、更に表示された <table>タグの所にカーソルを持って行った時、対応の表がグレーに変わって対応が分かるが、更に左の▼をクリックするとその下の <tr>タグが表示され、更にその左の▼をクリックすると <td>タグが表示され、その上にカーソルを載せると対応のセルだけがグレーアウトして、その下にセルサイズがポップアップ表示される。しかも画面右側にはそのタグを修飾している cssスタイルコードが逐一表示される（親タグのスタイルも含めて）。　ここに表示されるセルサイズ等は、コードで記述したセルサイズではなく Chromeが理解している実サイズが表示される。つまりサイズの設定が ％設定だったり、ピクセル(px)単位の設定でも設置値より大きな画像やテキストを表示させるとセルのサイズは自動的に増えるような場合に、実際に ブラウザで今表示されているサイズが表示される。例えば上の画像の場合、コードの設定では height="80px"と設定しているが実際の表示は "104px"となっているのが分かる。
更にここで右欄の「Style」タブを「Computed」タブに切り替えると 要素のサイズ／borderサイズ／余白サイズなどが図で表示されて正しく＜一目瞭然！＞感動してしまった。これによって表示させる要素のサイズなどと設定値がミスマッチしていた場合それに気づけるので（私のようにそそっかしい人間には）かなり役にたつ。
表示に影響するスタイルの記述も<header>部分の記述と外部 cssファイルの記述のどちらでもこの「Style」タブに表示され外部 cssファイルならファイル名も表示されるので、位置の設定等　文字装飾が影響している記述をチェックするのに役立つし、極め付きはこの設定値の部分をクリックするとそこが編集可能になる（もちろんサーバー上のファイルに手を付けられるわけはないのでクライアントマシンにダウンロードされたコードを変更しているだけの話だが）。
例えばこの図のように border-width:4px; border-color:red; などと変更し、右上の「＋」ボタンを押して新しい要素　td{ background-color: aqua;}を追加すると対応のセルの枠線とバックグランドの色表示が変わる。他人のページがどんなスタイルセレクタで記述されて、それを一部変更すると表示がどう変わるか簡単に試すことも出来るが、そんなことよりまずは自分の書いたコードを Chromeで表示させてみて、問題あればエディタで変更する前にここで変更してチェックしてみるという手もありそうだ。
或いはほぼ同じ機能ながらコンテキストメニューではなくショートカットキーで呼び出す DOMインスペクタモードと言うのがあって（HTMLの要素ごとに解析できる）「Ctrl + Shift + C」で開く。
これまで全てを HTMLエディタで賄おうとアクセクしてきたが、ブラウザの種類によって表示が異なる場合、其々のブラウザで同じチェックを行えばより原因の早期発見に役立ちそうだ。IE11や FireFoxにもほぼ同様の機能がある。こんな便利な機能を見逃していたなんて！
参考になる　より詳しい使い方のページ

---

今日の写真は山吹の花。「山吹色」という色表現があるが「黄色」では言い表せない正しくその色だ。