超簡単!!YouTubeのタグ取得(YouTubeのAPIからタグを取得します)

cssが上手くいかない時のChromeのデベロッパーツールの使い方

cssが上手くいかない時のChromeのデベロッパーツールの使い方

cssでサイトを作っていると思ったものと違う結果になること多いです。

こんな時便利なのがChromeのデベロッパーツールです。

今回は、cssでサイトをコーディング中に上手くいかなかった場合利用している私のChromeのデベロッパーツールの利用方法をシェアします。

これを使いこなせると、cssのなぜ上手くいかないんだろう?

は全て解決します。

Chromeのデベロッパーツールを呼び出す

まず、デベロッパーツールを呼び出す方法です。

Chrome上で右クリック

Chromeでデベロッパーツールを呼び出す。

検証を押します。

ショートカットは「Ctrl + Shift + C」(MacはControl + Option + C)です。

すると、こんなものが出てきます。

デベロッパーツール 使い方

これは、下にでたり右に出たりします。

cssをやる時の私のおすすめは右です。

位置は右上の「・」が縦に3つ並んだボタンを押すと出現するこのメニューのDock sideで変更できます。

Chromeデベロッパーツール 出現位置を変更する。を

Chromeのデベロッパーツールでなぜcssが上手くいっていないかを探す。

では、上手くいっていない箇所を実際に探してみましょう。

Chromeのデベロッパーツール 。押すボタン

まず、赤く囲ったボタンをクリックします。

そして、webページ上にカーソルを持っていきます。

Chromeのデベロッパーツールを使ってcssを探す。

動かすとなんだかチカチカしますねw

これで、webページの要素を選択できます。

調べたい要素の上でクリックすると

(この例は「文の頭に空白を入れたいと思うこと、」をクリックしています)

クリックした箇所(今回は、「文の頭に空白を入れたいと思うこと、」を含んだ<p>要素)

のcssの情報が取得できます。

Chromeでヴェロッパーツール クリック後

 

さらに、カーソルを詳細情報のcssプロパティーの上に持って行くと

チェックボックスが出現

チェックボックスが出現

チェックボックスを押すと、そのcssプロパティーが消えます。

それは、Webサイト上にも反映されます。

デベロッパーツールで右側のcssプロパティーのチェックボックスをクリックすると消える

margin-top 20pxがなくなったことにより、

文と文との隙間がなくなりました。

この機能を使うことにより、

cssが上手くいかない時にどの要素が邪魔をしているかを突き止められます。

cssをChrome上で追加する

下の画像のここら辺をクリックという場所をクリックすると、

cssをChrome上で追加で入力できます。

cssを追加するためにクリックする場所

すると、margin-top 20pxの下に追加でcssを入力できます。

font-size:30pxを追加しました。

左の文章の文字がでかくなりました。

これで、どのcssを当てれば上手く行くか

Chrome上で確認が可能です。

こうやってサイト制作の際はChromeのデベロッパーツールを使っています。

慣れると相当便利です。

いかがでしたか? Chromeのデベロッパーツールを使って快適なサイト制作いかがだろうか?

Webサイト運営法!!カテゴリの最新記事