h1タグやh2タグにつけたclassのレイアウトが反映されない時の対処法

IT
スポンサーリンク
スポンサーリンク

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名   では反映されないんですね。

この状態でプレビューしてみると、

 

レイアウトが問題なく反映されているのがわかります。

色々調べながらコーディングやマークアップをしたのにも関わらず、意図しない結果になってしまうのは非常にストレスフルですよね。
僕も途中で詰まってしまった経験が数え切れないほどあるので、こういう発見ができたら随時シェアしていきたいと思います!

IT
スポンサーリンク
Yumaをフォローする
Yuma

愛知県在住の29歳会社員。

同志社大学卒業後、約3年間のメーカーでの営業職としての勤務経験を経て、フィリピン・セブ島へ3ヵ月プログラミング×英語留学。

帰国後、愛知のIT企業でWEBプログラマーとして勤務開始。

保有資格:TOEIC865点、日商簿記検定2級

Yumaをフォローする
Daybreak

コメント