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

browser

HTML、CSSをコーディングするとき、「思ったようなレイアウトにならない!」「ブラウザとエディタの往復がめんどくさい!」って思ったことありませんか?

そんなときはブラウザ標準の開発ツール(デベロッパーツール)で直接編集しちゃいましょう。ブラウザ標準なのでめんどうな環境構築、ツールの追加は不要です!

ブラウザ上で編集することで、リアルタイムに編集内容が反映されます。かなり効率的にコーディングすることが可能です。本物のHTML、CSSファイルには影響ないのでめちゃくちゃになっても安心です。

本記事ではFirefoxを使って説明します。GoogleChromeでもほとんど同じ要領でできます。

スポンサーリンク

開発ツール(デベロッパーツール)の起動

いろいろ方法はあるのですが、おすすめはブラウザで編集したい範囲で右クリックです。実行すると、その範囲にフォーカスされた状態で開発ツールが起動します。

起動している状態でも同様の操作で、同じ効果が得られます。

開発ツールの基本的な使い方

開発ツールにはいくつかの機能があります。機能ごとにタブが分かれてるので、必要なタブをクリックして切り替えてください。

devtool

開発ツール自体の表示位置を変更できます。

  • ブラウザ内の右側
  • ブラウザ内の下側
  • 独立したウィンドウ

本記事ではブラウザ内の下側に表示した状態で説明します。

よく使うタブ(機能)

以下の機能をよく使います。

  • インスペクタ(HTML、CSSの編集)
  • コンソール(JavaScriptのログ確認)
  • ネットワーク(クッキー、パラメータ、ajax確認など)

本記事では、インスペクタを取り扱います。

CSSの編集方法

CSSを編集する方法です。

  • CSSプロパティのON,OFF
  • CSSの編集
  • CSSプロパティの追加
  • 新しいCSSの追加

などができます。

開発ツールのインスペクタで編集したいHTMLを選択し、右側のルールタブにて編集できます。

サイト上の編集したい箇所で右クリックし、[要素を調査]をクリックします。開発ツールが開き、インスペクタタブが選択された状態になります。ルールを編集することで即座に適用されます。(実際のCSSファイルは編集されないので安心してください)

では実際に編集していきましょう。すべてルールタブにて操作します。

CSSの付け外し

CSS左横のチェックボックスでCSS適用をON、OFFできます。例では、右サイドバーの[人気記事]のスタイルを調整しています。

ここからの各画像はクリックするたびに再生、停止します。

coding_ef_1_start

CSSの編集

CSSプロパティをダブルクリックすることで編集できます。

coding_ef_2_start

CSSプロパティの追加

CSSの空いているところをクリックすると、新規プロパティが追加できます。

coding_ef_3_start

新しいCSSの追加

要素やcssクラスを追加できます。右の方にある+ボタンをクリックすることで追加できます。

coding_ef_4_start

CSSボックスモデルの確認

CSS編集ではないのですが、便利な機能です。ボックスモデルタブの説明です。

要素のmargin,border,padding,要素自体の幅と高さが視覚的に確認できます。margin、paddingが意図したサイズになっているか、高さがあるかなど確認するときに使います。

HTMLの編集方法

HTMLの編集はインスペクタタブの左側で行います。

  • タグ、クラス、テキストの編集
  • HTML全体の編集
  • HTMLの移動

などができます。

タグ、クラス、テキストの編集

要素をダブルクリックで編集できます。

coding_ef_5_start

HTML全体の編集

要素を右クリック − HTMLとして編集を選択します。編集し、枠外をクリックすることで反映されます。

coding_ef_6_start

HTMLの移動

要素をドラッグすることで移動できます。

coding_ef_7_start

まとめ

いかがでしょうか。リアルタイムで編集することで、試行錯誤を効率的に行えます。編集してうまくできたらコピペで実際のCSSファイルなどに反映させましょう。 HTMLの編集でCSSクラスを追加し、その追加したクラスに対して新しいCSSプロパティを設定することも可能です。うまく組み合わせて効率的なコーディングを行いましょう!

スポンサーリンク

この記事が気に入っていただけたらシェアお願いします。励みになります。
prev WordPressのReally Simple CSV Importerを使って固定ページをインポートする方法 next Googleタグマネージャでクリックイベントを計測する3つの方法

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です