ATOMでCSSが適用されない時の確認の仕方【CSS編】

こんにちは、ユキです。

新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子

ATOMにCSSが反映されないんだけどなんで？

ユキ

CSSの記述方法が間違っているのかもしれないよ

結論から言うと、ATOMだからCSSが反映されないということはありません。

反映されない理由としては主に、

1. CSS適用の記述方法が間違っている
2. ブラウザにキャッシュとして保存されている

この二つが考えられます。

どちらもよく陥りやすい問題です。

CSSが反映しなくても焦らずに落ち着いて対処していきましょう。

エラーはエンジニアにとって一生付き添っていくものなのですから、、、。

フェーズ1： CSSの呼び出し方法

1.1 headタグ内にlinkタグを追加する

headタグ内に以下のコードを記述するとCSSを適用できるようになります。

<link rel="stylesheet" type="text/css" href="(CSSファイルのパス)">

CSSファイルをHTMLファイルとは別に作成します。

呼び出す時は、HTMLのheadタグ内に linkタグを記述して、外部CSSファイルのパスを指定します。

適用されるスタイルがCSSによるものであることをブラウザに知らせるために、のtype属性の値にはtext/cssを指定します。

修正のしやすさの点からこの方法でCSSを適用するのがおすすめです。

1.2 styleタグで追加する

headタグ内にstyleタグを記述します。

<style type="text/css">
〜
</style>

HTMLのheadタグ内にstyleタグを記述して、HTML文書ごとにCSSを追加します。

適用されるスタイルがCSSによるものであることをブラウザに知らせるためにこちらもstyleタグのtype属性の値にはtext/cssを指定します。

短いCSSであればこの方法でもいいと思いますが、たくさんCSSを書くことになると冗長なコードになってしまうためおすすめはしません。

1.3 要素にstyle属性を追加する

要素ごとにCSSを適用します。

<p style="color:aqua;">雪</p>

要素に直接style属性を追加する方法です。

style属性を追加する場合には、 文書内で使用されるスタイルシートがCSSによるものであることをブラウザに知らせるために、 headタグ内にmetaタグを記述してスタイル言語の値にtext/cssを指定します。

<meta name="Content-Style-Type" content="text/css">

このコードを書かなくても多くの場合は問題なく動きますが、誤動作を防ぐためのおまじないだと思って必ず記述するようにしてください。

この適用方法は、この要素だけデザインを上書きしたいという場合には役立ちますがあまりおすすめはしません。

コードが煩雑になり修正に手間がかかるので、できるだけ1.1の外部ファイルに記述する方法で適用しましょう。

フェーズ２： CSS適用の記述が間違っている

2.1 headタグに記述するCSSの呼び出しが間違っている

「1.1 headタグ内にlinkタグを追加する」でも紹介した、

<link rel="stylesheet" type="text/css" href="(CSSファイルのパス)">

この記述が間違っている可能性があります。

これはheadタグ内に記述しないと効果がありません。確認しましょう。

誤字による間違いかもしれませんので、このコードをコピーしてCSSファイルのパスを変更してみましょう。

2.2 CSSファイルの保存先が間違っている

ディレクトリパスが間違っている可能性があります。

CSSが思いがけないところに保存されていないか、「../style.css」などの階層は本当にここであっているかなどを確認しましょう。

「style.css」が「styke.css」になっているという場合もあります。誤字による間違いではないか必ず確認しましょう。

私はこれで1時間悩みました…。

2.3 HTML内に直接記述の場合タグ内にコードが入っているか

HTML内に直接記述する場合headタグ内にコードが収まっていない可能性があります。

よくある間違いとしては、

• 末尾のタグの</head>がない
• headタグからはみ出している

などがあります。

自分のコードをもう一度確認する癖をつけましょう。

フェーズ３： ブラウザにキャッシュとして保存されている

3.1 ブラウザのキャッシュを削除

ブラウザにキャッシュとして保存されていると古いスタイルが反映されてしまいます。

ブラウザにはページを早く表示させるためにキャッシュ機能がついています。

一度ブラウザに読み込まれたスタイルシートは、ブラウザにキャッシュとして保存されてしまいます。

このキャッシュを更新することで問題が解決する場合があります。

ちなみに私もこの問題は何度も起こったことがあります…。

キャッシュの更新方法は以下の通りです。(ブラウザ：Chrome, デバイス：Macの場合)

1. パソコンでブラウザを開きます。
2. 画面右上の「三つ点が並んでいるマーク」をクリックします。
3. 「設定」を選びます。
4. 「セキュリティーとプライバシー」を選びます。
5. 「閲覧履歴データの削除」を選びます。
6. 「Cookie と他のサイトデータ」と「キャッシュされた画像とファイル」の横にあるチェックボックスをオンにします。
7. 「データを消去」をクリックします。

この手順でキャッシュが更新されて新しいCSSが適用されます。

コードを見てもおかしいところはないなと思った時に試してみてください。

3.2 スーパーリロード

スーパリロードとは「キャッシュの読み込みをさせずにページを表示する」方法です。

キャッシュの削除をするのを毎度やるのは手間なので、簡単にできるスーパーリロードをやる方法をおすすめします。

キーひとつでできるので簡単に確認することができます。

「3.1のブラウザのキャッシュを削除」よりもすぐにできるので試してみましょう。

まとめ

今回はATOMでCSSが適用されない時の確認の仕方について解説しました。

結論、ATOMだからCSSが反映されないということはありません。

何かしらの原因が必ずあります。

今回はCSS適用の記述が間違っていたり、ブラウザにキャッシュが残っている可能性を例に出しましたが、そもそもCSSをコーディングする上で間違っているのかもしれません。

落ち着いてエラー箇所を発見して慣れていきましょう。

エンジニアにとってエラーは切っても切れないものです。

エラーと友達になっていいエンジニア生活を送ってください。

プログラミングを学習するうえでプログラミングスクールに通うという選択肢もあります。

「RUNTEQのプログラミングスクール」では無料相談を行なっています。

自分のプログラミングに関する悩みや今回のエラーのことなどを気軽に打ち明けてみてください。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよかったらフォローしてください。

以上、ユキでした！