コピペで使えるおしゃれなCSS見出しのサンプル集。下線・マーカー・囲み・リボンなど定番の装飾を揃えました。シャッフルで色・太さのバリエーションを試せて、表示中のプレビューとコードは常に一致します。気に入ったらそのままコピーしてください。クラス名は .bnto-head-underline 形式です。
該当するパーツが見つかりませんでした。
.bnto-head-underline { display: inline-block; padding-bottom: 8px; border-bottom: 4px solid hsl(5 100% 65%); }
<h2 class="bnto-head-underline">見出しテキスト</h2>
display: inline-block がポイント。これが無いと下線が画面幅いっぱいに伸びます。逆に「幅いっぱいの下線」にしたい場合は削除するだけでOKです。
.bnto-head-marker { background: linear-gradient( transparent 58%, hsl(43 100% 71%) 58% ); padding: 0 4px; }
<h2 class="bnto-head-marker">見出しテキスト</h2>
色の境目 58% を小さくすると線が太く、大きくすると細くなります。文字の高さに自動で追従するのがこの手法の強み。明るい色（高めの明度）を選ぶと文字が読みやすいマーカーになります。
.bnto-head-leftbar { border-left: 6px solid hsl(202 73% 56%); padding-left: 14px; }
<h2 class="bnto-head-leftbar">見出しテキスト</h2>
ブログの定番中の定番。2行以上に折り返しても縦線が伸びて追従します。線と文字の間隔は padding-left で調整してください。
.bnto-head-gradline { position: relative; display: inline-block; padding-bottom: 10px; } .bnto-head-gradline::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, hsl(41 100% 50%), hsl(5 100% 65%)); }
<h2 class="bnto-head-gradline">見出しテキスト</h2>
下線は ::after 疑似要素なのでHTMLは1行のまま。見出し側の position: relative; が無いと線の位置がずれるので消さないでください。線の太さは height で調整できます。
.bnto-head-tag { display: inline-block; background: hsl(119 31% 51%); color: #fff; padding: 6px 16px; border-radius: 8px; }
<h2 class="bnto-head-tag">見出しテキスト</h2>
背景色と文字色のコントラスト比は4.5:1以上が目安。濃い背景色 + 白文字が安全です。border-radius: 999px にするとピル型のタグになります。
.bnto-head-double { display: inline-block; padding-bottom: 8px; border-bottom: 3px double hsl(327 53% 54%); }
<h2 class="bnto-head-double">見出しテキスト</h2>
double の線は太さ3px以上でないと二重に見えません。もっと間隔を空けたいときは 6px double のように太さを増やすと2本の線の隙間が広がります。
.bnto-head-box { display: inline-block; border: 3px solid hsl(202 73% 56%); color: hsl(202 73% 56%); padding: 8px 18px; border-radius: 10px; }
<h2 class="bnto-head-box">見出しテキスト</h2>
枠線と文字を同じ色にすると統一感が出ます。文字は黒のまま枠だけ色付きにしてもOK。その場合は color の行を削除してください。
.bnto-head-stitch { display: inline-block; background: hsl(258 47% 56%); color: #fff; padding: 10px 22px; border-radius: 12px; outline: 2px dashed rgba(255,255,255,.85); outline-offset: -6px; }
<h2 class="bnto-head-stitch">見出しテキスト</h2>
手芸の縫い目風は outline + マイナスの outline-offset で内側に描くのがコツ。border と違いレイアウト幅に影響しません。dashed を dotted に変えると丸い縫い目になります。
.bnto-head-ribbon { display: inline-block; background: hsl(12 71% 59%); color: #fff; padding: 8px 22px 8px 18px; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); }
<h2 class="bnto-head-ribbon">見出しテキスト</h2>
右端の切り込みは clip-path の calc(100% - 12px) で作っています。12px を大きくすると切り込みが深くなります。切り込みの分だけ右側の padding を多めに取ると文字が欠けません。
.bnto-head-dot { display: inline-flex; align-items: center; gap: 10px; } .bnto-head-dot::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: hsl(119 31% 51%); box-shadow: 0 0 0 4px hsl(119 31% 51% / 0.28); }
<h2 class="bnto-head-dot">見出しテキスト</h2>
ドットの周りの薄い輪は box-shadow の広がり（4px）で描いています。半透明色（/ 0.28）を本体と同系色にすると柔らかい印象に。長い見出しで折り返す場合は align-items: start に変えると綺麗です。
.bnto-head-number { display: inline-flex; align-items: center; gap: 12px; } .bnto-head-number .num { background: hsl(150 58% 44%); color: #fff; font-size: 0.65em; padding: 6px 11px; border-radius: 8px; }
<!-- 番号は span で囲む（必須） --> <h2 class="bnto-head-number"> <span class="num">01</span>見出しテキスト </h2>
手順解説やランキング記事に最適。番号を自動連番にしたい場合は CSS の counter-increment と ::before を使う方法もありますが、span方式なら番号の飛ばし・入れ替えが自由です。
.bnto-head-sideline { display: flex; align-items: center; gap: 16px; } .bnto-head-sideline::before, .bnto-head-sideline::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: hsl(30 12% 15%); }
<h2 class="bnto-head-sideline">見出しテキスト</h2>
セクションの中央見出しの定番。親要素の幅いっぱいに線が伸びるので、max-width を指定して margin: auto で中央寄せすると収まりが良くなります。片側だけにしたい場合は ::before か ::after を削除してください。
見出しは記事の構造をひと目で伝える「道しるべ」であり、可読性とSEOの両方に効く重要な要素です。装飾のない見出しは本文に埋もれて流し読みしづらく、逆に適切に装飾された見出しは読者の目を留め、ページの滞在時間を伸ばします。このページでは、コピペで使えるおしゃれなCSS見出しデザインを12種類掲載しています。
すべて画像を使わないピュアCSSなので表示が速く、テキストのまま検索エンジンに内容が伝わります。画像で作った見出しと違って文言の修正も色変更も一瞬。実装はCSSタブのコードをスタイルシートへ、HTMLタブのコードをページへ貼り付けるだけです。クラス名は .bnto-head-〇〇 という独自プレフィックス付きのため、既存のCSSと衝突しにくくなっています。
見出しデザインをおしゃれに見せる近道は、サイトのテーマカラーに色を揃えること。border や linear-gradient の色を1か所書き換えるだけで馴染みます。線の太さ（px）を1〜2px変えるだけでも印象は大きく変化します。各カードの「シャッフル」ボタンを押すと色・太さの組み合わせをランダムに試せて、コードも自動で書き換わるので、そのままコピーすれば再現できます。
h1はページタイトルとして1つだけ、大見出しにh2、その中の小見出しにh3と、階層を飛ばさず順番に使うのが基本です。「デザインが好みだから」という理由でタグの階層を選ぶのはNG。見た目はこのページのようにCSSクラスで自由に切り替えられるので、タグは文書構造、装飾はCSSと役割を分けることが検索エンジンにも支援技術にも正しく伝わるコツです。
bnto- で始まる独自プレフィックス付きなので、既存のスタイルと衝突しにくい設計です。border や linear-gradient の色、太さ（px）の値を書き換えるだけです。各カードの「シャッフル」ボタンを押すと色・太さのバリエーションをその場で試せて、コードも自動で書き換わります。見出しと組み合わせて使いやすいパーツはこちら。