前回の記事まで模写コーディングを紹介してきましたが、実際コーディングしていく中で思い通りの見た目にならない！という事が必ずあります。
そんな時はブラウザ上のデベロッパーツールでコードの確認をしましょう！
今回はChromeでのデベロッパーツールをよく使う昨日に絞り紹介します！
概ね他のブラウザでも同様のことが出来るので、Chrome以外のブラウザを使用している方もご参考ください！
デベロッパーツールの立ち上げ
デベロッパーツールを使用したいWEBサイトを開いた状態で、F12にてデベロッパーツールが開きます。
(概ねChrome以外のブラウザでもF12で開くハズです)
下の図のようにブラウザの画面内にデベロッパーツールが表示されます。
図の場合、ブラウザ内の右側にデベロッパーツールが表示されていますが、このままだとページ幅が圧迫されて表示が崩れてしまい、実装に支障があるかもしれません。
デベロッパーツールの表示位置を変更したい場合、ツールの右上にある三点リーダーをクリックすると下のようなメニューが表示されます。
表示位置を変更するにはこのアイコンのいずれかをクリックします。
左から別ウィンドウでのフロート表示、左側固定、下固定、右側固定となっています。
デベロッパーツールの見方
デベロッパーツールは次の各タブから構成されます。
※ツールの表示位置によりタブの位置は変わるかもしれません
要素タブ
要素タブではコーディングしたHTML要素が表示されます。
要素が折りたたまれている場合は、要素の左端の▶をクリックすると展開できます。
スタイルタブ
スタイルタブでは、要素タブで選択した要素に指定されているCSSが表示されます。
ここがコーディング作業時に最も使用します。
指定されているスタイルはセレクタ毎に表示され、上から詳細度の高い順で並んでいます。
計算済みタブ
計算済みタブでは選択した要素の、width、height、margin、paddingが視覚的に表示されます。
また、下部に選択した要素に指定されているプロパティが一括表示されます。
コンソールタブ
WEB制作ではそこまで頻繁には使いませんが、後程jQueryを実装する際、エラー情報などを確認する為に使用します。
要素を選択する
調べたい要素を選択するには、デベロッパーツールを立ち上げた状態で、セレクトモードを使用します。
ツール左上のマウスカーソルのアイコンをクリックすると、アイコンが青色表示になりセレクトモードになります。
セレクトモードで表示されている要素にカーソルをかざすと、padding、marginが図のように色付きで表示されたり、要素の詳細が表示されます。
セレクトモードで要素をクリックすると、要素の選択が完了します。要素タブでも選択した要素がハイライトされます。
要素の選択が完了すると、スタイルタブに該当要素のスタイルが表示されます。
他にも調べたい要素を右クリックして、"検証"を選択する方法や...
要素タブ上で直接要素を選択する方法があります。
ページを仮編集する
デベロッパーツール上で、一時的に要素やスタイルを変更して確認することができます。
もちろん、元のファイルが編集される訳ではありません。
要素の仮編集
要素タブ上にて、編集したい箇所をダブルクリックすると要素を編集することが出来ます。
他にも、要素を複製することも出来ます。
複製したい要素を右クリックし、複製を選択します。
フレックスの動作を確認するために、アイテムを増やしたい時に便利です。
スタイルの仮編集
スタイルタブにて、プロパティやその値を編集したい箇所をクリックすると、スタイルの編集をすることができます。
余白の部分をクリックすると新たなプロパティを指定することが出来ます。
1番上にあるelement.styleはインラインスタイルになります。
詳細度がもっとも高いので、実装中にどうしても意図したスタイルにならない時はここでプロパティを指定してみるといいでしょう。
プロパティの左にあるチェックボックスをクリックすると、簡単にプロパティを解除したり、適用することができます。
プロパティの値に数値をしていするものは、マウスのホイールや、上下キーで簡単に変更することができます。結構便利な機能なのでオススメです。
要素の状態(hover等)を強制的に適用する
要素に対して:hoverや:active等の状態を適用します。
特に:hover疑似要素で指定したスタイルがちゃんと適用されているか確認したい時は便利です。
要素を選択した状態で、:hovアイコンをクリックし、適用したい状態にチェックを入れます。
要素に新しいクラスを追加
要素を選択した状態で、.clsアイコンをクリックし、表示された入力欄に適用したい既存のクラス名を入力します。
デバイスモード
デバイスモードは、ブラウザ上で、画面サイズの異なる他の端末でのwebサイトの表示を確認できる機能です。
レスポンシブ対応時には必須の機能です。
レスポンシブ化の方法はまだ紹介していませんが、このデバイスモードを使って、どの画面幅でも表示が崩れないように仕上げる必要があります。
ツール左上のスマホのようなアイコンをクリックすると、アイコンが青色になり、デバイスモードになります。
デバイスモードで、画面上部のバーをクリックすると、ページの表示幅が変化します。
スマホサイズの表示にしたり…
ワイド画面のPC表示にしたりできます。
また、画面右側にあるハンドルをドラッグすると、下のように自由に幅を設定することができます。
実際の使用例
思い通りのスタイルにならない場合は、主に
- セレクタに誤りがある
- プロパティ、値の指定方法に誤りがある
- プロパティが上書きされている
- 他のセレクタで余計なプロパティを指定をしてしまっている
などが考えられます。
セレクタに誤りがある場合は、要素を選択しても、そもそもその要素に対し記述したCSSがスタイルタブに表示されません。
セレクタにタイプミスが無いかを見直しましょう。
プロパティや値の指定に誤りがある場合は下のように取り消し線と、!アイコン付きで表示され、アイコンにカーソルをかざすとツールチップが表示されます。
この場合はbackgrond-colorと、uが抜けてしまっています。
これも、タイプミスが無いか、または指定できない値を指定してないかなどをチェックしましょう。
他のプロパティと競合してしまう場合は、下のようにプロパティが取り消し線のみ付いた状態で表示されます。
原因として、詳細度が低かったり、カスケードで上書きされる等パターンが色々あります。セレクタの書き方を見直す・CSSの記述順を見直す等の対応が必要になります。
また、スタイルタブのelement.styleは詳細度がもっとも高いので、一度ここでプロパティを指定してみるといいでしょう。ここで指定してプロパティが反映されない場合は書き方に誤りがある可能性が高いです。
他のセレクタで余計なプロパティを指定をしてしまっている場合は、スタイルタブで他のセレクタのプロパティで、怪しそうなものを探してきましょう。
怪しいものはプロパティの左のチェックを外すなどしてしらみつぶしに探していきます。
下のgifは、.title2に指定したスタイル以外に、他の.service_ttlから余計なスタイルを指定されているものを探す例です。
※.title2では要素の幅をデフォルトのまま親要素の幅いっぱいにするつもりが、.service_ttlからdisplay: inline-block;されている為、幅が小さくなってしまっている
まとめ
デベロッパーツールを上手に使いこなして、爆速コーディングを目指しましょう！！
次の記事 前回までの記事で模写したサイトを例に、レスポンシブ対応について紹介します！
