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