注意！CSSの知っておきたい書き方の基本
2023.02.06 CSS
ウェブサイトを構築するためにCSSは必要不可欠なプログラミング言語です。
HTMLやJavascriptに、記載するルールが存在するように、CSSにも独自のルールが存在します。
ルールを無視してしまうと、スタイルが機能しないだけでなく、
サイト自体のSEO評価が下がってしまうこともあります。
今回は、CSSの評価を下げないための「書き方の基本」をまとめて紹介します。
値の単位
CSSには、長さ・距離・フォントサイズなどを測定するために使用できる単位がいくつかありますので、覚えておくべき基本知識と使用する単位を紹介します。
絶対値と相対値
単位には「絶対値」と「相対値」があるので、こちらから触れておきます。
絶対値
他要素の単位や大きさに影響を受けず、常に同じ数値であること。
使用する単位ではピクセル（px）がこれに該当します。
相対値
他要素の単位や大きさに合わせて、数値を変動する可変的な値のこと。
em（エム）、rem（レム）、％（パーセント）、vw（viewWidth：画面幅）は相対値になります。
単位の違い
ピクセル (px)
CSS の最も基本的で一般的な測定単位です。これは、画面のサイズやフォントサイズに合わせて拡大縮小されない固定サイズ（絶対値）の単位です。
画面幅やコンテンツ幅に合わせることなく、常に同じサイズの表現を提供してくれます。
エム（em）
親要素のフォントサイズに影響を受ける単位です。
<div class="block"> <p>テキストテキスト</p> </div>
pタグの親要素は、div.blockです。
pタグにemを使用した場合、blockのフォントサイズが基準となります。
数値の計算は、「基準の数値 × em値」です。
.block {
font-size: 16px;
}
/* 例① */
.block p {
font-size: 1em;
/*
基準の数値：16px
16px × 1
*/
}
/* 例② */
.block p {
font-size: 1.5em;
/*
基準の数値：16px
16px × 1.5
*/
}
上記の例でみると、
①の場合は、基準値16px × em値1em なので、
実際の値は、「16px」となります。
②の場合は、基準値16px × em値1.5em なので、
実際の値は、「24px」となります。
親要素の値が指定されていない場合
フォントサイズは、指定しない場合、親要素の数値を引き継ぐようになっています。
そのため、div.blockの数値が指定されていない場合は、
div.blockの親要素の数値が基準値になるということです。
body { /*.blockの親要素*/
font-size: 20px;
}
.block p {
font-size: 1.5em;
/*
基準の数値：20px
20px × 1.5
*/
}
レム（rem）
remは、root emの略で、ルート要素のフォントサイズを基準した単位です。
ルート要素とは、HTML構文の中の最上位要素のことで、を指します。つまり、htmlに指定されている数値を基準とするということです。
html { /*ルート要素*/
font-size: 20px;
}
.block p {
font-size: 1.5em;
/*
基準の数値：20px
20px × 1.5
*/
}
上記のように、20pxが指定されている場合は、基準値が20pxになります。
もしルート要素に数値が指定されていない場合は、16pxが自動で指定されます。
画面幅（vw）・画面高さ（vh）
vwは「viewport width」の略で、vhは「viewport height」の略です。
言葉の通り、画面幅に合わせて、数値が変わる単位です。
1vwであれば、画面幅の1％となります。
vw・vhは、他の単位と違い、数値を基準としません。
画面サイズに合わせるため、どの画面サイズでも同じデザインを維持することができます。
これは、スマートフォンやタブレットなど、デバイスのサイズがバラバラでも、
同じように見せることが可能ということで、レスポンシブ対応に推奨される単位です。
CSSの優先順位
CSSを書くときに意識する1つ目のポイントが優先順位です。
優先順位とは、１つのターゲットに対するCSSルールが複数存在する場合、
どのルールが読み込まれるかの基準です。
優先順位を間違えると、読み込みが上手くいかなかったり、
2重でルールを書いてしまったりと、エラーにつながります。
いくつかの例を使って、解説していきます。
CSSの反映方法
こちらの記事でも、説明していますが、CSSをHTMLに反映させるには、3つの方法があります。
・CSSファイルを作って読み込ませる（外部ファイル）
・HTMLファイル内にstyleタグを作って書く（styleタグ）
・HTMLタグに直接書き込む（style属性）
それぞれの特徴などは、こちらで解説しています。
3つの方法の記載場所と優先順位
記載場所
3つの方法の記載場所は、外部ファイルとstyleタグがheadタグ内、style属性はHTMLタグの２パターンに分かれます。
head内に書くときは、どこに書くかで優先順位が変わってきます。
優先順位
CSSの内容は重複している場合、優先順位が高い数値が指定されます。
では、優先順位を決める基準ですが、まず「外部ファイル」と「styleタグ」は、
“後に書かれている”方が、優先順位が高くなります。
“後”とは、複数行の場合は、後ろの行。１行書きの場合は、後者のことを指します。
<style>
header {color: #f00; }
footer {color: #fff; }
header {color: #000; } /* ← 後 */
</style><style>header {color: #f00; } footer {color: #fff; } header {color: #000; } /* ← 後 */ </style>上記の例ですと、header {color: #f00; }よりも、”後”にheader {color: #000; }が書かれているため、
実際に表示される文字の色は「黒」になります。
CSSの記載方法
つづいて、「外部ファイル」と「styleタグ」を同時に使用した場合、以下のように記載することになります。
<head>
<!-- 外部ファイルの中身 -->
<link rel="stylesheet" href="CSSファイルのパス">
<!-- styleタグ -->
<style>
header {color: #f00; } /* 文字色：赤 */
</style>
</head>/* 外部ファイル */
header {color: #000; } /* 文字色：黒 */上記のように、「外部ファイル」では文字色を『黒』を指定し、「styleタグ」では『赤』を指定しています。
HTMLファイルは、左上から右下に向かって読み込まれる。
つまり、上記の場合、headタグからスタートして、一度「外部ファイル」を読み込み、次にstyleタグを読み込む順番になります。
この場合、styleタグが”後”に来るので、headerのcolorは『赤』が指定されます。
<head>
<!-- styleタグ -->
<style>
header {color: #f00; } /* 文字色：赤 */
</style>
<!-- 外部ファイル -->
<link rel="stylesheet" href="CSSファイルのパス">
</head>/* 外部ファイル */
header {color: #000; } /* 文字色：黒 */次に、上記のように「外部ファイル」が”後”に来ている場合、headerのcolorは「黒」が指定されるということです。
このように、”後”に書かれているCSSが反映されるのです。
「外部ファイル」と「styleタグ」の優先順位は以上ですが、
この優先順位よりも高いのが「style属性」です。
これは、HTMLタグに直接記載するという点で、どの記載よりも最優先で指定されます。
<head>
<!-- styleタグ -->
<style>
header {color: #f00; } /* 文字色：赤 */
</style>
<!-- 外部ファイル -->
<link rel="stylesheet" href="CSSファイルのパス">
</head>
<body>
<header style="color: #fff; /* 文字色：白 */"></header>
</body>/* 外部ファイル */
header {color: #000; } /* 文字色：黒 */上記のように、「外部ファイル」と「styleタグ」を読み込まれている状況でも、
style属性で文字色を指定しているので、この場合は、『白』が反映されます。
ただし、デメリットでも書いたように、style属性は、そのタグ以外には、反映がされず、
修正時は一つ一つをなおさないといけないため、あまり便利ではなく、ほとんど使用されていません。
使用する例は、「単一ページ」か「jQuery プラグイン」などでCSSを記載したときになります。
最後に、全ての優先順位を無視する方法を説明します。
それは、!importantを使用することです。
!importantを使用すれば、優先順位を強制的に最優先にすることが可能です。
/* !importantの使い方 */
header {color: #000 !important; } /* 文字色：黒 */ただし、!importantを使うと、優先順位を無視し、制御に手間がかかるため、使うことはオススメしません。
!importantに対抗するには、!importantより後の記載に!importantを使わなければならず、ファイル内が!importantだらけになってしまいます。
/* !importantの使い方 */
header {color: #000 !important; } /* 文字色：黒 */ header {color: #000 !important; } /* 文字色：黒 */また、!importantを使うことはSEOの評価も下がってしまいます。
ですが、それでも!importantを使用するWebサイトやjQueryプラグインが存在するため、知識として覚えておいてください。
まとめ
CSSの書き方は、人それぞれです。
また、複数のファイルを読み込ませる場合もあります。
その時は、「どの単位を使っているか」「どのように記載しているか」を確認することで、
同じ書き方を維持することができると思います。