PR

CSSの適用方法3パターン!上手く適用されない場合の対処法も!

WEB制作技術系

「CSSの適用方法ってどんなパターンがあるのかな?」

あなたは、いくつ思いつきますか?

実は、主に3つのパターンが存在します。今回は、3つのパターンをご紹介するとともに、上手く適用されない場合の対処法についても解説します。

お助け猫
お助け猫

今回の記事は、次のような方にお勧め!

・CSSの適用方法について知りたい

・CSSが上手く適用されなくて困っている

CSSの適用方法のご紹介

では、3つの適用パターンを順番に解説していきます。

CSSファイルを読み込ませる

HTMLファイルとは別にCSSファイルを作成して読み込ませる方法です。CSSファイルを読み込むには、下記コードを<head> ~ </head>の中に記述します。

<link rel="stylesheet" href="パス">
お助け猫
お助け猫

殆どのWEB制作の現場では、このCSSファイルを読み込ませる方法が使われています。

styleタグを使用する

こちらは、CSSをHTMLに直接書きたい時に使用します。基本的には、ごく短い、他のページでは使われないCSSを追加する場合に使用します。<style>タグは、必ず<head> ~ </head>タグの中に記述します。

<style>
  .text {
    color: red;
    font-size: 18px;
  }
</style>

こちらの指定方法は滅多に使わない印象です。

style属性を使用する(非推奨)

こちらは、タグに直接CSSを記述したい時に使います。style属性は、どんなタグにも追加ができます。

<p style="color:red; font-size:18px;"></p>

便利そうな指定方法ですが、どこにCSSを書いたか分かりづらくなる上に、HTMLコードをごちゃつかせる為、更新作業の面でお勧めは出来ません。使い方にはご注意いただければと思います。

・CSSの適用パターンは、3種類ある!
・styleタグ、style属性は滅多に使う機会がない

CSSが上手く適用されない場合の対処法

お悩みさん
お悩みさん

色々やり方があるのは分かったけど、そもそも上手く適用されない・・

これ、初期の頃私もよくありました。

ただ、今となっては、ある程度の原因は下記3パターンです。

ファイルが読み込まれているか

一番多いパターンです。PCは融通が効かないので、正確にパスを伝えてあげなければ、上手く読み込まれないので、一度確認してみてください。

キャッシュが残っていないか

キャッシュが残っていると、ファイルを編集しても画面上の変化がない場合があります。こちらは、「スーパーリロード」で解決できます。

※キャッシュとスーパーリロードについて詳しく知りたい方は、こちらの記事をご覧ください。

優先順位の確認

CSSには、適用の優先順位というものがあります。何かの指定に負けている場合、指定は効かないのでご注意ください。

お助け猫
お助け猫

ほとんどの場合、上記の対処法で解決する印象です。

まとめ

CSSには、主に3パターン読み込ませる方法が存在しますが、殆どの場合が、別のCSSファイルを読み込ませるパターンとなります。styleタグやstyle属性を使うケースは少ないかもしれませんが、覚えておいていただければと思います。

タイトルとURLをコピーしました