コーディング効率化!ブラウザ開発ツールでリアルタイムにHTML、CSSを編集する方法

HTML、CSSをコーディングするとき、「思ったようなレイアウトにならない!」「ブラウザとエディタの往復がめんどくさい!」って思ったことありませんか?
そんなときはブラウザ標準の開発ツール(デベロッパーツール)で直接編集しちゃいましょう。ブラウザ標準なのでめんどうな環境構築、ツールの追加は不要です!
ブラウザ上で編集することで、リアルタイムに編集内容が反映されます。かなり効率的にコーディングすることが可能です。本物のHTML、CSSファイルには影響ないのでめちゃくちゃになっても安心です。
本記事ではFirefoxを使って説明します。GoogleChromeでもほとんど同じ要領でできます。
開発ツール(デベロッパーツール)の起動
いろいろ方法はあるのですが、おすすめはブラウザで編集したい範囲で右クリックです。実行すると、その範囲にフォーカスされた状態で開発ツールが起動します。
起動している状態でも同様の操作で、同じ効果が得られます。
開発ツールの基本的な使い方
開発ツールにはいくつかの機能があります。機能ごとにタブが分かれてるので、必要なタブをクリックして切り替えてください。
開発ツール自体の表示位置を変更できます。
- ブラウザ内の右側
- ブラウザ内の下側
- 独立したウィンドウ
本記事ではブラウザ内の下側に表示した状態で説明します。
よく使うタブ(機能)
以下の機能をよく使います。
- インスペクタ(HTML、CSSの編集)
- コンソール(JavaScriptのログ確認)
- ネットワーク(クッキー、パラメータ、ajax確認など)
本記事では、インスペクタを取り扱います。
CSSの編集方法
CSSを編集する方法です。
- CSSプロパティのON,OFF
- CSSの編集
- CSSプロパティの追加
- 新しいCSSの追加
などができます。
開発ツールのインスペクタで編集したいHTMLを選択し、右側のルールタブにて編集できます。
サイト上の編集したい箇所で右クリックし、[要素を調査]をクリックします。開発ツールが開き、インスペクタタブが選択された状態になります。ルールを編集することで即座に適用されます。(実際のCSSファイルは編集されないので安心してください)
では実際に編集していきましょう。すべてルールタブにて操作します。
CSSの付け外し
CSS左横のチェックボックスでCSS適用をON、OFFできます。例では、右サイドバーの[人気記事]のスタイルを調整しています。
ここからの各画像はクリックするたびに再生、停止します。
CSSの編集
CSSプロパティをダブルクリックすることで編集できます。
CSSプロパティの追加
CSSの空いているところをクリックすると、新規プロパティが追加できます。
新しいCSSの追加
要素やcssクラスを追加できます。右の方にある+ボタンをクリックすることで追加できます。
CSSボックスモデルの確認
CSS編集ではないのですが、便利な機能です。ボックスモデルタブの説明です。
要素のmargin,border,padding,要素自体の幅と高さが視覚的に確認できます。margin、paddingが意図したサイズになっているか、高さがあるかなど確認するときに使います。
HTMLの編集方法
HTMLの編集はインスペクタタブの左側で行います。
- タグ、クラス、テキストの編集
- HTML全体の編集
- HTMLの移動
などができます。
タグ、クラス、テキストの編集
要素をダブルクリックで編集できます。
HTML全体の編集
要素を右クリック − HTMLとして編集を選択します。編集し、枠外をクリックすることで反映されます。
HTMLの移動
要素をドラッグすることで移動できます。
まとめ
いかがでしょうか。リアルタイムで編集することで、試行錯誤を効率的に行えます。編集してうまくできたらコピペで実際のCSSファイルなどに反映させましょう。 HTMLの編集でCSSクラスを追加し、その追加したクラスに対して新しいCSSプロパティを設定することも可能です。うまく組み合わせて効率的なコーディングを行いましょう!