コラムColumn

Chromeのデベロッパーツールについて

はじめまして。
コーダー担当のkakeoです。

今回はWeb開発でよく使われているChromeのデベロッパーツールの一部の機能を紹介させていただきます。

コーディングをした後に、下の余白をもう少し大きくしたい、フォントサイズをもっと大きくしたい、レイアウトの微調整をしたい、など修正を求められることがあると思います。

通常ならcssファイルの値などを変更して、ブラウザ上で確認が普通かと思いますが、フォントをもう少し大きく、いやもう少し小さくなど、
「css記述 → 保存 → ブラウザ上で確認」
この一連の動作がとてもストレスを感じますが、このデベロッパーツールは直観的にデザインの確認ができます。

ツールの起動方法

ページを表示している状態で
以下のいずれかの方法でデベロッパーツールが起動されます。
・F12 キー(windowsの場合)
・Ctrl+Shift+I を押す
・ページ上を右クリックして「要素を検証」を選択

01

ページの変更したい所で「要素を検証」を選択すると「Elements」パネルで該当の箇所がハイライトされます。
と同時にその要素がどのようスタイル(css)になっているかも確認できます。
また、ルーペボタンを選び、ページ上の要素をクリックすると、そのクリックした場所がハイライトされます。

02

stylesパネルで直観的に修正

テキストの文字を中央寄せにしたい場合
※この例では

.jigyou li

要素の全てに対して、となっております

テキストの箇所を右クリックしてから「要素を検証」を選択

以下の図のように、liの要素対して、どのように設定してあるか確認出来ます。

 

color:#696969
font-size:130%
magin-left:30px

それでは、liの要素に対して

text-align:center;

を設定してみましょう。

※stylesパネルの対象の要素をクリックすると、cssプロパティが追加できるようになります。

03

入力することにより、テキストを中央寄せに変更出来ました。

04

いかがだったでしょうか。web制作している方なら皆さん既に使用していると思いますが、このツールを知らない初心者の方には
とても役に立つ情報だと思います。
私はこのツールを教えていただいたとき、なんて素晴らしいツールなんだと、本当に感動しました!
使っていただければ、この良さを分かっていただけると思います。

今回はこのツールの機能を一部しかお伝えしていませんが、他にも便利な使い方があるので、それは後ほどお伝えしたいと思っています。

CSS / コーディング / デベロッパーツール

執筆者:nagata

お問い合わせフォーム