見出しのデザインをまとめてくださーい
わ、わかりましたー
左右に線を引く
よく見かけますね。
線を引いて、背景白のテキストを乗せるって感じですね。
HTML
1 | <h1><span>【CSS】見出しデザイン（左右に線を引く）</span></h1> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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を使ってみる）
HTML
1 | <h1>【CSS】flexboxを使った見出しデザイン（左右に線を引く）</h1> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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;} |
さいごに
ありがとうございますー
随時追加予定ですー
