人気ブログランキング | 話題のタグを見る
Studio TA Subsite の案内とお知らせ

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除

2017年 08月 12日
DevToolsの右ウインドウでの編集に慣れて来ると、間違い記入で放棄したり無効化したプロパティや、余計に作ってしまったCSS項などが多くなりがちです。 不要プロパティは、行頭のチェックボックスをOFFにして放置で良いのですが、編集結果の書き出しをする時などは、綺麗に整理してからコピーしたい場合もあります。

ここでは、それら不要な編集ゴミの「削除の方法」をまとめます。

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



 〔プロパティ行の削除〕 

下図は、元には無いCSS項を作り、プロパティを幾つか書き込んで編集している所です。

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除_a0349576_11513888.png

編集中のCSS項の右上「inspector-stylesheet:1」の表示は、Toolsによって書き込んだ「調査のスタイルシート」である事を示しています。 それに対して下のCSS項は「a01294 01…」で、これはサイト側のデフォルトのスタイルシートです。

さて、上図のの不要なプロパティを消す事にします。 これは、手順を問わず、「プロパティ名」(行の左側)をクリアーすれば完了ですが、下のキーボードによる操作が素早くできます。 最初の一手だけマウス操作が早そうですが、後は好きなキーの組み合わせで覚えると、気分良く作業出来ます。

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除_a0349576_12061205.png

私は、「Back Space」「Enter」「Esc」を使っています。 キー操作の便利さを試して見てください。



 〔CSS項の削除〕 

下図は「New Style Rule」を乱発して不要なCSS項が出来た状態です。 試すと判りますが、CSS項のセレクタは元に戻ってしまい削除ができません。

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除_a0349576_12212899.png

CSS項を削除するには、各項の右上の「スタイルシートへのリンク」をクリックします。(Toolsの「Elements」のタブ画面は編集インターフェイスで、スタイルシート本体は「Sources」の側にあるという構成です)

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除_a0349576_12284776.png

Toolsは「Elements」から「Sources」のタブ画面に表示が切り替わります。

Chrome DevTools を使ってみよう (9) プロパティやCSS項の削除_a0349576_12325795.png

右ウインドウに ❸❹の不要CSSのコードが表示されています。 もしコードが改行のない一列表示の場合は、左下の「{}」マークを押すと、見易い表示に切り替わります。

このタブ画面は「ソースウインドウ」で、サイト側のデフォルトCSSも表示可能です。 ウインドウ内は、普通のエディターの様に編集が出来ます。 ここで不要なCSS項のコードを削除すると、「Elements」画面の表示も消えます。 このタブ画面での編集が終わったら、最上段の「Elements」を押して Toolsのメイン画面に戻ります。


 注意 

サイト側のプロパティやCSS項も、Toolsの書き込んだものと同様に削除や編集が可能で、その変化を観測する事が出来ます。 Toolsは仮想の編集環境ですから、ページをリロードすれば、デフォルトの状態に戻ります。




この記事はカテゴリ「スキン編集」にトラックパックしています。



by Ataron | 2017-08-12 13:17 | ブログスキンのアレンジ | Trackback | Comments(0)
名前
URL
削除用パスワード

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