Chrome Developer Tools の使い方 01 – Elements パネルを使ってみよう!!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

次回は Elements パネルの使い方についてです.

VIDEO

チュートリアルムービー

EXPLANATION

動画解説中にタイプしてたテキストです.

Chrome Developer Tools の使い方

Element パネルを使ってみよう!!

私のブログのコードを晒してみます.
HTML コードが表示されていますね.

下にタグの階層が表示されています.
開始位置にしたいタグをダブルクリックすると
そこからの内容を表示することができます.

ブログとかになってくるとタグがネストしまくっていてわかりにくかたりするので
そんなときに便利ですね. ちなみにダブルクリックで編集です.

続いてスタイルを編集してみましょう.
HTML コードの横に選択した要素のスタイルが表示されます.

ここでスタイルの on/off や追加, 削除などが行えます.

直接ファイルの内容が書き変わっているわけではないので
更新すると元に戻ります.

Elements パネルで確認, 調整をして良い感じになったら
ファイルに反映させるっといった流れで使いましょう♪

以上, ありがとうございました.

TIPS

HTML の表示開始位置を変更する

Elements パネル下部にある 階層タグをダブルクリックすることで, そのタグから表示することができます.

講座サイトやブログといったタグがネストするようなサイトの場合に活用すると便利です.

HTML のリアルタイム編集

大抵, ダブルクリックで編集モードになります. タグ名, 属性, innerHTML それぞれ個別にダブルクリック編集可能なので, 安全に編集できます.

Style をリアルタイム編集

選択したタグ要素のスタイルは, 右側にある スタイルパネルで編集できます.

プロパティの on/off プロパティにマウスを乗せると右側にチェックボックスが出ます. ここで on/off できます.
プロパティの編集 編集したいプロパティをダブルクリックすると編集モードに切り替わります. そので編集したプロパティ名やプロパティ値はリアルタイムで反映されます
プロパティの追加 プロパティを追加したいセレクタの下の方をクリックするとプロパティを追加できます. あとはプロパティの編集同様リアルタイムで反映されます.
プロパティの削除 プロパティ編集モードにして名前を全削除するとプロパティを消すことができます.

プロパティ値編集時は, Arrow Keys の上下で文字列候補と数値の, インクリメント, デクリメントができます. また数値の場合, Shift キーを押しながらだと 10, Alt キーを押しながらだと 0.1 ずつ変更できます.

次回は Scripts パネルの使い方についてです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT