【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 2023.4.25
- CSS


見出しのデザインをまとめてくださーい

わ、わかりましたー
1. 左右に線を引く
よく見かけますね。
線を引いて、背景白のテキストを乗せるって感じですね。
See the Pen
【CSS】flexboxを使った見出しデザイン(左右に線を引く) by 125naroom (@125naroom)
on CodePen.
HTMLとCSSはこちら
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; }
2. 左右に線を引く(flexboxを使ってみる)
See the Pen
【CSS】flexboxを使った見出しデザイン(左右に線を引く) by 125naroom (@125naroom)
on CodePen.
HTMLとCSSはこちら
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; }
さいごに

ありがとうございますー

随時追加予定ですー
おすすめ
かんれん
Googleさんのおすすめ
人気記事
- web / 2019.4.16
- 【CSS】ハンバーガーメニュー実装サンプル集(クリック時のエフェクトも集めました)
- web / 2022.2.1
- 【jQuery】アコーディオン実装サンプル10選
- web / 2019.9.27
- 【jQuery】スライダープラグイン「slick」実装サンプル集
Googleさんのおすすめ
デザインの記事
- 2023.06.05New
- NEWTOWN/グラフィック・Webデザイン
- 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
- デザインのこと – Web design gallery
- 2022.06.15
- ちょっと思い出しただけ
- (C)2022『ちょっと思い出しただけ』製作委員会 もくじ 『ちょっと思い出しただけ』 あ…
- いつかのこと – 無印良品の家と暮らす
- 2023.04.25
- 【CSS】見出しデザインをまとめてみる(左右に線を引くとか)
- 見出しのデザインをまとめてくださーい わ、わかりましたー もくじ 左右に線を引く 左…
- 125naroom / デザインするところ(会社)です。