【Web初心者必見】CSS が効かない時はこの7つを確認せよ！

こんにちは、管理人です。

今回は初心者必見シリーズ
【CSS編】です。

初心者必見シリーズ【CSS編】では、まだコーディングに不慣れな方がCSSでつまづきやすいポイントを解説するシリーズです。

この記事では【CSSが反映されないときにチェックすべきポイント】を紹介していきます。
ぜひ参考にしてください！

それではいきましょう！

CSSファイルをアップロードしているか？

単にCSSファイルをアップロードし忘れ

CSSを編集して保存しただけでアップロードを忘れるパターンですね。

SCSSだけ編集してCSSファイルをアップロードしていないというパターンもあります。

ここで、CSSファイルをアップロードし忘れているかどうかをすぐに確認できる方法をお伝えしましょう！

CSSが反映されているかどうかは、ChromeやSafari、Firefox、Microsoft Edgeなどのブラウザで確認されていると思いますが、サイトを表示しているその画面で

①右クリック を押して、「ソースを表示」（←この文言はブラウザによって異なります）をクリックすると、あなたがコーディングしているhtmlが表示されます。

②ここで、「Ctrl」キーを押しながら「F」キーを押すと検索ボックスのようなものが表示されます。
これは、そのページ内で何らかの文言が存在するかどうかを検索できる機能です。

③その検索ボックスに、あなたがコーディングしているCSSファイル名を入力してみましょう。
何件か検索に引っかかりましたか？
同じファイル名だけどファイルの場所が違うCSSファイルがヒットしたのだと思います。

④検索にヒットしたファイル名の中に、今あなたが編集中のCSSファイルがあるはずです。

見つからない場合は、
・検索している文言が間違っている
・htmlファイルでCSSファイルを読み込んでいるところでファイル名を書き間違えている
のどちらかなので一度見直してみましょう！

⑤編集中のCSSファイルが見つかったら、hrefのファイル名の文字が青くなっていると思います。
クリックできるリンクになっていますのでクリックしてみてください。

クリックして、CSSだけが書かれたページが表示されれば、そのCSSファイルはアップロードされているという証拠です。

CSSだけのページが表示されず、「404エラー」などが表示された場合はそのCSSファイルはアップロードされていないかもしれません。

もしくは、アップロードしているけどCSSを読み込む記述が間違っているかもしれませんね。
いま一度確認してみましょう！

これは初心者に限らず忘れてしまうことってあります。（笑）

そもそも、「アップロードって何？！（泣）」という方はHTMLやCSSを勉強し始めたばかりの方かもしれませんね。
今はわからなくても全然大丈夫！
まずはひとつひとつ、基礎から学んでいきましょう！(^^)

SCSSファイルだけアップロードしてcssファイルをアップロードし忘れ

初心者の方は「SCSSって何？！（汗）」と思うかもしれませんね。(^_^;)

SCSSは効率よくCSSを書くための言語です。

でも、言語と言っても書いている中身はCSSとほとんど変わりません。

ざっくりと使い方をお伝えすると、SCSSは「コンパイル」という処理をすることによってCSSファイルを生成することができるのです。

SCSSの使い方についてはまた別途記事にしようと思いますので一旦割愛しますね。

では、本題に戻りまして、SCSSを「コンパイル」して生成されるCSSファイルも一緒にサーバーにアップロードしておく必要があります。

なぜなら、

<link rel="stylesheet" href="style.scss">

といったように、SCSSファイルをCSSファイルのように読み込むことができないためです。

なので、

<link rel="stylesheet" href="style.css">

と書くようにしましょう。

SCSSファイルを読み込んでいる

SCSSについては一旦割愛させていただいて、、、

本題に戻りまして、SCSSの中身はCSSチックではありますが似て非なるものです。

（上での説明の繰り返しになりますが）つまり、htmlファイルで

<link rel='stylesheet' href='style.scss'>

と書いてもCSSは反映されないのです。

<link rel='stylesheet' href='style.css'>

と書かないといけません。

先程、ざっくりとSCSSの使い方をお伝えしましたが、SCSSをコンパイルして生成されたCSSファイルを

<link rel='stylesheet' href='style.css'>

といった形で読み込みましょう。

CSSを読み込む書き方は合っているか？

CSSを読み込み、表示側で装飾を反映させるにはCSSファイルをこのように読み込む必要があります。

<link rel="stylesheet" href="style.css">

（href 部分のファイルの場所の指定は、htmlファイルがある場所を始点にstyle.cssの場所を指定しましょう。）

いかがでしょうか？
今、あなたがコーディングしているhtmlファイルでのCSSの読み込みは正しい書き方で書かれていますか？

もしかしてこんな書き方をしてしまってはいませんか？
↓↓↓
NG例（というか過去に私がやっていたミス例です 笑）

<rink rel="stylesheet" href="style.css">

「rink」ではなく「link」と書きましょう。

<link rel="stylesheet" hlef="style.css">

「hlef」ではなく「href」ですね。

<link rel="stylesheet" href="styl.css">

ファイル名は「styl.css」であっていますか？
「style.css」ではありませんか？

どうでしょう？
いま一度、CSSの読み込み方を見直してみましょう！

CSSのファイル名やパスは合っているか？

この記事の上の方にある「CSSファイルをアップロードしているか？」でお伝えしたソースを確認する方法でファイル名やパスが合っているかは確認できると思います！(^^)

CSSファイル内の他の場所で書かれた装飾が反映されているのではないか

（準備中）

他のCSSファイルで上書きされていないか？

複数のCSSファイルを読み込んでいるページの場合は、今編集しているCSSの装飾が反映されない、ということが起こります。

なぜ、そんなことが起きるかというと、CSSは【後の方に書かれた装飾が適用される】というルールがあるためです。

例を出してみましょう。

• style_01.css
• style_02.css

で p タグに装飾を付けるCSSを書いていたとします。

こんな感じ↓↓↓

/* style_01.css */
p{font-size:12px;}

/* style_02.css */
p{font-size:16px;}

そして、それぞれのCSSファイルを読み込んでいる順番が、

1. style_01.css
2. style_02.css

だった場合、

style_02.css

に書かれた

p{font-size:16px;}

が適用されることになります。

このように、CSSが上書きされる形であとの方に書かれたCSSが適用されるんですね。

セレクタを間違えていないか？

（準備中）

まとめ

CSSを書いたのに全然反映されない、という初心者さんの声をよく聞きますし、私も昔はそうでした。

CSSが効かないのは必ず何かしらの理由があります。

今回、考えられる要因をいくつか挙げました。

これらを一つ一つ潰して原因を見つけましょう！

今回は以上です。

最後まで目をとうしていただいてありがとうございました！(^^)