目次(クリックでジャンプ)
【CSS】セクションごとの見出しのデザインCSS
<div class="c__ttl">
<span class="c__ttl__sub">ABOUT US</span>
<h2 class="c__ttl__main">私たちについて</h2>
</div>
シンプル
.c__ttl {
margin-bottom: 4rem;
text-align: center;//中央寄せにしない場合はこちらを削除
&__main {
font-size: 2rem;
line-height: 1.5;
font-weight: bold;
h2 {
margin-bottom: 0;
}
}
&__sub {
color: #302FAE;
margin-bottom: 0.25rem;
font-size: 1rem;
font-weight: bold;
display: block;
}
p {
margin: 1rem auto 0;
color: grey;
}
@media (max-width: 576px) {
margin-bottom: 2rem;
&__main {
font-size: 1.5rem;
}
}
}
下線付き
.c__ttl {
margin-bottom: 4rem;
text-align: center;//中央寄せにしない場合はこちらを削除
&::after {
content: "";
display: inline-block;
height: 4px;
width: 4rem;
background: #302FAE;
}
&__main {
font-size: 2rem;
line-height: 1.5;
font-weight: bold;
h2 {
margin-bottom: 0;
}
}
&__sub {
color: #302FAE;
margin-bottom: 0.25rem;
font-size: 1rem;
font-weight: bold;
display: block;
}
p {
margin: 1rem auto 0;
color: grey;
}
@media (max-width: 576px) {
margin-bottom: 2rem;
&__main {
font-size: 1.5rem;
}
}
}
コメント