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

関東在住のSEです。

TOEIC初受験時325点→オンライン英会話や短期のセブ留学→870点取得

SE業務の他、海外取引先とのweb会議や技術書翻訳など英語に関連する業務に携わった経験があります。

自身の経験をもとに、効果的な英語学習方法やオンライン英会話情報、またITに関する情報について発信しています。

Yumaをフォローする

コメント