コーディング効率化！ブラウザ開発ツールでリアルタイムに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プロパティを設定することも可能です。うまく組み合わせて効率的なコーディングを行いましょう！