ミギムキ

[CSS] hタグの見出しによく使うスタイルまとめ

公開日:2019/12/03

文字の下に短いバーをつけた見出し

.under_bar {
    position: relative;
    padding: 0px 0px 1em;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.under_bar::before {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 2em;
    height: 4px;
    background-color: #3388dd;
    content: "";
}

文字の前に短いバーをつけた見出し

.front_bar {
    position: relative;
    padding: 0px 0px 0px 2em;
    font-size: 24px;
    font-weight: bold;
}
.front_bar::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 1em;
    height: 4px;
    background-color: #3388dd;
    content: "";
}

見出しの前に小さい四角をつけた見出し

.front_square {
    position: relative;
    padding: 0px 0px 0px 1em;
    font-size: 24px;
    font-weight: bold;
}
.front_square::before {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    width: 0.5em;
    height: 0.5em;
    background-color: #3388dd;
    content: "";
}

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。