見出しのデザインをまとめてくださーい
わ、わかりましたー
左右に線を引く
よく見かけますね。
線を引いて、背景白のテキストを乗せるって感じですね。
See the Pen 【CSS】見出しデザイン（左右に線を引く） by 125naroom (@125naroom) on CodePen.
HTML
<h1><span>【CSS】見出しデザイン（左右に線を引く）</span></h1>
CSS
h1 {
position: relative;
color: #333;
font-size: 22px;
font-weight: bold;
text-align: center;
}
h1::before {
content: '';
position: absolute;
top: 48%;
left: 0;
right: 0;
border-top: 1px solid #333;
}
h1 > span {
position: relative;
display: inline-block;
padding: 0 8px;
background-color: #fff;
}
左右に線を引く（flexboxを使ってみる）
See the Pen 【CSS】flexboxを使った見出しデザイン（左右に線を引く） by 125naroom (@125naroom) on CodePen.
HTML
<h1>【CSS】flexboxを使った見出しデザイン（左右に線を引く）</h1>
CSS
h1 {
display: flex;
justify-content: center;
align-items: center;
color: #333;
font-size: 22px;
font-weight: bold;
}
h1::before, h1::after {
content: '';
width: 60px;
height: 1px;
background-color: #333;
}
h1::before {
margin-right: 30px;
}
h1::after {
margin-left: 30px;
}
さいごに
ありがとうございますー
随時追加予定ですー
