「CSSの適用方法ってどんなパターンがあるのかな？」
あなたは、いくつ思いつきますか？
実は、主に3つのパターンが存在します。今回は、3つのパターンをご紹介するとともに、上手く適用されない場合の対処法についても解説します。
今回の記事は、次のような方にお勧め！
・CSSの適用方法について知りたい
・CSSが上手く適用されなくて困っている
目次
CSSの適用方法のご紹介
では、3つの適用パターンを順番に解説していきます。
1.CSSファイルを読み込ませる
HTMLファイルとは別にCSSファイルを作成して読み込ませる方法です。CSSファイルを読み込むには、下記コードを<head> ~ </head>の中に記述します。
<link rel="stylesheet" href="パス">殆どのWEB制作の現場では、このCSSファイルを読み込ませる方法が使われています。
2.styleタグを使用する
こちらは、CSSをHTMLに直接書きたい時に使用します。基本的には、ごく短い、他のページでは使われないCSSを追加する場合に使用します。<style>タグは、必ず<head> ~ </head>タグの中に記述します。
<style>
.text {
color: red;
font-size: 18px;
}
</style>こちらの指定方法は滅多に使わない印象です。
3.style属性を使用する（非推奨）
こちらは、タグに直接CSSを記述したい時に使います。style属性は、どんなタグにも追加ができます。
<p style="color:red; font-size:18px;"></p>便利そうな指定方法ですが、どこにCSSを書いたか分かりづらくなる上に、HTMLコードをごちゃつかせる為、更新作業の面でお勧めは出来ません。使い方にはご注意いただければと思います。
・CSSの適用パターンは、3種類ある！
・styleタグ、style属性は滅多に使う機会がない
CSSが上手く適用されない場合の対処法
色々やり方があるのは分かったけど、そもそも上手く適用されない・・
これ、初期の頃私もよくありました。
ただ、今となっては、ある程度の原因は下記3パターンです。
ファイルが読み込まれているか
一番多いパターンです。PCは融通が効かないので、正確にパスを伝えてあげなければ、上手く読み込まれないので、一度確認してみてください。
キャッシュが残っていないか
キャッシュが残っていると、ファイルを編集しても画面上の変化がない場合があります。こちらは、「スーパーリロード」で解決できます。
※キャッシュとスーパーリロードについて詳しく知りたい方は、こちらの記事をご覧ください。
優先順位の確認
CSSには、適用の優先順位というものがあります。何かの指定に負けている場合、指定は効かないのでご注意ください。
ほとんどの場合、上記の対処法で解決する印象です。
まとめ
CSSには、主に３パターン読み込ませる方法が存在しますが、殆どの場合が、別のCSSファイルを読み込ませるパターンとなります。styleタグやstyle属性を使うケースは少ないかもしれませんが、覚えておいていただければと思います。
コメント