1. TOPTOP
  2. Webサービス
  3. Google

Chrome Developer ToolsのElementパネルからdiv要素を直接操作するとレイアウトが変わった!

|

Browser

今回は、WordPressの公式テーマを、自分好みにカスタマイズしようかと考えているときに発見したTipsです。公式テーマのstyle.cssを変更したくて、Chrome Developer Tools(新しいタブで開く)をごにょごにょ触っているときに発見しました。

DOMは指定して移動ができる

私の場合、ナビゲーションバーを変えたら、レイアウトがどうなるかを見たかったので、Elementパネルから該当するdiv要素をクリック。
(画像の赤枠で囲っているdiv要素をクリックすると、画面上で青枠部分が指定される)

1

そのままドラッグアンドドロップで、自分の好きな位置にdiv要素を移します。するとレイアウト上でもナビゲーションバーが移動していることが分かります。
(赤枠で囲っているdiv要素を移動させることでナビゲーションバーも一緒に移動)

2

DOMが書き換わっているだけなので、リロードすれば、元の画面に戻ってしまいます。実際の画面に反映させたければ、wp-contentのphpファイルを変更させます(今回の場合はheader.php)。

ドットインストールのレッスンにもありました!

今回の記事を書いてみて、Developer Toolsの用語とかを調べていたら、ドットインストールのレッスン(新しいタブで開く)でも説明されていましたね。

動画の例では、p要素を上下に移動させているようです。(1:24ごろ)Developer Toolsには、他にも便利そうな機能がありそうなので、他のレッスンを受けてみますか!

〔参考サイト〕