コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。itCSSを勉強し始めた人が良く悩むのが、CSSが効かない理由を特定出来ない事です。CSSが効かない時の理由は幾つかありますが、大きな理由の1つに優先順位があり「詳細度」と言います。単純にclassやid、セレクターなどを正しく使ったからといって上手く適用されるとは限りません。「詳細度」はCSSの適用ルールの1つで重み付けをするもの。この重み付けを理解する事で、効率的にスタイルを掛ける事が出来るうえ、CSSが効かない時の原因も特定出来る様になります。CSS詳細度の注意点おさらいCSSの重みづけをする詳細度とは?セレクターの詳細度スコアCSSのスタイル適用ルールの1つとして「詳細度」があります。そもそもCSSにはスタイルの適用順があり、知らないと気付かすに全く別の所を上書きしてしまっていたなんて事が起きてしまいます。CSSの宣言が適用される際の重みづけの事。セレクターの種類と数で決まります。同じ詳細度であれば通常通り最後に宣言されたものが要素に適用されます。詳細度を決めるルールは?セレクター毎に重み付けをするためのスコアが設定されています。つの異なる値(「1000の位」「100の位」「10の位」「1の位」)に対してセレクターの数だけスコアが加算されていきます。HTMLのタグ内にstyle属を書く為セレクターがありません。常にスコア「1000」です。セレクターは「100」がスコアされます。CSSファイル内のクラスセレクター・属性セレクター・擬似クラスは、「10」がスコアされます。CSSファイル内の要素セレクターまたは疑似要素には、「1」がスコアされます。style属性は「1000」という考えは古いから違うんだっていう意見もありますが、それは本質ではありません。学術研究ではありませんので、詳細度の理解を助けるという意味では今も十分有効な考え方です。大事な事は、直接HTML内に記述してあったり、よりピンポイントな指定程スコアが高くなるという事。セレクターが複数指定してあればその分スコアが加算されていきます。1000CSSファイル以外にもCSSを書けるの?通常CSSは専用のファイルを作ってそのファイル内でスタイルを書きますが、HTML側に直接CSSを指定したりファイルを複数読み込ませる事も出来ます。色々な所にCSSを書く事が悪であるとは言いませんが、詳細度が変わり「思いがけずCSSが効かない」って時の理由だったりします。CSSファイル内でのスタイル記述とルールCSSファイル内にスタイルを書く際の基本ルールとして、同じ要素に対して先に指定したスタイルが後から指定したスタイルで上書きされます。HTMLのheadタグ内にファイルを読み込みCSSファイル内の書き方と同じく、CSSファイルの読み込み順(上から下へ)によってもスタイル適用が変わります。media="all">style01.cssと同じ要素へのスタイル指定の場合、後から書いたstyle02.cssで上書きされます。HTMLの要素内に直接スタイルを記述スタイル属性の詳細度の説明CSSの規則として直接スタイルの対象となった要素は常に優先されます。その為、style属性の詳細度の重み付けは大きく設定されています。詳細度の計算やCSSの記述場所などの説明をしましたが、それらの計算を無効にしてしまう特別な指定方法が「!important」です。特別といっても便利に都合よく使ってよい物ではありません。通常のルールを無視してしまう為、不用意に使うと意図せずスタイルが適用されたり、無効になってしまいます。「!important」を上書きするには、同じかそれ以上の詳細度で「!important」を上書きするしかありません。まとめ今回はCSSの詳細度について解説しました。ルールなど、理屈が分かると理解が早まりますよね。CSS詳細度の注意点おさらいセレクターの適用ルールにはスコアでの重み付けがある。セレクターの適用はCSSファイルの読み込み順でも変わる。「!important」は不用意に使わない。CSSの勉強のお役に立てると嬉しいです。HTMLもCSSも時間は掛かりますが独学で習得出来ます。効率的に習得するならスクールも有りだと思いますよ。検索:FUERU(フエル)ウェブデザイナーが知識と経験をもとに、制作やSEO対策、ITスキルについて解説・発信するブログ。デザイン・コーディングからSEO対策やライティングなど幅広くWEB制作をしています。スキルアップして仕事に活かしましょう。コーディング制作お役立ちPhotoshopIllustratorXDHTML・CSSHTMLやCSSを詳しく、そして分かり易く丁寧に解説しています。