CSSについて学習中なのですが、記述したCSSが反映されないことがありました。
CSSを記述する際には優先順位について理解しておく必要があります。
CSSについて簡単に振り返り
CSSはスタイルシートとよばれ、ページの装飾をするのに使用します。
HTMLで記述したコードだけでは、文字色や背景などの装飾は難しいので、CSSを使用していきます。
CSSを記述する3つの場所
①CSSファイルを作成して、HTMLから読み込みをする方法
②HTMLファイルに<style>タグを使用して記述していく方法
③HTMLのタグの中に記述する方法
①CSSファイルを作成して、HTMLから読み込みをする方法
よくつかわれる方法です。
CSSだけのファイルを作成するため、ごちゃごちゃにならずに済みます。
１つのCSSファイルを、複数のHTMLファイルで共有できるので、サイト全体で共通するCSSを何度も書かずに済みます。
HTMLファイルにCSSファイルをリンク付けるには下記のように記述します。
<head>
<meta charset="UTF-8">
<title>ああああ</title>
<link rel="stylesheet" href="○○○○.css">
</head>②HTMLファイルに<style>タグを使用して記述していく方法
<head>タグの中に<style>タグを追加して、CSSを書いていきます。
通常のサイトでは原則として使用しません。
<head>
<style>
p {
color: #253958
}
</style>
</head>③HTMLのタグの中に記述する方法
HTMLの各タグには、idやclass属性を追加できますが、style属性も追加できます。
何か特別な理由がない限り、実際のサイト制作では使いません。
<p style="color: #253958;" >あああ</p>CSSの基礎文法
基礎文法については、別の記事で紹介しているので、説明を省きます。
下記記事をご参照ください。
CSSの読み込み優先順位
１位：「!important」を使用
２位：HTMLコードに直書き
３位：CSSファイルの一番下に記述
その他：セレクタの優先度
１位：「!important」を使用
「!important」を末尾に使用すると、絶対にこれを優先させてという意味になります。
#container {
color: #d9d9d9 !important;
}※多用しすぎると、どこが最優先で適応したいところなのかわからなくなるため注意が必要。
本当に必要なところだけ使うようにします。
２位：HTMLコードに直書き
前述した「HTMLのタグの中に記述する方法」です。
<p style="color: #253958;" >あああ</p>前述したとおり、実際のサイト制作では使用しないことが多いです。
あちこちにバラバラに書くのではなく、一か所のファイルに書いていくようにします。
３位：CSSファイルの一番下に記述
CSSファイルでは、上から読み込んでいき、どんどん上書きされるシステムになっています。
そのため下に書いてあるコードが優先されます。
追加でCSSを記述する際は、一番下に書いていくようにします。
その他：セレクタの優先度
セレクタにも優先度があり、
「id」が最も優先度が高い →「class」→「属性セレクタ（a）」→「要素（h2）」
また、詳細にセレクタを設定しているものほど優先度が高くなります。
cocoonの場合の優先度
WordPressのテーマ「cocoon」を使用している場合の優先順位は下記の通りです。
１位：左の欄の「外観」→「カスタマイズ」→「追加CSS」
２位：固定ページ・投稿ページの下にある「カスタムCSS」
３位：左の欄の「cocoon設定」で選択したもの
４位：左の欄の「外観」→「テーマファイルエディタ」→「Cocoon Child: Stylesheet (style.css)」子テーマのスタイルシート
５位：スキン
６位：親テーマのCSS（変更しない）
CSSが反映しないその他の理由
その他の理由には
①キャッシュを読み込んでいる
→ スーパーリロード（ctrl + F5）やキャッシュ削除する
②CSSの記述ミスがある
→ idとclassを間違えている、全角スペースを使用しているなど
③CSSファイルが読み込まれていない
などがあります。
記述ミスに関しては、チェックするサイトがあるので活用するといいと思います。
バックアップを取りながら、原因追及していきましょう。
コメント