Bicepper
CSSって初心者にとっては難しいですよね。まるでパズルみたいに。
え？CSSが反映されないんだけどどうしたらいいかって？
CSSが反映されないときに確認すべき項目を紹介しましょう！
CSSを後から上書き
これは初心者コーダーやWEBデザイナーによくありがちな典型的なCSSのトラップパターンです。
CSSは、基本的に上から下に向かって順番に読み込まれます（基本的にというのは、CSSの優先度という概念を無視した話です）。
この流れはよく覚えておいてください。
- 複数のCSSファイルを読んでいる場合は、最後のCSSファイルが優先される
- 複数の同一クラス名やID名を書いている場合は、最後が優先される
つまり、同じクラス名やID名で複数記述した場合は下に向かって上書きされていき、最後のファイルに書かれているCSSが優先されます。
例えば、
.test{
position:relative;
margin:10px auto;
color:#e5e5e5;
font-size:12px;
}
.hogehoge{
display:flex;
align-items:center;
justify-content:center;
}
.test{
position:relative;
margin:5px auto;
color:#e5e5e5;
font-size:10px;
}上記のように書かれたCSSがあった場合、「.test」というクラス名が重複しているのがわかりますね。
このCSSを読み込むと、「.test」クラスは、最終的には以下のように解釈されます。
.test{
position:relative;
margin:5px auto;
color:#e5e5e5;
font-size:10px;
}margin と font-size が上書きされましたね。
このように同じクラス名で複数回記述すると、意図としない表示になってしまいますので、よくチェックする必要があります。
「!important」が付いている
先ほどの「CSSを後から上書き」にもちょっと出てきましたが、CSSには「優先度」というものが存在します。
これは、使用するセレクタやプロパティ、値などが数値化され、合計値によって読み込む優先度が変化するのです。
詳しくはこちらのQiitaを参考にするといいでしょう。
プログラミング初心者
この数値計算は無理して覚える必要はありません。
CSSを書いているうちに、どんな書き方をすれば優先度が変化するかはだんだんわかるようになってきます。
ところが、「!important」というキーワードを使用すると、これを付与された値は点数に関わらず最優先になります。
先程と同じコードで見てみましょう。
.test{
position:relative;
margin:10px auto !important;
color:#e5e5e5;
font-size:12px !important;
}
.hogehoge{
display:flex;
align-items:center;
justify-content:center;
}
.test{
position:relative;
margin:5px auto;
color:#e5e5e5;
font-size:10px;
}「CSSを後から上書き」のパターンだと margin と font-size が上書きされましたが、今回は最初の「.test」クラスの方に「!important」が付いています。
「!important」は最優先になりますから、最終的なCSSとしては何も変化しません。
.test{
position:relative;
margin:10px auto !important;
color:#e5e5e5;
font-size:12px !important;
}基本的に「!important」は使用しない方が良いとされています。
理由は「CSSを後から上書き」と同様で、意図とせぬ動作を起こすからです。
Bicepper
1人でCSSをコーディングをしている時に起きた場合は「あ、そういえば!importantつけたな」と、ある程度予測がつくかもしれませんが、チーム開発をしていると、他の人は気付かないということが割と起こりうるのです。
これに加えてCSSのファイルが分割されていたり、「CSSを後から上書き」と併用された場合はさらに気付きにくくなり…という悪循環を起こします。
「position」がうまく設定されていない
CSSのプロパティの一つである position ですが、初心者にとっては非常に難しい概念です。
指定できる値は主に「fixed」、「absolute」、「relative」の3つですが、これはHTML要素の配置を決定するプロパティです。
position に関しての詳しい記事はこちらをご覧ください！
CSSのpositionが理解できない？触ってpositionを学ぼう
自分が意図としない動きをした場合は、まず親要素へのposition指定を忘れていると思っていいでしょう。
例えば、
<body>
<div class="parent">
<div class="child">Hello! world</div>
</div>
</body>.parent{
width:100px;
height:100px;
}
.child{
position:absolute;
top:2px;
left:2px;
}
と、「.child」クラスに対して、絶対配置である absolute を指定した場合、「.parent」クラスを起点に絶対配置になるだろうと思ってしまいますが、このままでは「.parent」クラスを通り越して body の起点になってしまいます。
この場合は、起点としたい親要素に相対配置である relative を指定することで解決する場合が多いです。
この場合で言えば、「.parent」ですね。
.parent{
position:relative; /* ←これを追加 */
width:100px;
height:100px;
}
.child{
position:absolute;
top:2px;
left:2px;
}
これで思い通りの動きになります。
class名やid名の頭文字が数字になっている
これは非常に単純ですが、CSSでclass名やid名の最初に数字を使用することはできません。
最初以外であれば問題ありません。
.1test{ /* これは無効 */
position:relative;
margin:10px auto;
}
.test2{ /* これは大丈夫 */
position:relative;
margin:10px auto;
}
コロン「:」やセミコロン「;」を忘れている
これも単純な問題で、CSSでは必要があるコロン「:」やセミコロン「;」をつけ忘れているパターンです。
.test2{
position:relative /* セミコロンなし */
margin10px auto; /* コロンなし */
}
昔は多かったですが、最近のエディターは優秀であり、コロンを打てば自動的にセミコロンも打ってくれるエディタも多いため、だんだん見かけなくなっているエラーであるとも言えますね。
「aタグ」にwidthとかheightが反映されない
これも初心者の方から割と聞く質問で、リンクである「aタグ」をボタンにした場合などに起こりやすいパターンです。
「aタグ」はインライン要素であるため、このままではwidthやheightは効果がありません。
必ずブロック要素にすることを忘れないようにしましょう。
インライン要素とブロック要素の切り替えは、display プロパティで可能です。
<div>
<a href="index.html" class="button">TOP</a>
</div>.button{
display:block; /* ←これでブロック要素に変化する */
width:100px;
height:40px;
}【まとめ】CSSが反映されない時はまず落ち着こう
CSSが反映されない時に確認すべき6つのことを紹介しました。
CSSが反映されない原因はまだまだ他にもたくさんありますが、まずはこの基本的な6個に気をつけるだけでもコーディング速度がかなり改善されます。
何回も繰り返していくうちに勝手に覚えて行きますので、がんばりましょう！
Bicepper
