Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (10)

2017年 08月 12日
Toolsの編集画面は以下のページをサンプルにしています。 実際にDevToolsを操作しながら読まれると、いっそう判り易いでしょう。



 〔 elements.style 項 〕 


 HTMLにstyleを書き込むのと等価 

DevToolsの右ウインドウの「Styles」タブの一番上にある「elements.style { }」は、余り出番がありません。 最初に1個だけ用意されたこのエリアは、他のCSS項と違う特殊な項です。

a0349576_20415582.png

この「elements.style」というセレクタが仮表示されていますが、実際のCSSのセレクタではありません。 ここでプロパティを指定すると、同時に左ウインドウのターゲットのHTMLに「style="プロパティ"」の形で書き込まれます。 その修飾は現在の「ターゲットにのみ」適応され、HTMLへ直接スタイルを書き込む「特殊」な環境です。

例えば、このページの本文に下図の様な行があり、「■終了させていただく…」の行は「b要素」です。

a0349576_20504725.png

普通にこの要素を「b」というセレクタのCSS項を作り修飾すれば、当然下の「■常時SSL化後も…」の行も修飾されます。 しかし、「elements.style」にプロパティを書けば、上図の様に下側の行には修飾が及びません。 CSSだけのアレンジ目的でDevToolsを使う場合、この機能の使い道は、セレクタは後で考える事にして、先ずプロパティをテストしたい場合に使うという程度に思えます。


 HTMLに埋め込まれたstyleを表示する 

下図は、このページの「リッチリンク」をターゲットに指定したところです。

a0349576_21104349.png

Toolsのターゲットにiframe要素を指定すると、右ウインドウの「elements.style」に、この要素に埋め込まれた「style="~"」の内容が表示されました。 CSSに記述されたスタイルではないので、ソースのリンク先が表示されません。 Toolsは、CSS由来でないスタイルがページ上にある場合に、ここに表示する仕組みの様です。

この場合に、右ウインドウの「elements.style」のプロパティを編集すると、ダイレクトにHtmlの記述が書換えられます。 この場合の変更はHTMLを編集対象にしているので、編集内容の情報は他のCSS項と扱いと別にする必要があります。(CSS項として扱えない)

いずれにせよ私は、この「elements.style」を使いません。 スキンアレンジ用途でDevToolsを使用する範囲では、特に必要がない様に思えます。



[PR]
by Ataron2 | 2017-08-12 21:53 | DevToolsを使ってみよう | Trackback | Comments(0)
トラックバックURL : http://ataron.exblog.jp/tb/237532519
トラックバックする(会員専用) [ヘルプ]
※このブログはトラックバック承認制を適用しています。 ブログの持ち主が承認するまでトラックバックは表示されません。
名前
URL
削除用パスワード

※このブログはコメント承認制を適用しています。ブログの持ち主が承認するまでコメントは表示されません。