相変わらず狭い話だが、PCブラウザの Chromeで「検証」と言う機能がある。画面を右クリックして表示されるメニューの一番下、あるいはキーボードショートカット「Shift ＋ Ctrl ＋ I」、或いはメニューの「デベロッパーツール」で、画面が分割されてそのページのスタイルシートなどの記述内容のチェックや、それらの値を変更した場合の結果を簡単に確認できる便利なツールで、私も時々お世話になっていた。このツールを使えばブラウザの動作がスタイルシートの記述の意図通りにならないときに、Chromeは実際に HTML／CSSをどのように解釈しているのかがチェックできるのだ。
ただし、静的な状態での確認は問題なかったが、このページの写真などの表示をマウスオーバー(マウスカーソルを載せる)で拡大してポップアップさせるような動的な表示の場合は(当然)マウスカーソルが表示域から出てしまうとその表示が戻ってしまうので単純には見れない・・・・と諦めていた。(無理してcssだけに頼らず、Javaなどの言語を使っても出来るが、CSSだけでこうした動的表示が出来るのが気に入って私は主にこの方法を愛用している)

しかし、このページの写真をマウスオーバーで拡大表示させようとしてハマってしまい、何とかマウスオーバーの状態の CSSを確認したいと Web上の情報を漁った結果、デベロッパーツールで動的な CSSが見れるようになった。
その方法は、まず冒頭の方法でデベロッパーツール(検証)を表示させたら、body以下のタグを順次開いて行って ①マウスオーバーのセレクタ部分を選択しておいてから、図のように②「Elements」＞③「Styles」＞④「hov」とクリックしていって⑤「hover」にチェックを付ける。こうするとブラウザ表示もスタイルシートのプロパティなどもマウスオーバーした状態になって確認できることがわかった。(図の例では class="popup" の要素(縮小した写真領域)にマウスオーバーしたときに、その下の<span> タグの中にある <img >要素(拡大した写真)がポップアップするので、この状態でポップアップ前後のセレクタの値をチェック出来る。cssファイルと htmlファイルの文字コードが違っていたので font-family が文字化けしているが愛嬌！)
まだ使い慣れていないので、親要素からの継承などの影響が理解できずに解析に若干時間が掛かるが、何とか意図した通りの写真の拡大表示が出来るようになった。(上または左の写真にマウスカーソルを重ねると写真が拡大表示されるハズ)

---

今日の写真は毎朝通る道の脇の花壇の花。スカシユリだろうか？　朝見たときは「赤い花だな」くらいにしか思わなかったが、帰り道　暗くなって歩いていたら低い街灯の横からの光を透かして蠱惑的に咲いていた。(撮った写真を見て思った。どこか夜の店でこんな配色のドレスを見たような？ >>>はるか昔の話)