classを設定したはずなのに反映されない
このブログでは中見出しを作る時にh2タグを使うことが多いのですが、一つの記事で何箇所かで使うことが多いので、レイアウトを一括で反映させるためにclassを使っています。
例えば前回の記事で言えばこの部分。
赤枠の部分をh2タグとして設定し、さらにそこへclassを追加して
h2 class=”h2-title”のように記述しています。
囲いの左端が青色になっていますね。
そしてそれをSimple Custome CSSにカスタマイズするためのコードとして以前以下のように記述していました。
.h2-title{
padding-right: 40px;
padding-left: 40px;
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid blue;
line-height: 40px;
margin-top: 60px;
}
しかし、これが全く反映されず困っていました。
青色になるはずが以下のようになってしまっていました。
ここでしばらく詰まってしまい、色々調べてみると、
h2にクラスを設定した場合、h2とクラス名をくっつけてCSSセレクタにしないとレイアウトが反映されないということでした。
つまりどういうことかというと、今回の場合のようにCSSにh2タグに設定したclassのレイアウトを反映させたい時は、
h2.h2-titleのように記述しなければなりません。
よって完成形で書くと、以下のようになります。
h2.h2-title{
padding-right: 40px;
padding-left: 40px;
background: #f7f7f7;
padding: 20px 15px 18px;
color: #333;
border-left: 9px solid blue;
line-height: 40px;
margin-top: 60px;
}
通常のdivタグのクラスのように、 .class名 では反映されないんですね。
この状態でプレビューしてみると、
レイアウトが問題なく反映されているのがわかります。
色々調べながらコーディングやマークアップをしたのにも関わらず、意図しない結果になってしまうのは非常にストレスフルですよね。
僕も途中で詰まってしまった経験が数え切れないほどあるので、こういう発見ができたら随時シェアしていきたいと思います!
コメント