ブログ記事の読みやすさやデザイン性を高めるために欠かせないH2見出し。今回は、王道の「左縦線＆アンダーライン」や「波線・ホバーアンダーライン」などを中心とした、どんなサイトにも馴染むシンプル＆ベーシックな見出しデザインを50種類（DESIGN 001〜050）集めました。コピペですぐに使えるHTML・CSSコード付きですので、ぜひWebサイト制作やブログのカスタマイズにご活用ください。
H2見出しデザイン50選 シリーズ一覧
DESIGN 001
【太い左線】もっともオーソドックスでどんなテーマにもマッチする、インディゴブルーの極太左線。
ここに見出しテキストを配置します
DESIGN 002
【細い左線＋極細下線】ティールグリーンの細い左縦線に、うっすらと境界線となる下線を敷いてメリハリを高めたデザイン。
ここに見出しテキストを配置します
DESIGN 003
【2色グラデーション左線】上端のピンクから下端のオレンジへと、徐々にカラーが遷移する美しいリニアな左線。
ここに見出しテキストを配置します
DESIGN 004
【スムーズなグラデーション下線】左から右へ滑らかにパープルからブルーへと変化する、スタイッシュな下線。
ここに見出しテキストを配置します
DESIGN 005
【波線下線】パステルレッドの波状の下線。女性向けメディアやカジュアルなコラムにぴったりのデザイン。
ここに見出しテキストを配置します
DESIGN 006
【点線下線】太めの丸ドットが均一に並んだ、シンプルながらアクセントになるアンバーオレンジの点線下線。
ここに見出しテキストを配置します
DESIGN 007
【左線＋下線が繋がったL字型】左線から下部へ1本のグリーンラインとして交わり、セクション全体を囲うようにアピールする構成。
ここに見出しテキストを配置します
DESIGN 008
【左右に小さな四角がついた下線】下線の左端と右端の境界に小さなスクエアドットを配置した、知的でフォーマルなデザイン。
ここに見出しテキストを配置します
DESIGN 009
【二重下線】重厚感とクリーンさを両立させた、細い平行線2本のダブルアンダーラインスタイル。
ここに見出しテキストを配置します
DESIGN 010
【中央から広がるグラデ下線】見出しの中心から左右に向けて、ぼんやりとグラデーションで消えていく美麗なピンク下線。
ここに見出しテキストを配置します
DESIGN 011
【太めのグラデーション左線＋角丸】両端が丸まったカプセル形状の左縦線。水色からブルーへの深みのあるグラデ。
ここに見出しテキストを配置します
DESIGN 012
【ドットの左線】縦に細かくドットが並んだ、パステルピンクの親しみやすい点線左線。
ここに見出しテキストを配置します
DESIGN 013
【斜めストライプの左線】オレンジと白の縞模様が交差する、標識風かつポップな斜めストライプ左線。
ここに見出しテキストを配置します
DESIGN 014
【ダブルの左線】太い青の主線と、その横に細いライトブルーの副線が寄り添うモダンな左2本線。
ここに見出しテキストを配置します
DESIGN 015
【文字の直下のみ太い蛍光ペン風下線】見出し文字の背後をそっとなぞるように引かれた、イエローの蛍光マーカーライン。
ここに見出しテキストを配置します
DESIGN 016
【下線の右端に小さな三角がついたデザイン】ティールグリーンの下線の終端に、前進を示す小さな矢印が組み込まれたデザイン。
ここに見出しテキストを配置します
DESIGN 017
【左線上端と下端が突き出たデザイン】見出しテキストの高さの枠を超えて、上下に長く突き抜ける印象的なマゼンタ左線。
ここに見出しテキストを配置します
DESIGN 018
【波打つ二重下線】パステルブルーとインディゴが重なり合い、波が互い違いに揺れ動くフェミニンなダブルウェーブ。
ここに見出しテキストを配置します
DESIGN 019
【左線が徐々に細くなって消える】上から下へ徐々に幅が細くなり、背景へ溶けていくシャープなテーパード左線。
ここに見出しテキストを配置します
DESIGN 020
【左線＋グラデーション消滅下線】ハッキリとしたオレンジ左線から、右側へ向けてグラデーションで細く消え去る下線。
ここに見出しテキストを配置します
DESIGN 021
【破線（ダッシュ）の太い下線】ステッチやミシン目のような長い破線が並ぶ、少し武骨でカジュアルなグレー下線。
ここに見出しテキストを配置します
DESIGN 022
【カプセル状の左線】上下が綺麗にカーブしたシアンカラーのカプセル状左線。見出しにスマートな優しさを加えます。
ここに見出しテキストを配置します
DESIGN 023
【点線＋実線の多重線】実線の下線の上に、さらにもう一本細い点線を敷いて表情を豊かにしたダブルボーダー。
ここに見出しテキストを配置します
DESIGN 024
【3本並んだストライプ左線】パープル系の微細な3本のアウトラインが縦に並び、豊かな質感を演出する左線。
ここに見出しテキストを配置します
DESIGN 025
【セパレート型の下線】左側の50pxのみ太いマゼンタ線。残りはグレーの細線で流れるように仕切るアシメアンダーライン。
ここに見出しテキストを配置します
DESIGN 026
【グラデーション左線＋同色文字開始】上部から下部へ色を変えつつ、見出しの先頭文字の色もほのかに合わせるグラデ調和。
ここに見出しテキストを配置します
DESIGN 027
【くさび型の下線】左から右へ滑らかに細く収束していく、矢先（くさび）形状のイエローアンダーライン。
ここに見出しテキストを配置します
DESIGN 028
【上下を挟むサンドイッチ線】上部と下部の両方にシックな太線を配置し、タイトルエリアを引き締めるサンドイッチ構造。
ここに見出しテキストを配置します
DESIGN 029
【レインボー左線】赤・オレンジ・黄・緑・青のグラデが繋がる、ポップでクリエイティブな虹色左縦線。
ここに見出しテキストを配置します
DESIGN 030
【ジッパー模様の下線】斜めの線が噛み合ってジッパー（ファスナー）のように見える、ギミック感のある下線。
ここに見出しテキストを配置します
DESIGN 031
【ピン針風の左線】縦線の頭に小さなドットピンをのせた、ピンマップ風の愛らしくアピールするピン針型左線。
ここに見出しテキストを配置します
DESIGN 032
【手書き風ラフ波線】蛍光グリーンの大きな波。手書きノートやラフなスケッチテイストに最適な波線下線。
ここに見出しテキストを配置します
DESIGN 033
【極細L字の左下線】パープルの極細左縦線から、そのままドット（破線）の下線へと折り返す極細のシャープL字。
ここに見出しテキストを配置します
DESIGN 034
【斜めストライプ下線】グリーンの太い下線内に、斜めのストライプパターンを埋め込んださわやかな下線。
ここに見出しテキストを配置します
DESIGN 035
【左右に突き出た下線】見出し文字幅を超えて左右に10pxずつ外にはみ出す、視覚的な安定感を与えるレッド下線。
ここに見出しテキストを配置します
DESIGN 036
【点滅する左線】1.8秒周期でゆっくり明滅（パルス）し、静かな動的変化で読者をスクロールへ誘うスカイブルー左線。
ここに見出しテキストを配置します
DESIGN 037
【アニメーションストライプ下線】パープルストライプ。背景パターンが無限に右へとスクロールし続ける美麗アクティブ下線。
ここに見出しテキストを配置します
DESIGN 038
【ホバーで伸びる下線】通常は透過。見出しエリアにホバーした際に、左から右へ滑らかに伸びるピンク下線。
ここに見出しテキストを配置します
DESIGN 039
【二重ダッシュ左線】細いアンバーラインが2重に並び、ノートの仕切りのような繊細さを与える左線。
ここに見出しテキストを配置します
DESIGN 040
【最初の30pxだけ太い下線】全体に敷かれた薄い境界線の上、最初の45pxだけを濃く太く際立たせた機能的下線。
ここに見出しテキストを配置します
DESIGN 041
【折り返しL字左線】縦の左線から、さらに上部にもL字に少し折り返して角を保護するようなマイルドなティール左線。
ここに見出しテキストを配置します
DESIGN 042
【チェーン模様の下線】丸いチェーンが一定間隔でリンクして繋がる、クラシカルな装飾下線。
ここに見出しテキストを配置します
DESIGN 043
【グラデーション矢印左線】グラデーション縦線の中央に、右を指すアロー三角を噛み合わせたアグレッシブな進行左線。
ここに見出しテキストを配置します
DESIGN 044
【楽譜風の多重下線】五線譜のような細かい3層のグレー水平線が並ぶ、優雅で洗練された多重アンダーライン。
ここに見出しテキストを配置します
DESIGN 045
【ホバーで左線がバウンド伸縮】ホバー時に、左の縦線が縦方向にビヨンと伸びる弾性バウンドアニメーション。
ここに見出しテキストを配置します
DESIGN 046
【カラフルパッチワーク下線】5色のビビッドなパッチが規則的に連なる、子供向け・ファミリー向けに最適な下線。
ここに見出しテキストを配置します
DESIGN 047
【ステッチ（縫い目）左線】クラフト感、手作り感を想起させるダッシュボーダーを用いたグリーンの縫い目左線。
ここに見出しテキストを配置します
DESIGN 048
【ホバーで中央から両端に伸びる下線】通常は下線なし。ホバーすると、文字の真ん中の点から左右にスッとラインが開きます。
ここに見出しテキストを配置します
DESIGN 049
【交差はみ出しL字線】左下で縦線と横線が交差し、角をオーバーランする斬新なレッドラインL字。
ここに見出しテキストを配置します
DESIGN 050
【呼吸明滅する下線】スカイブルー下線。影とラインの光彩がゆっくりと呼吸するように強弱を繰り返すパルス線。