こんにちは、かつコーチです。
「この余白をあと10pxだけ広げたらどう見えるか試したい」というとき、いちいちCSSファイルを編集して保存するのは手間です。
Elementsパネルを使えば、ブラウザ上で直接CSSを書き換えて確認できます。
結論：まずこれをやればいい
- 確認したい要素の上で右クリック →「検証」を選択
- Elementsパネルの右側に表示されるStylesペインでCSSプロパティを直接書き換える
- チェックボックスのON/OFFでプロパティの有効・無効も切り替えられる
書き換えた内容はページをリロードすると消えるので、あくまで確認用として気軽に試せます。
なぜそれで解決するのか（簡単な仕組みの補足）
Stylesペインで表示されているのは、実際に適用されているCSSのルールです。
ここで値を書き換えると、ブラウザの描画エンジンがその場で再計算してレイアウトに反映します。
実際のCSSファイルは変更されないので、失敗を恐れず何度でも試せるのが最大のメリットです。
「+」ボタンから新しいプロパティを追加することもでき、まだ書いていないCSSを試すのにも使えます。
あわせて知っておきたいこと（関連Tips・注意点）
Elementsパネルの左側にはHTML構造のツリーが表示されています。
要素をクリックすると、ページ上でその要素がハイライト表示されるので、「このdivがどこに対応しているか分からない」というときに便利です。
また、右下の「Computed」タブでは、最終的に適用されている値だけを一覧で確認できます。
複数のCSSルールが競合している場合の優先順位（詳細度）の確認にも役立ちます。
まとめ
- Stylesペインで直接CSSを書き換えて見た目を確認できる
- 変更は一時的なのでリロードすれば元に戻る
- Computedタブで最終的な適用値を確認できる
次は、Networkタブでページが遅い原因を調べるで読み込み速度の調査方法を見ていきましょう。
タグ: Chrome / 初心者向け / 実践Tips
コメント