[CSS] 旗マーク付きの見出しスタイル
少し変わった見出しの装飾として、文字の頭に旗印マークを付けてみました
棒と三角形を組み合わせたシンプルな装飾なので、画像は使わずにCSSだけで手軽に実現できます
棒と三角形の大きさをemで指定することで、見出しのfont-sizeに合わせて旗マークの大きさが変わるようにし、色に「currentColor」を使うことで、見出しの色に合わせて旗マークの色が変わるようにしています
サンプルコード
html
<h1 class="flag">旗マーク付きの見出しスタイル</h1>
CSS
.flag {
position: relative;
padding: 0px 0px 0px 1.5em;
color: #3388dd;
font-size: 36px;
font-weight: bold;
}
.flag::before {
position: absolute;
top: -0.1em;
left: 0px;
width: 0px;
height: 0px;
border: 0.5em solid transparent;
border-left: 1em solid currentColor;
content: "";
}
.flag::after {
position: absolute;
top: 0px;
left: 0px;
width: 0.1em;
height: 100%;
background-color: currentColor;
content: "";
}
中央揃えで表示する場合
旗と文字を中央揃えで表示する場合のサンプルコードです。
iタグを使い、iタグのbefore/after擬似要素で旗を描画することで、h1タグの「text-align: center;」をiタグと文字に適用しています。
html
<h1 class="flag"><i></i>旗マーク付きの見出しスタイル</h1>
CSS
.flag {
color: #3388dd;
font-size: 36px;
font-weight: bold;
text-align: center;
}
.flag > i {
display: inline-block;
position: relative;
margin: 0px 0.5em 0px 0px;
width: 1em;
height: 1em;
}
.flag > i::before {
position: absolute;
top: -0.1em;
left: 0px;
width: 0px;
height: 0px;
border: 0.5em solid transparent;
border-left: 1em solid currentColor;
content: "";
}
.flag > i::after {
position: absolute;
top: 0px;
left: 0px;
width: 0.1em;
height: 1.25em;
background-color: currentColor;
content: "";
}
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。