前置き

コーディングをしていると、よく下記のような壁にぶつかります。
そんな時にやるべきことをまとめました。

• 何のCSSプロパティを使えばいいか分からない、どう勉強すればいいか分からない。
• CSSが反映されない、考えた通りのレイアウトにならない。
• 表示崩れの原因が分からない。

何のCSSプロパティを使えばいいか分からない、どう勉強すればいいか分からない。

①参考書を読む、学習サイトを利用する

まず何を使えばいいか分からない場合は、参考書や学習サイトを利用して基礎を学びましょう。

②検索エンジンで検索をする

使用例や参考ソースを気軽に探すことができます。
まとめ記事等でまずは簡単な知識を身につけ、参考書でより深く勉強していくと良いでしょう。
（検索例：「CSS 横並び」「CSS position 位置調整」）

③参考サイトを探す

自身がコーディングするレイアウトと似たレイアウトの参考サイトを見つけて、実際にどのようにコーディングされているか検証ツールで確認してみましょう。
検証ツール上でCSSプロパティを無効化・編集を行うことで、どのプロパティで何をやっているか実践的に学べます。

CSSが反映されない、考えた通りのレイアウトにならない。

チェックポイント

①CSSファイルが読み込まれているか確認
ファイルパスの確認。
ブラウザ上でソースを開き、CSSのURLをクリック後、CSSが表示されるか確認。

②CSSの優先順位の確認
「CSSファイルの読み込み順（headのlink）」と「ファイル内での記載順」は適切な順番か確認。（下にいくほど優先順位が上がります）
上書きする場合は、上書き対象であるクラスの優先順を確認。
「!important」が付いていたり、入れ子が複数されていると記述順に関わらず優先順位が上がります。）

③ベンダープレフィックスが不足していないか確認をする。
・Can I Useで各ブラウザの対応状況を確認。

④CSSプロパティに誤りがないか確認
スペルミスがないか検証ツールでエラーを確認。
CSSプロパティの使用用途と使用方法を確認し直す。

表示崩れの原因が分からない。

チェックポイント

①表示崩れが発生しているエリアを特定

検証ツールから表示崩れが発生している周辺のコンテンツを親タグから順番に削除していきます。
削除後に表示崩れが直る場合は、削除したコンテンツのHTML or CSSに何かしらの原因があります。

②表示崩れを起こしているHTMLを特定

ソースをW3Cでチェックして、エラーが発生していないか確認をします。

③表示崩れを起こしているCSSを特定

エリアを特定したら、検証ツールから1つずつCSSプロパティを無効化します。
無効化したタイミングで直ったプロパティに原因があります。

番外編：JavaScriptによる表示崩れ

稀にJSの影響で表示崩れを起こす場合があります。
HTML/CSS上では存在しないソースが検証ツール上で適用されている場合は、JSが動いていますのでJSの修正をしましょう。