【HTML/CSS】コピペ可能な見出しのデザイン200選！h1/h2/h3/h4/h5タグに！ブログやウェブサイトで使える！もちろんレスポンシブ対応！

コピーして使用できるHTMLとCSSで作る見出しのデザインです。使い方がわからない方はページ下部からご連絡ください。

基本は <h2> を想定。必要に応じて h3/h4 に変更してください。記事内には読者がコピーできる「HTML/CSSコード」も併記しています。

1.シンプルな見出し

ベーシックで使いやすい見出し。色とサイズを変えるだけで幅広く使えます。

見出しデザインサンプル001

見出しデザインサンプル002

見出しデザインサンプル003

見出しデザインサンプル004

見出しデザインサンプル005

見出しデザインサンプル006

見出しデザインサンプル007

見出しデザインサンプル008

見出しデザインサンプル009

見出しデザインサンプル010

&lt;h2 class="a001"&gt;見出しデザインサンプル&lt;/h2&gt;

1	<h2 class="a001">見出しデザインサンプル</h2>

.a001{background-color:#eee;padding:5px;font-weight:600}
.a002{background-color:#333;padding:5px;color:#fff;font-weight:600}
.a003{background-color:#6294c3;color:#fff;padding:5px}
.a004{background-color:#ffffff;color:#6294c3;padding:5px;border:2px solid #6294c3;font-weight:600}
.a005{border:1px dashed #333;padding:5px;font-weight:600}
.a006{border:1px dotted #333;padding:5px;font-weight:600}
.a007{background-color:#eee;padding:5px;font-weight:600;border:1px solid}
.a008{background-color:#eee;padding:5px;font-weight:600;border-bottom:1px solid #777;border-left:5px solid #777}
.a009{border-bottom:2px solid #333;border-left:2px solid #333;padding:5px;font-weight:600}
.a010{padding:5px;font-weight:600}

.a001{background-color:#eee;padding:5px;font-weight:600}

.a002{background-color:#333;padding:5px;color:#fff;font-weight:600}

.a003{background-color:#6294c3;color:#fff;padding:5px}

.a004{background-color:#ffffff;color:#6294c3;padding:5px;border:2px solid #6294c3;font-weight:600}

.a005{border:1px dashed #333;padding:5px;font-weight:600}

.a006{border:1px dotted #333;padding:5px;font-weight:600}

.a007{background-color:#eee;padding:5px;font-weight:600;border:1px solid}

.a008{background-color:#eee;padding:5px;font-weight:600;border-bottom:1px solid #777;border-left:5px solid #777}

.a009{border-bottom:2px solid #333;border-left:2px solid #333;padding:5px;font-weight:600}

.a010{padding:5px;font-weight:600}

2.下線付きの見出し

見出しデザインサンプル011

見出しデザインサンプル012

見出しデザインサンプル013

見出しデザインサンプル014

見出しデザインサンプル015

見出しデザインサンプル016

見出しデザインサンプル017

見出しデザインサンプル018

見出しデザインサンプル019

見出しデザインサンプル020

&lt;h2 class="a011"&gt;見出しデザインサンプル&lt;/h2&gt;

1	<h2 class="a011">見出しデザインサンプル</h2>

.a011{border-bottom:1px solid #333;font-weight:600;padding:5px}
.a012{border-bottom:6px double #333;font-weight:600;padding:5px}
.a013{border-bottom:2px dashed #333;font-weight:600;padding:5px}
.a014{border-bottom:2px dotted #333;font-weight:600;padding:5px}
.a015{border-bottom:5px solid #86a4d3;font-weight:600;padding:5px}
.a016{border-bottom:3px solid #333;font-weight:600;padding:5px}
.a017{font-weight:600;padding:5px;text-decoration:underline;text-underline-offset:10px}
.a018{font-weight:600;padding:5px;text-decoration:underline dashed 3px;text-underline-offset:10px}
.a019{font-weight:600;padding:5px;text-decoration:underline wavy 2px #FF0000;text-underline-offset:10px}
.a020{font-weight:600;padding:5px;text-decoration:underline 5px dotted #aaa;text-underline-offset:10px}

.a011{border-bottom:1px solid #333;font-weight:600;padding:5px}

.a012{border-bottom:6px double #333;font-weight:600;padding:5px}

.a013{border-bottom:2px dashed #333;font-weight:600;padding:5px}

.a014{border-bottom:2px dotted #333;font-weight:600;padding:5px}

.a015{border-bottom:5px solid #86a4d3;font-weight:600;padding:5px}

.a016{border-bottom:3px solid #333;font-weight:600;padding:5px}

.a017{font-weight:600;padding:5px;text-decoration:underline;text-underline-offset:10px}

.a018{font-weight:600;padding:5px;text-decoration:underline dashed 3px;text-underline-offset:10px}

.a019{font-weight:600;padding:5px;text-decoration:underline wavy 2px #FF0000;text-underline-offset:10px}

.a020{font-weight:600;padding:5px;text-decoration:underline 5px dotted #aaa;text-underline-offset:10px}

3.左線付きの見出し

見出しデザインサンプル021

見出しデザインサンプル022

見出しデザインサンプル023

見出しデザインサンプル024

見出しデザインサンプル025

見出しデザインサンプル026

見出しデザインサンプル027

見出しデザインサンプル028

見出しデザインサンプル029

見出しデザインサンプル030

.a021{border-left:3px solid #333;font-weight:600;padding:5px}
.a022{border-left:8px solid #333;font-weight:600;padding:5px}
.a023{border-left:3px dashed #333;font-weight:600;padding:5px}
.a024{border-left:5px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px}
.a025{border-left:5px solid #333;border-bottom:1px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px}
.a026{border-left:5px solid #333;border-radius:30px;font-weight:600;padding:5px 5px 5px 10px}
.a027{border-left:5px solid #333;border-bottom:1px solid #333;border-radius:30px;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px}
.a028{border-left:8px double #333;font-weight:600;padding:5px 5px 5px 10px}
.a029{border-left:8px double #333;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px}
.a030{background-color:#000;font-weight:600;padding:5px;color:#fff}
.a030:before{border-left:5px solid #fff;content:"";padding-right:6px}

.a021{border-left:3px solid #333;font-weight:600;padding:5px}

.a022{border-left:8px solid #333;font-weight:600;padding:5px}

.a023{border-left:3px dashed #333;font-weight:600;padding:5px}

.a024{border-left:5px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px}

.a025{border-left:5px solid #333;border-bottom:1px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px}

.a026{border-left:5px solid #333;border-radius:30px;font-weight:600;padding:5px 5px 5px 10px}

.a027{border-left:5px solid #333;border-bottom:1px solid #333;border-radius:30px;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px}

.a028{border-left:8px double #333;font-weight:600;padding:5px 5px 5px 10px}

.a029{border-left:8px double #333;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px}

.a030{background-color:#000;font-weight:600;padding:5px;color:#fff}

.a030:before{border-left:5px solid #fff;content:"";padding-right:6px}

4.枠線付きの見出し

見出しデザインサンプル031

見出しデザインサンプル032

見出しデザインサンプル033

見出しデザインサンプル034

見出しデザインサンプル035

見出しデザインサンプル036

見出しデザインサンプル037

見出しデザインサンプル038

見出しデザインサンプル039

見出しデザインサンプル040

.a031{border:1px solid #333;font-weight:600;padding:5px}
.a032{border:3px solid #333;font-weight:600;padding:5px}
.a033{border:2px solid #333;font-weight:600;padding:5px;background-color:red;color:#fff}
.a034{border:1px solid #333;border-left:5px solid #333;font-weight:600;padding:5px;background-color:#efefef}
.a035{border:5px double #333;font-weight:600;padding:5px;background-color:#efefef}
.a036{border:5px groove #333;font-weight:600;padding:5px}
.a037{border:4px outset #555;font-weight:600;padding:5px}
.a038{border:2px dashed #555;font-weight:600;padding:5px}
.a039{border:3px solid #555;font-weight:600;padding:5px 5px 5px 9pt;border-radius:20px}
.a040{border:3px dotted #d1d1d1;font-weight:600;padding:5px 5px 5px 9pt;background-color:#555;color:#fff}

.a031{border:1px solid #333;font-weight:600;padding:5px}

.a032{border:3px solid #333;font-weight:600;padding:5px}

.a033{border:2px solid #333;font-weight:600;padding:5px;background-color:red;color:#fff}

.a034{border:1px solid #333;border-left:5px solid #333;font-weight:600;padding:5px;background-color:#efefef}

.a035{border:5px double #333;font-weight:600;padding:5px;background-color:#efefef}

.a036{border:5px groove #333;font-weight:600;padding:5px}

.a037{border:4px outset #555;font-weight:600;padding:5px}

.a038{border:2px dashed #555;font-weight:600;padding:5px}

.a039{border:3px solid #555;font-weight:600;padding:5px 5px 5px 9pt;border-radius:20px}

.a040{border:3px dotted #d1d1d1;font-weight:600;padding:5px 5px 5px 9pt;background-color:#555;color:#fff}

5.文字列中央寄せの見出し

見出しデザインサンプル041

見出しデザインサンプル042

見出しデザインサンプル043

見出しデザインサンプル044

見出しデザインサンプル045

見出しデザインサンプル046

見出しデザインサンプル047

見出しデザインサンプル048

見出しデザインサンプル049

見出しデザインサンプル050

.a041{border-bottom:1px solid #333;border-top:1px solid #333;font-weight:600;padding:5px;text-align:center}
.a042{border-bottom:5px double #333;border-top:5px double #333;font-weight:600;padding:5px;text-align:center}
.a043{border-bottom:2px solid #333;border-top:2px solid #333;font-weight:600;padding:5px;text-align:center;background-color:#f5edc5}
.a044{font-weight:600;text-align:center;display:inline-block;position:relative;width:100%}
.a044::before{content:"";position:absolute;left:10px;top:50%;width:15%;height:3px;border-top:3px solid #00acc1}
.a044::after{content:"";position:absolute;right:10px;top:50%;width:15%;height:3px;border-top:3px solid #00acc1}
.a045{font-weight:600;text-align:center}
.a045::before{content:"†";padding-right:3px}
.a045::after{content:"†";padding-left:3px}
.a046{font-weight:600;text-align:center;display:flex;overflow:hidden;background:#d73232;padding:.3em;align-items:center;color:#fff}
.a046::after,.a046::before{content:"";flex:1;background:#fff;padding:1px 0;height:0;transform:rotate(48deg)}
.a047{position:relative;padding:.3em;text-align:center;font-weight:600}
.a047::before,.a047::after{content:"";width:20px;height:30px;position:absolute;display:inline-block}
.a047::before{border-left:solid 2px #283593;border-top:solid 2px #283593;top:0;left:0}
.a047::after{border-right:solid 2px #283593;border-bottom:solid 2px #283593;bottom:0;right:0}
.a048{font-weight:600;padding:5px;text-align:center;text-decoration:underline double 2px #333;text-underline-offset:5px}
.a049{font-weight:600;padding:5px;text-align:center;background-color:#0069ff;color:#fff;box-shadow:1px 1px 1px 1px #aaa}
.a50{font-weight:700;padding-bottom:.5em;text-align:center;position:relative}
.a50::after,.a50::before{content:'';position:absolute;margin:auto;left:0;bottom:0;width:2em;background-color:#e3e3e3;height:5px;right:2em}
.a50::before{background-color:#4c9ac0;left:2em;width:4em}

.a041{border-bottom:1px solid #333;border-top:1px solid #333;font-weight:600;padding:5px;text-align:center}

.a042{border-bottom:5px double #333;border-top:5px double #333;font-weight:600;padding:5px;text-align:center}

.a043{border-bottom:2px solid #333;border-top:2px solid #333;font-weight:600;padding:5px;text-align:center;background-color:#f5edc5}

.a044{font-weight:600;text-align:center;display:inline-block;position:relative;width:100%}

.a044::before{content:"";position:absolute;left:10px;top:50%;width:15%;height:3px;border-top:3px solid #00acc1}

.a044::after{content:"";position:absolute;right:10px;top:50%;width:15%;height:3px;border-top:3px solid #00acc1}

.a045{font-weight:600;text-align:center}

.a045::before{content:"†";padding-right:3px}

.a045::after{content:"†";padding-left:3px}

.a046{font-weight:600;text-align:center;display:flex;overflow:hidden;background:#d73232;padding:.3em;align-items:center;color:#fff}

.a046::after,.a046::before{content:"";flex:1;background:#fff;padding:1px 0;height:0;transform:rotate(48deg)}

.a047{position:relative;padding:.3em;text-align:center;font-weight:600}

.a047::before,.a047::after{content:"";width:20px;height:30px;position:absolute;display:inline-block}

.a047::before{border-left:solid 2px #283593;border-top:solid 2px #283593;top:0;left:0}

.a047::after{border-right:solid 2px #283593;border-bottom:solid 2px #283593;bottom:0;right:0}

.a048{font-weight:600;padding:5px;text-align:center;text-decoration:underline double 2px #333;text-underline-offset:5px}

.a049{font-weight:600;padding:5px;text-align:center;background-color:#0069ff;color:#fff;box-shadow:1px 1px 1px 1px #aaa}

.a50{font-weight:700;padding-bottom:.5em;text-align:center;position:relative}

.a50::after,.a50::before{content:'';position:absolute;margin:auto;left:0;bottom:0;width:2em;background-color:#e3e3e3;height:5px;right:2em}

.a50::before{background-color:#4c9ac0;left:2em;width:4em}

6.影付きの見出し

見出しデザインサンプル601

見出しデザインサンプル602

見出しデザインサンプル603

見出しデザインサンプル604

見出しデザインサンプル605

見出しデザインサンプル606

見出しデザインサンプル607

見出しデザインサンプル608

見出しデザインサンプル609

見出しデザインサンプル610

&lt;h2 class="h601"&gt;影付き見出し&lt;/h2&gt;

1	<h2 class="h601">影付き見出し</h2>

.h601{font-weight:700;padding:.6em 0;text-shadow:0 2px 4px rgba(0,0,0,.25)}
.h602{font-weight:700;padding:.7em 1em;background:#fff;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.12)}
.h603{font-weight:700;padding:.6em 1em;background:#fff;border-left:6px solid #4b9ce2;box-shadow:0 3px 0 rgba(0,0,0,.08)}
.h604{font-weight:700;padding:.6em 1em;background:linear-gradient(#fafafa,#efefef);border:1px solid #e5e7eb;border-radius:6px;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.15)}
.h605{font-weight:700;padding:.6em 1em;background:#3b82f6;color:#fff;border-radius:6px;box-shadow:0 6px 0 #1e3a8a}
.h606{font-weight:700;padding:1em;background:#f3f4f6;border-radius:14px;box-shadow:6px 6px 12px #d1d5db,-6px -6px 12px #ffffff}
.h607{font-weight:700;display:inline-block;padding:.6em 1em;background:#fff;box-shadow:0 8px 12px rgba(0,0,0,.12);position:relative}
.h607:after{content:"";position:absolute;left:10px;right:10px;bottom:-8px;height:8px;background:rgba(0,0,0,.12);filter:blur(2px);border-radius:50%}
.h608{font-weight:700;padding:.8em 1em;background:#111;color:#fff;border-radius:8px;text-shadow:0 0 10px rgba(59,130,246,.9)}
.h609{font-weight:700;padding:.7em 1em;border:1px solid #e5e7eb;border-radius:8px;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.08),0 2px 0 #4b5563 inset}
.h610{font-weight:700;padding:1em;background:#fff;border-radius:8px;box-shadow:0 12px 0 -8px #cbd5e1,0 24px 24px -16px rgba(0,0,0,.2)}

.h601{font-weight:700;padding:.6em 0;text-shadow:0 2px 4px rgba(0,0,0,.25)}

.h602{font-weight:700;padding:.7em 1em;background:#fff;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.12)}

.h603{font-weight:700;padding:.6em 1em;background:#fff;border-left:6px solid #4b9ce2;box-shadow:0 3px 0 rgba(0,0,0,.08)}

.h604{font-weight:700;padding:.6em 1em;background:linear-gradient(#fafafa,#efefef);border:1px solid #e5e7eb;border-radius:6px;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.15)}

.h605{font-weight:700;padding:.6em 1em;background:#3b82f6;color:#fff;border-radius:6px;box-shadow:0 6px 0 #1e3a8a}

.h606{font-weight:700;padding:1em;background:#f3f4f6;border-radius:14px;box-shadow:6px 6px 12px #d1d5db,-6px -6px 12px #ffffff}

.h607{font-weight:700;display:inline-block;padding:.6em 1em;background:#fff;box-shadow:0 8px 12px rgba(0,0,0,.12);position:relative}

.h607:after{content:"";position:absolute;left:10px;right:10px;bottom:-8px;height:8px;background:rgba(0,0,0,.12);filter:blur(2px);border-radius:50%}

.h608{font-weight:700;padding:.8em 1em;background:#111;color:#fff;border-radius:8px;text-shadow:0 0 10px rgba(59,130,246,.9)}

.h609{font-weight:700;padding:.7em 1em;border:1px solid #e5e7eb;border-radius:8px;background:#fff;box-shadow:0 8px 16px rgba(0,0,0,.08),0 2px 0 #4b5563 inset}

.h610{font-weight:700;padding:1em;background:#fff;border-radius:8px;box-shadow:0 12px 0 -8px #cbd5e1,0 24px 24px -16px rgba(0,0,0,.2)}

7.文字列を装飾した見出し

見出しデザインサンプル701

見出しデザインサンプル702

見出しデザインサンプル703

見出しデザインサンプル704

見出しデザインサンプル705

見出しデザインサンプル706

見出しデザインサンプル707

見出しデザインサンプル708

見出しデザインサンプル709

見出しデザインサンプル710

&lt;h2 class="h701"&gt;グラデ文字&lt;/h2&gt;

1	<h2 class="h701">グラデ文字</h2>

.h701{font-weight:800;padding:.2em 0;background:linear-gradient(90deg,#0ea5e9,#22c55e);-webkit-background-clip:text;background-clip:text;color:transparent}
.h702{font-weight:800;padding:.4em .6em;background:#111;color:#fff;border-radius:6px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}
.h703{font-weight:700;padding:.2em 0;position:relative}
.h703:before,.h703:after{content:"「";color:#22c55e;margin:0 .25em;font-weight:900}
.h703:after{content:"」"}
.h704{font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid #93c5fd;padding-bottom:.2em}
.h705{font-weight:800;padding:.2em .4em;background:repeating-linear-gradient(-45deg,rgba(255,224,0,.5)0 8px,rgba(255,224,0,.25)8px 16px);box-shadow:inset 0 -6px 0 rgba(255,224,0,.45)}
.h706{font-weight:900;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#6366f1,#ec4899) border-box;border:4px solid transparent;border-radius:8px;padding:.4em .8em}
.h707{font-weight:800;padding:.2em 0;text-decoration:underline double 3px #64748b;text-underline-offset:.3em}
.h708{font-weight:800;padding:.2em 0;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}
.h709{font-weight:800;padding:.2em 0;filter:drop-shadow(0 2px 0 #d1d5db) drop-shadow(0 4px 6px rgba(0,0,0,.15))}
.h710{font-weight:900;padding:.35em .6em;border-radius:999px;background:#f1f5f9;box-shadow:inset 0 -8px 0 #e2e8f0}

.h701{font-weight:800;padding:.2em 0;background:linear-gradient(90deg,#0ea5e9,#22c55e);-webkit-background-clip:text;background-clip:text;color:transparent}

.h702{font-weight:800;padding:.4em .6em;background:#111;color:#fff;border-radius:6px;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}

.h703{font-weight:700;padding:.2em 0;position:relative}

.h703:before,.h703:after{content:"「";color:#22c55e;margin:0 .25em;font-weight:900}

.h703:after{content:"」"}

.h704{font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid #93c5fd;padding-bottom:.2em}

.h705{font-weight:800;padding:.2em .4em;background:repeating-linear-gradient(-45deg,rgba(255,224,0,.5)0 8px,rgba(255,224,0,.25)8px 16px);box-shadow:inset 0 -6px 0 rgba(255,224,0,.45)}

.h706{font-weight:900;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#6366f1,#ec4899) border-box;border:4px solid transparent;border-radius:8px;padding:.4em .8em}

.h707{font-weight:800;padding:.2em 0;text-decoration:underline double 3px #64748b;text-underline-offset:.3em}

.h708{font-weight:800;padding:.2em 0;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#3b82f6,#a855f7);-webkit-background-clip:text;background-clip:text;color:transparent}

.h709{font-weight:800;padding:.2em 0;filter:drop-shadow(0 2px 0 #d1d5db) drop-shadow(0 4px 6px rgba(0,0,0,.15))}

.h710{font-weight:900;padding:.35em .6em;border-radius:999px;background:#f1f5f9;box-shadow:inset 0 -8px 0 #e2e8f0}

8.吹き出し付きの見出し

見出し直下の余白は margin-bottom で調整してください。

見出しデザインサンプル801

見出しデザインサンプル802

見出しデザインサンプル803

見出しデザインサンプル804

見出しデザインサンプル805

見出しデザインサンプル806

見出しデザインサンプル807

見出しデザインサンプル808

見出しデザインサンプル809

見出しデザインサンプル810

&lt;h2 class="h801"&gt;吹き出し見出し&lt;/h2&gt;

1	<h2 class="h801">吹き出し見出し</h2>

.h801{position:relative;background:#3b82f6;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}
.h801:after{content:"";position:absolute;left:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#3b82f6}
.h802{position:relative;background:#10b981;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}
.h802:after{content:"";position:absolute;right:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#10b981}
.h803{position:relative;background:#f43f5e;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}
.h803:after{content:"";position:absolute;left:1.2em;top:100%;border-width:12px 12px 0;border-style:solid;border-color:#f43f5e transparent transparent}
.h804{position:relative;background:#fff;border:2px solid #0ea5e9;border-radius:8px;padding:.8em 1em;font-weight:700}
.h804:after{content:"";position:absolute;left:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#0ea5e9}
.h804:before{content:"";position:absolute;left:1.5em;bottom:-10px;border:10px solid transparent;border-top-color:#fff}
.h805{position:relative;background:#111;color:#fff;border-radius:8px;padding:1em 1.2em;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.h805:after{content:"";position:absolute;left:2.2em;bottom:-10px;border:10px solid transparent;border-top-color:#111}
.h806{position:relative;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;padding:.8em 1em;font-weight:700}
.h806:after{content:"";position:absolute;right:2em;top:100%;border-width:10px 10px 0;border-style:solid;border-color:#cbd5e1 transparent transparent}
.h806:before{content:"";position:absolute;right:2em;top:100%;transform:translateY(-2px);border-width:10px 10px 0;border-style:solid;border-color:#f8fafc transparent transparent}
.h807{position:relative;background:#fff;border:1px dashed #9ca3af;border-radius:10px;padding:.8em 1em;font-weight:700}
.h807:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;border:9px solid transparent;border-top-color:#9ca3af}
.h807:before{content:"";position:absolute;left:50%;transform:translateX(-50%) translateY(2px);bottom:-9px;border:9px solid transparent;border-top-color:#fff}
.h808{position:relative;background:#fff;border-left:6px solid #f59e0b;border-radius:6px;padding:.8em 1em;font-weight:700;box-shadow:0 10px 18px rgba(0,0,0,.08)}
.h808:after{content:"";position:absolute;left:1.2em;bottom:-10px;border:10px solid transparent;border-top-color:#fff;filter:drop-shadow(0 -1px 0 #f59e0b)}
.h809{position:relative;background:#e2e8f0;border-radius:24px;padding:1em 1.2em;font-weight:700}
.h809:after{content:"";position:absolute;right:2em;bottom:-12px;border:12px solid transparent;border-top-color:#e2e8f0}
.h810{position:relative;background:#fff;color:#111;border:1px solid #111;border-radius:8px;padding:1em;font-weight:700}
.h810:after{content:"";position:absolute;left:2em;bottom:-12px;border:12px solid transparent;border-top-color:#111}
.h810:before{content:"";position:absolute;left:2em;bottom:-10px;border:10px solid transparent;border-top-color:#fff}

.h801{position:relative;background:#3b82f6;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}

.h801:after{content:"";position:absolute;left:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#3b82f6}

.h802{position:relative;background:#10b981;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}

.h802:after{content:"";position:absolute;right:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#10b981}

.h803{position:relative;background:#f43f5e;color:#fff;border-radius:8px;padding:.8em 1em;font-weight:700}

.h803:after{content:"";position:absolute;left:1.2em;top:100%;border-width:12px 12px 0;border-style:solid;border-color:#f43f5e transparent transparent}

.h804{position:relative;background:#fff;border:2px solid #0ea5e9;border-radius:8px;padding:.8em 1em;font-weight:700}

.h804:after{content:"";position:absolute;left:1.5em;bottom:-12px;border:12px solid transparent;border-top-color:#0ea5e9}

.h804:before{content:"";position:absolute;left:1.5em;bottom:-10px;border:10px solid transparent;border-top-color:#fff}

.h805{position:relative;background:#111;color:#fff;border-radius:8px;padding:1em 1.2em;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.25)}

.h805:after{content:"";position:absolute;left:2.2em;bottom:-10px;border:10px solid transparent;border-top-color:#111}

.h806{position:relative;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;padding:.8em 1em;font-weight:700}

.h806:after{content:"";position:absolute;right:2em;top:100%;border-width:10px 10px 0;border-style:solid;border-color:#cbd5e1 transparent transparent}

.h806:before{content:"";position:absolute;right:2em;top:100%;transform:translateY(-2px);border-width:10px 10px 0;border-style:solid;border-color:#f8fafc transparent transparent}

.h807{position:relative;background:#fff;border:1px dashed #9ca3af;border-radius:10px;padding:.8em 1em;font-weight:700}

.h807:after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-9px;border:9px solid transparent;border-top-color:#9ca3af}

.h807:before{content:"";position:absolute;left:50%;transform:translateX(-50%) translateY(2px);bottom:-9px;border:9px solid transparent;border-top-color:#fff}

.h808{position:relative;background:#fff;border-left:6px solid #f59e0b;border-radius:6px;padding:.8em 1em;font-weight:700;box-shadow:0 10px 18px rgba(0,0,0,.08)}

.h808:after{content:"";position:absolute;left:1.2em;bottom:-10px;border:10px solid transparent;border-top-color:#fff;filter:drop-shadow(0 -1px 0 #f59e0b)}

.h809{position:relative;background:#e2e8f0;border-radius:24px;padding:1em 1.2em;font-weight:700}

.h809:after{content:"";position:absolute;right:2em;bottom:-12px;border:12px solid transparent;border-top-color:#e2e8f0}

.h810{position:relative;background:#fff;color:#111;border:1px solid #111;border-radius:8px;padding:1em;font-weight:700}

.h810:after{content:"";position:absolute;left:2em;bottom:-12px;border:12px solid transparent;border-top-color:#111}

.h810:before{content:"";position:absolute;left:2em;bottom:-10px;border:10px solid transparent;border-top-color:#fff}

9.文字の前にアイコンがある見出し

外部ライブラリ不要（絵文字ベース）。

見出しデザインサンプル901

見出しデザインサンプル902

見出しデザインサンプル903

見出しデザインサンプル904

見出しデザインサンプル905

見出しデザインサンプル906

見出しデザインサンプル907

見出しデザインサンプル908

見出しデザインサンプル909

見出しデザインサンプル910

&lt;h2 class="h903"&gt;見出し&lt;/h2&gt;

1	<h2 class="h903">見出し</h2>

.h901,.h902,.h903,.h904,.h905,.h906,.h907,.h908,.h909,.h910{display:flex;align-items:center;gap:.5em;font-weight:700;padding:.4em .6em}
.h901:before{content:"&#x1f516;"} .h902:before{content:"&#x2714;"} .h903:before{content:"&#x1f4cc;"} .h904:before{content:"&#x2b50;"} .h905:before{content:"&#x1f4a1;"}
.h906:before{content:"&#x25b6;"} .h907:before{content:"&#x1f4ce;"} .h908:before{content:"&#x1f3af;"} .h909:before{content:"&#x1f4dd;"} .h910:before{content:"&#x1f4e3;"}
.h903:before,.h904:before,.h908:before{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#3b82f6;color:#fff;font-size:.9em}
.h904:before{background:#f59e0b} .h908:before{background:#22c55e}
.h909{border-bottom:2px solid #cbd5e1}
.h910{border-left:6px solid #ef4444;background:#fff;padding:.6em 1em}

.h901,.h902,.h903,.h904,.h905,.h906,.h907,.h908,.h909,.h910{display:flex;align-items:center;gap:.5em;font-weight:700;padding:.4em .6em}

.h901:before{content:"🔖"} .h902:before{content:"✔"} .h903:before{content:"📌"} .h904:before{content:"⭐"} .h905:before{content:"💡"}

.h906:before{content:"▶"} .h907:before{content:"📎"} .h908:before{content:"🎯"} .h909:before{content:"📝"} .h910:before{content:"📣"}

.h903:before,.h904:before,.h908:before{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#3b82f6;color:#fff;font-size:.9em}

.h904:before{background:#f59e0b} .h908:before{background:#22c55e}

.h909{border-bottom:2px solid #cbd5e1}

.h910{border-left:6px solid #ef4444;background:#fff;padding:.6em 1em}

10.蛍光マーカーなど下線のデザイン性が高い見出し

見出しデザインサンプル1001

見出しデザインサンプル1002

見出しデザインサンプル1003

見出しデザインサンプル1004

見出しデザインサンプル1005

見出しデザインサンプル1006

見出しデザインサンプル1007

見出しデザインサンプル1008

見出しデザインサンプル1009

見出しデザインサンプル1010

.h1001{font-weight:700;padding:.2em .1em;box-shadow:inset 0 -0.5em 0 #fff59d;display:inline-block}
.h1002{font-weight:700;padding:.2em .1em;box-shadow:inset 0 -0.55em 0 #a7f3d0;display:inline-block}
.h1003{font-weight:700;padding:.2em .1em;background:linear-gradient(transparent 65%,#fef08a 0);display:inline}
.h1004{font-weight:700;padding:.2em .2em;background:repeating-linear-gradient(-45deg,rgba(253,224,71,.6)0 8px,rgba(253,224,71,.35)8px 16px) bottom/100% .6em no-repeat}
.h1005{font-weight:800;padding-bottom:.2em;background:linear-gradient(#22c55e,#22c55e) 0 100%/100% .24em no-repeat}
.h1006{font-weight:800;text-decoration:underline wavy 3px #f43f5e;text-underline-offset:.25em}
.h1007{font-weight:800;padding-bottom:.2em;background:radial-gradient(closest-side,#93c5fd 70%,transparent 71%) 0 100%/8px 6px repeat-x}
.h1008{font-weight:800;padding-bottom:.2em;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 6px) 0 100%/100% 3px no-repeat}
.h1009{font-weight:800;position:relative;padding:.2em .1em;display:inline-block}
.h1009:after{content:"";position:absolute;left:.2em;right:.2em;bottom:.1em;height:.55em;background:#ffedd5;filter:blur(1px);z-index:-1}
.h1010{font-weight:800;padding-bottom:.3em;background:linear-gradient(90deg,#60a5fa,#f472b6) 0 100%/100% .25em no-repeat}

.h1001{font-weight:700;padding:.2em .1em;box-shadow:inset 0 -0.5em 0 #fff59d;display:inline-block}

.h1002{font-weight:700;padding:.2em .1em;box-shadow:inset 0 -0.55em 0 #a7f3d0;display:inline-block}

.h1003{font-weight:700;padding:.2em .1em;background:linear-gradient(transparent 65%,#fef08a 0);display:inline}

.h1004{font-weight:700;padding:.2em .2em;background:repeating-linear-gradient(-45deg,rgba(253,224,71,.6)0 8px,rgba(253,224,71,.35)8px 16px) bottom/100% .6em no-repeat}

.h1005{font-weight:800;padding-bottom:.2em;background:linear-gradient(#22c55e,#22c55e) 0 100%/100% .24em no-repeat}

.h1006{font-weight:800;text-decoration:underline wavy 3px #f43f5e;text-underline-offset:.25em}

.h1007{font-weight:800;padding-bottom:.2em;background:radial-gradient(closest-side,#93c5fd 70%,transparent 71%) 0 100%/8px 6px repeat-x}

.h1008{font-weight:800;padding-bottom:.2em;background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 6px) 0 100%/100% 3px no-repeat}

.h1009{font-weight:800;position:relative;padding:.2em .1em;display:inline-block}

.h1009:after{content:"";position:absolute;left:.2em;right:.2em;bottom:.1em;height:.55em;background:#ffedd5;filter:blur(1px);z-index:-1}

.h1010{font-weight:800;padding-bottom:.3em;background:linear-gradient(90deg,#60a5fa,#f472b6) 0 100%/100% .25em no-repeat}

11.タブ付きの見出し

data-tab 属性にラベル文字を指定します。

見出しデザインサンプル1101

見出しデザインサンプル1102

見出しデザインサンプル1103

見出しデザインサンプル1104

見出しデザインサンプル1105

見出しデザインサンプル1106

見出しデザインサンプル1107

見出しデザインサンプル1108

見出しデザインサンプル1109

見出しデザインサンプル1110

&lt;h2 class="h1101" data-tab="POINT"&gt;見出し&lt;/h2&gt;

1	<h2 class="h1101" data-tab="POINT">見出し</h2>

.h1101,.h1102,.h1103,.h1104,.h1105,.h1106,.h1107,.h1108,.h1109,.h1110{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:1.1em 1em .9em;font-weight:700}
.h1101:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#6366f1;color:#fff;font-weight:700;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #4f46e5}
.h1102:before{content:attr(data-tab);position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #16a34a}
.h1103:before{content:attr(data-tab);position:absolute;top:-14px;right:1em;background:#f59e0b;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #d97706}
.h1104{padding-left:4.5em}
.h1104:before{content:attr(data-tab);position:absolute;left:0;top:0;bottom:0;width:4em;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px 0 0 0}
.h1104:after{content:"";position:absolute;left:4em;top:0;border-width:8px 8px 0 0;border-style:solid;border-color:#0ea5e9 transparent transparent}
.h1105:before,.h1105:after{content:"";position:absolute;top:-10px;width:58px;height:16px;background:#eab308;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #d97706}
.h1105:before{left:1em} .h1105:after{right:1em}
.h1106:before{content:"";position:absolute;top:-12px;left:1em;width:70px;height:20px;background:linear-gradient(90deg,#ef4444,#f97316);border-radius:6px 6px 0 0;box-shadow:0 2px 0 #b91c1c}
.h1107{background:#f8fafc;border:1px solid #cbd5e1}
.h1107:before{content:attr(data-tab);position:absolute;top:-12px;left:1em;background:#111;color:#fff;padding:.25em .6em;border-radius:999px;box-shadow:0 2px 0 #6b7280}
.h1108{border-top:6px solid #3b82f6}
.h1108:before{content:attr(data-tab);position:absolute;top:-6px;left:1em;background:#3b82f6;color:#fff;padding:.2em .5em;border-radius:4px}
.h1109{border-top:1px dashed #94a3b8}
.h1109:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#94a3b8;color:#fff;padding:.2em .6em;border-radius:6px 6px 0 0}
.h1110{border-top:0;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#06b6d4,#a855f7) border-box;border-top:4px solid transparent}
.h1110:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#06b6d4;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #0e7490}

.h1101,.h1102,.h1103,.h1104,.h1105,.h1106,.h1107,.h1108,.h1109,.h1110{position:relative;background:#fff;border:1px solid #e5e7eb;border-radius:8px 8px 0 0;padding:1.1em 1em .9em;font-weight:700}

.h1101:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#6366f1;color:#fff;font-weight:700;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #4f46e5}

.h1102:before{content:attr(data-tab);position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:#22c55e;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #16a34a}

.h1103:before{content:attr(data-tab);position:absolute;top:-14px;right:1em;background:#f59e0b;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #d97706}

.h1104{padding-left:4.5em}

.h1104:before{content:attr(data-tab);position:absolute;left:0;top:0;bottom:0;width:4em;background:#0ea5e9;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:8px 0 0 0}

.h1104:after{content:"";position:absolute;left:4em;top:0;border-width:8px 8px 0 0;border-style:solid;border-color:#0ea5e9 transparent transparent}

.h1105:before,.h1105:after{content:"";position:absolute;top:-10px;width:58px;height:16px;background:#eab308;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #d97706}

.h1105:before{left:1em} .h1105:after{right:1em}

.h1106:before{content:"";position:absolute;top:-12px;left:1em;width:70px;height:20px;background:linear-gradient(90deg,#ef4444,#f97316);border-radius:6px 6px 0 0;box-shadow:0 2px 0 #b91c1c}

.h1107{background:#f8fafc;border:1px solid #cbd5e1}

.h1107:before{content:attr(data-tab);position:absolute;top:-12px;left:1em;background:#111;color:#fff;padding:.25em .6em;border-radius:999px;box-shadow:0 2px 0 #6b7280}

.h1108{border-top:6px solid #3b82f6}

.h1108:before{content:attr(data-tab);position:absolute;top:-6px;left:1em;background:#3b82f6;color:#fff;padding:.2em .5em;border-radius:4px}

.h1109{border-top:1px dashed #94a3b8}

.h1109:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#94a3b8;color:#fff;padding:.2em .6em;border-radius:6px 6px 0 0}

.h1110{border-top:0;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#06b6d4,#a855f7) border-box;border-top:4px solid transparent}

.h1110:before{content:attr(data-tab);position:absolute;top:-14px;left:1em;background:#06b6d4;color:#fff;padding:.25em .6em;border-radius:6px 6px 0 0;box-shadow:0 2px 0 #0e7490}

12.下線付きの見出し

見出しデザインサンプル121

見出しデザインサンプル122

見出しデザインサンプル123

見出しデザインサンプル124

見出しデザインサンプル125

&lt;h2 class="a121"&gt;見出し&lt;/h2&gt;

1	<h2 class="a121">見出し</h2>

.a121{background:linear-gradient(to right,#ff7e5f,#feb47b);color:#fff;font-weight:600;padding:10px;border-radius:5px}
.a122{background:linear-gradient(to right,#2193b0,#6dd5ed);color:#fff;font-weight:600;padding:10px;border-radius:5px}
.a123{background:linear-gradient(to right,#667eea,#764ba2);color:#fff;font-weight:600;padding:10px;border-radius:5px}
.a124{background:linear-gradient(45deg,#fc466b,#3f5efb);color:#fff;font-weight:600;padding:10px;border-radius:5px}
.a125{background:linear-gradient(to right,#11998e,#38ef7d);color:#fff;font-weight:600;padding:10px;border-radius:5px}

.a121{background:linear-gradient(to right,#ff7e5f,#feb47b);color:#fff;font-weight:600;padding:10px;border-radius:5px}

.a122{background:linear-gradient(to right,#2193b0,#6dd5ed);color:#fff;font-weight:600;padding:10px;border-radius:5px}

.a123{background:linear-gradient(to right,#667eea,#764ba2);color:#fff;font-weight:600;padding:10px;border-radius:5px}

.a124{background:linear-gradient(45deg,#fc466b,#3f5efb);color:#fff;font-weight:600;padding:10px;border-radius:5px}

.a125{background:linear-gradient(to right,#11998e,#38ef7d);color:#fff;font-weight:600;padding:10px;border-radius:5px}

13.ステッチ（縫い目）デザインの見出し

見出しデザインサンプル131

見出しデザインサンプル132

&lt;h2 class="a131"&gt;見出し&lt;/h2&gt;

1	<h2 class="a131">見出し</h2>

.a131{border:2px dashed #333;background:#fff;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 5px #f8f8f8;margin:5px}
.a132{border:1px dashed #aaa;background:#f8f8f8;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 3px #ddd;margin:3px}

1 2	.a131{border:2px dashed #333;background:#fff;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 5px #f8f8f8;margin:5px} .a132{border:1px dashed #aaa;background:#f8f8f8;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 3px #ddd;margin:3px}

14.角丸のリボン型見出し

見出しデザインサンプル141

見出しデザインサンプル142

&lt;h2 class="a141"&gt;見出し&lt;/h2&gt;

1	<h2 class="a141">見出し</h2>

.a141{background:#3498db;color:#fff;font-weight:600;padding:10px 15px;border-radius:5px 20px 5px 20px}
.a142{background:#e74c3c;color:#fff;font-weight:600;padding:10px 20px;border-radius:0 10px 10px 0;margin-left:-10px;border-left:10px solid #c0392b}

1 2	.a141{background:#3498db;color:#fff;font-weight:600;padding:10px 15px;border-radius:5px 20px 5px 20px} .a142{background:#e74c3c;color:#fff;font-weight:600;padding:10px 20px;border-radius:0 10px 10px 0;margin-left:-10px;border-left:10px solid #c0392b}

15.波線下線付きの見出し

見出しデザインサンプル151

見出しデザインサンプル152

見出しデザインサンプル154

見出しデザインサンプル158

見出しデザインサンプル159

見出しデザインサンプル160

.a151{border-bottom:2px wavy #3498db;font-weight:600;padding:5px 0;margin:10px 0}
.a152{font-weight:600;padding:5px 0;background-image:linear-gradient(to right,#333 30%,rgba(255,255,255,0) 0%);background-position:bottom;background-size:10px 2px;background-repeat:repeat-x;padding-bottom:5px}
.a154{font-weight:600;padding:5px 0;border-bottom:4px dotted #2ecc71}
.a158{font-weight:600;padding:5px 0;border-bottom:4px dashed #1abc9c}
.a159{font-weight:600;padding:5px 0;background-image:url('data:image/svg+xml,&lt;svg xmlns="http://www.w3.org/2000/svg" width="8" height="4"&gt;&lt;circle cx="1" cy="1" r="1" fill="%2334495e"/&gt;&lt;circle cx="5" cy="3" r="1" fill="%2334495e"/&gt;&lt;/svg&gt;');background-position:bottom;background-repeat:repeat-x;padding-bottom:8px}
.a160{font-weight:600;padding:5px 0;border-image:radial-gradient(circle at 8px 8px,#f39c12 0%,#f39c12 30%,transparent 30%) 0 0 8 0 repeat;border-bottom:4px solid transparent}

.a151{border-bottom:2px wavy #3498db;font-weight:600;padding:5px 0;margin:10px 0}

.a152{font-weight:600;padding:5px 0;background-image:linear-gradient(to right,#333 30%,rgba(255,255,255,0) 0%);background-position:bottom;background-size:10px 2px;background-repeat:repeat-x;padding-bottom:5px}

.a154{font-weight:600;padding:5px 0;border-bottom:4px dotted #2ecc71}

.a158{font-weight:600;padding:5px 0;border-bottom:4px dashed #1abc9c}

.a159{font-weight:600;padding:5px 0;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4"><circle cx="1" cy="1" r="1" fill="%2334495e"/><circle cx="5" cy="3" r="1" fill="%2334495e"/></svg>');background-position:bottom;background-repeat:repeat-x;padding-bottom:8px}

.a160{font-weight:600;padding:5px 0;border-image:radial-gradient(circle at 8px 8px,#f39c12 0%,#f39c12 30%,transparent 30%) 0 0 8 0 repeat;border-bottom:4px solid transparent}

16.二重線枠の見出し

見出しデザインサンプル161

見出しデザインサンプル163

.a161{border:5px double #3498db;font-weight:600;padding:10px;border-radius:5px}
.a163{border:4px double #2ecc71;font-weight:600;padding:15px;outline:1px solid #2ecc71;outline-offset:-10px}

1 2	.a161{border:5px double #3498db;font-weight:600;padding:10px;border-radius:5px} .a163{border:4px double #2ecc71;font-weight:600;padding:15px;outline:1px solid #2ecc71;outline-offset:-10px}

17.横スクロールエフェクト付きの見出し

見出しデザインサンプル171

見出しデザインサンプル172

見出しデザインサンプル173

見出しデザインサンプル174

見出しデザインサンプル175

見出しデザインサンプル176

見出しデザインサンプル177

見出しデザインサンプル178

見出しデザインサンプル179

見出しデザインサンプル180

@keyframes scrollX{to{background-position:200% 0}}
.h171,.h172,.h173,.h174,.h175,.h176,.h177,.h178,.h179,.h180{position:relative;overflow:hidden;font-weight:700;padding:1em 1em .9em;border-bottom:2px solid #e5e7eb}
.h171:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.6),transparent);background-size:200% 100%;animation:scrollX 2.4s linear infinite}
.h172{border-left:6px solid #3b82f6}
.h172:after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:repeating-linear-gradient(90deg,rgba(59,130,246,.12)0 12px,transparent 12px 24px);background-size:200% 100%;animation:scrollX 6s linear infinite}
.h173:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#94a3b8 0 16px,#e2e8f0 16px 32px);background-size:200% 100%;animation:scrollX 4s linear infinite}
.h174{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:1em}
.h174:after{content:"";position:absolute;left:-50%;right:-50%;top:0;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent);animation:scrollX 2.8s linear infinite}
.h175:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#22c55e 0,#22c55e 50%,#86efac 50%,#86efac 100%);background-size:200% 100%;animation:scrollX 1.8s linear infinite}
.h176{border-left:4px solid transparent;padding-left:1em}
.h176:after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(#ef4444,#f97316);background-size:100% 200%;animation:scrollX 3s linear infinite}
.h177:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent 0 20%,#0ea5e9 20% 40%,transparent 40% 60%,#0ea5e9 60% 80%,transparent 80% 100%);background-size:200% 100%;animation:scrollX 2.2s linear infinite}
.h178{border-bottom:3px solid #ecf0f1}
.h178:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#a855f7,#06b6d4,#22c55e,#eab308);background-size:200% 100%;animation:scrollX 3.5s linear infinite}
.h179:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12)0 10px,transparent 10px 20px);background-size:200% 100%;animation:scrollX 5s linear infinite}
.h180{background:#f8f8f8;border-radius:8px;padding:1em}
.h180:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,rgba(59,130,246,.4),rgba(99,102,241,.4),rgba(236,72,153,.4));background-size:200% 100%;animation:scrollX 3.2s linear infinite}
@media (prefers-reduced-motion:reduce){.h171:after,.h172:after,.h173:after,.h174:after,.h175:after,.h176:after,.h177:after,.h178:after,.h179:after,.h180:after{animation:none}}

@keyframes scrollX{to{background-position:200% 0}}

.h171,.h172,.h173,.h174,.h175,.h176,.h177,.h178,.h179,.h180{position:relative;overflow:hidden;font-weight:700;padding:1em 1em .9em;border-bottom:2px solid #e5e7eb}

.h171:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.6),transparent);background-size:200% 100%;animation:scrollX 2.4s linear infinite}

.h172{border-left:6px solid #3b82f6}

.h172:after{content:"";position:absolute;left:0;top:0;bottom:0;width:100%;background:repeating-linear-gradient(90deg,rgba(59,130,246,.12)0 12px,transparent 12px 24px);background-size:200% 100%;animation:scrollX 6s linear infinite}

.h173:after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,#94a3b8 0 16px,#e2e8f0 16px 32px);background-size:200% 100%;animation:scrollX 4s linear infinite}

.h174{background:#f8fafc;border:1px solid #e5e7eb;border-radius:8px;padding:1em}

.h174:after{content:"";position:absolute;left:-50%;right:-50%;top:0;height:100%;background:linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent);animation:scrollX 2.8s linear infinite}

.h175:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#22c55e 0,#22c55e 50%,#86efac 50%,#86efac 100%);background-size:200% 100%;animation:scrollX 1.8s linear infinite}

.h176{border-left:4px solid transparent;padding-left:1em}

.h176:after{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(#ef4444,#f97316);background-size:100% 200%;animation:scrollX 3s linear infinite}

.h177:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent 0 20%,#0ea5e9 20% 40%,transparent 40% 60%,#0ea5e9 60% 80%,transparent 80% 100%);background-size:200% 100%;animation:scrollX 2.2s linear infinite}

.h178{border-bottom:3px solid #ecf0f1}

.h178:after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;background:linear-gradient(90deg,#a855f7,#06b6d4,#22c55e,#eab308);background-size:200% 100%;animation:scrollX 3.5s linear infinite}

.h179:after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.12)0 10px,transparent 10px 20px);background-size:200% 100%;animation:scrollX 5s linear infinite}

.h180{background:#f8f8f8;border-radius:8px;padding:1em}

.h180:after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:linear-gradient(90deg,rgba(59,130,246,.4),rgba(99,102,241,.4),rgba(236,72,153,.4));background-size:200% 100%;animation:scrollX 3.2s linear infinite}

@media (prefers-reduced-motion:reduce){.h171:after,.h172:after,.h173:after,.h174:after,.h175:after,.h176:after,.h177:after,.h178:after,.h179:after,.h180:after{animation:none}}

18.ドットパターン背景の見出し

見出しデザインサンプル181

見出しデザインサンプル182

.a181{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#3498db 1px,transparent 1px);background-size:10px 10px}
.a182{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#e74c3c 2px,transparent 2px);background-size:20px 20px;border-left:4px solid #e74c3c}

.a181{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#3498db 1px,transparent 1px);background-size:10px 10px}

.a182{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#e74c3c 2px,transparent 2px);background-size:20px 20px;border-left:4px solid #e74c3c}

19.折り紙風の折れ曲がり角デザインの見出し

見出しデザインサンプル1901

見出しデザインサンプル1902

見出しデザインサンプル1903

見出しデザインサンプル1904

見出しデザインサンプル1905

見出しデザインサンプル1906

見出しデザインサンプル1907

見出しデザインサンプル1908

見出しデザインサンプル1909

見出しデザインサンプル1910

.h1901,.h1902,.h1903,.h1904,.h1905,.h1906,.h1907,.h1908,.h1909,.h1910{position:relative;background:#fff;border:1px solid #e5e7eb;padding:1em;border-radius:6px;font-weight:700}
.h1901:after{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #e5e7eb transparent}
.h1901:before{content:"";position:absolute;top:0;right:0;border-width:0 0 14px 14px;border-style:solid;border-color:transparent transparent #fff transparent}
.h1902:after{content:"";position:absolute;top:0;left:0;border-width:0 16px 16px 0;border-style:solid;border-color:transparent #e5e7eb transparent transparent}
.h1902:before{content:"";position:absolute;top:0;left:0;border-width:0 14px 14px 0;border-style:solid;border-color:transparent #fff transparent transparent}
.h1903{border-left:4px solid #22c55e}
.h1903:after{content:"";position:absolute;top:0;right:0;border-width:0 0 20px 20px;border-style:solid;border-color:transparent transparent #22c55e transparent}
.h1903:before{content:"";position:absolute;top:0;right:0;border-width:0 0 18px 18px;border-style:solid;border-color:transparent transparent #fff transparent}
.h1904{border-radius:0 6px 6px 6px;box-shadow:0 6px 14px rgba(0,0,0,.08)}
.h1904:after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;background:linear-gradient(135deg,#e5e7eb 0 50%,transparent 50%);border-top-right-radius:6px}
.h1905{background:#f8fafc}
.h1905:after{content:"";position:absolute;top:0;left:0;border-width:18px 18px 0 0;border-style:solid;border-color:#0ea5e9 transparent transparent;filter:drop-shadow(0 2px 0 #0284c7)}
.h1906{border:1px dashed #94a3b8}
.h1906:after{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #94a3b8 transparent}
.h1906:before{content:"";position:absolute;top:0;right:0;border-width:0 0 14px 14px;border-style:solid;border-color:transparent transparent #fff transparent}
.h1907{background:#fff8e1;border-color:#f59e0b}
.h1907:after{content:"";position:absolute;top:0;left:0;border-width:0 18px 18px 0;border-style:solid;border-color:transparent #f59e0b transparent}
.h1907:before{content:"";position:absolute;top:0;left:0;border-width:0 16px 16px 0;border-style:solid;border-color:transparent #fff8e1 transparent}
.h1908{border-radius:10px}
.h1908:after{content:"";position:absolute;top:0;right:0;width:24px;height:24px;background:radial-gradient(circle at 100% 0,#e5e7eb 0 70%,transparent 71%);border-top-right-radius:10px}
.h1909{background:#111;color:#fff;border-color:#111}
.h1909:after{content:"";position:absolute;top:0;right:0;border-width:0 0 18px 18px;border-style:solid;border-color:transparent transparent #6b7280 transparent}
.h1909:before{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #111 transparent}
.h1910{border-left:6px solid #a855f7}
.h1910:after{content:"";position:absolute;top:0;right:0;border-width:0 0 22px 22px;border-style:solid;border-color:transparent transparent #a855f7 transparent}
.h1910:before{content:"";position:absolute;top:0;right:0;border-width:0 0 20px 20px;border-style:solid;border-color:transparent transparent #fff transparent}

.h1901,.h1902,.h1903,.h1904,.h1905,.h1906,.h1907,.h1908,.h1909,.h1910{position:relative;background:#fff;border:1px solid #e5e7eb;padding:1em;border-radius:6px;font-weight:700}

.h1901:after{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #e5e7eb transparent}

.h1901:before{content:"";position:absolute;top:0;right:0;border-width:0 0 14px 14px;border-style:solid;border-color:transparent transparent #fff transparent}

.h1902:after{content:"";position:absolute;top:0;left:0;border-width:0 16px 16px 0;border-style:solid;border-color:transparent #e5e7eb transparent transparent}

.h1902:before{content:"";position:absolute;top:0;left:0;border-width:0 14px 14px 0;border-style:solid;border-color:transparent #fff transparent transparent}

.h1903{border-left:4px solid #22c55e}

.h1903:after{content:"";position:absolute;top:0;right:0;border-width:0 0 20px 20px;border-style:solid;border-color:transparent transparent #22c55e transparent}

.h1903:before{content:"";position:absolute;top:0;right:0;border-width:0 0 18px 18px;border-style:solid;border-color:transparent transparent #fff transparent}

.h1904{border-radius:0 6px 6px 6px;box-shadow:0 6px 14px rgba(0,0,0,.08)}

.h1904:after{content:"";position:absolute;top:0;right:0;width:22px;height:22px;background:linear-gradient(135deg,#e5e7eb 0 50%,transparent 50%);border-top-right-radius:6px}

.h1905{background:#f8fafc}

.h1905:after{content:"";position:absolute;top:0;left:0;border-width:18px 18px 0 0;border-style:solid;border-color:#0ea5e9 transparent transparent;filter:drop-shadow(0 2px 0 #0284c7)}

.h1906{border:1px dashed #94a3b8}

.h1906:after{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #94a3b8 transparent}

.h1906:before{content:"";position:absolute;top:0;right:0;border-width:0 0 14px 14px;border-style:solid;border-color:transparent transparent #fff transparent}

.h1907{background:#fff8e1;border-color:#f59e0b}

.h1907:after{content:"";position:absolute;top:0;left:0;border-width:0 18px 18px 0;border-style:solid;border-color:transparent #f59e0b transparent}

.h1907:before{content:"";position:absolute;top:0;left:0;border-width:0 16px 16px 0;border-style:solid;border-color:transparent #fff8e1 transparent}

.h1908{border-radius:10px}

.h1908:after{content:"";position:absolute;top:0;right:0;width:24px;height:24px;background:radial-gradient(circle at 100% 0,#e5e7eb 0 70%,transparent 71%);border-top-right-radius:10px}

.h1909{background:#111;color:#fff;border-color:#111}

.h1909:after{content:"";position:absolute;top:0;right:0;border-width:0 0 18px 18px;border-style:solid;border-color:transparent transparent #6b7280 transparent}

.h1909:before{content:"";position:absolute;top:0;right:0;border-width:0 0 16px 16px;border-style:solid;border-color:transparent transparent #111 transparent}

.h1910{border-left:6px solid #a855f7}

.h1910:after{content:"";position:absolute;top:0;right:0;border-width:0 0 22px 22px;border-style:solid;border-color:transparent transparent #a855f7 transparent}

.h1910:before{content:"";position:absolute;top:0;right:0;border-width:0 0 20px 20px;border-style:solid;border-color:transparent transparent #fff transparent}

20.テープ貼り付け風の見出し

見出しデザインサンプル2001

見出しデザインサンプル2002

見出しデザインサンプル2003

見出しデザインサンプル2004

見出しデザインサンプル2005

見出しデザインサンプル2006

見出しデザインサンプル2007

見出しデザインサンプル2008

見出しデザインサンプル2009

見出しデザインサンプル2010

.h2001,.h2002,.h2003,.h2004,.h2005,.h2006,.h2007,.h2008,.h2009,.h2010{position:relative;background:#fff;border:1px solid #e5e7eb;padding:1em;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-weight:700}
.h2001:before,.h2001:after{content:"";position:absolute;top:-12px;width:90px;height:22px;background:linear-gradient(#ffe29f,#ffc76d);opacity:.95;box-shadow:0 4px 6px rgba(0,0,0,.12)}
.h2001:before{left:12px;transform:rotate(-6deg)} .h2001:after{right:12px;transform:rotate(6deg)}
.h2002:before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(2deg);width:140px;height:22px;background:linear-gradient(#c7d2fe,#a5b4fc);box-shadow:0 4px 6px rgba(0,0,0,.12);opacity:.95}
.h2003:before{content:"";position:absolute;top:-14px;left:14px;width:100px;height:24px;background:linear-gradient(#fbcfe8,#f9a8d4);transform:rotate(-10deg);clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}
.h2004:before,.h2004:after{content:"";position:absolute;top:-12px;width:80px;height:20px;background:linear-gradient(#99f6e4,#5eead4);opacity:.95}
.h2004:before{left:8px;transform:rotate(-8deg)} .h2004:after{left:96px;transform:rotate(4deg)}
.h2005:before{content:"";position:absolute;top:-12px;right:10px;width:120px;height:22px;background:linear-gradient(#fde68a,#fcd34d);opacity:.95;clip-path:polygon(0 0,100% 0,100% 85%,92% 100%,0 100%)}
.h2006{background:#fff8e1;border-color:#fcd34d}
.h2006:before,.h2006:after{content:"";position:absolute;top:-10px;width:84px;height:20px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.45)0 10px,rgba(255,255,255,.2)10px 20px),linear-gradient(#f59e0b,#fbbf24);opacity:.95;box-shadow:0 3px 6px rgba(0,0,0,.12)}
.h2006:before{left:16px;transform:rotate(-5deg)} .h2006:after{right:16px;transform:rotate(7deg)}
.h2007:before{content:"";position:absolute;top:-12px;left:12px;width:90px;height:22px;background:linear-gradient(#e5e7eb,#cbd5e1);opacity:.95;border:1px dashed #6b7280;transform:rotate(-6deg)}
.h2008{border-left:6px solid #ef4444}
.h2008:before{content:"";position:absolute;top:-12px;left:calc(50% - 45px);width:90px;height:22px;background:linear-gradient(#fecaca,#fca5a5);opacity:.95;transform:rotate(-3deg)}
.h2009:before,.h2009:after{content:"";position:absolute;top:-10px;width:70px;height:20px;background:linear-gradient(#bae6fd,#93c5fd);opacity:.95}
.h2009:before{left:10px;transform:rotate(-8deg)} .h2009:after{right:10px;transform:rotate(8deg)}
.h2010{background:#f8fafc;border-color:#cbd5e1}
.h2010:before{content:"";position:absolute;top:-10px;left:1em;width:110px;height:20px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.45)0 12px,rgba(255,255,255,.15)12px 24px),linear-gradient(#94a3b8,#64748b);opacity:.95;transform:rotate(-4deg)}

.h2001,.h2002,.h2003,.h2004,.h2005,.h2006,.h2007,.h2008,.h2009,.h2010{position:relative;background:#fff;border:1px solid #e5e7eb;padding:1em;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.08);font-weight:700}

.h2001:before,.h2001:after{content:"";position:absolute;top:-12px;width:90px;height:22px;background:linear-gradient(#ffe29f,#ffc76d);opacity:.95;box-shadow:0 4px 6px rgba(0,0,0,.12)}

.h2001:before{left:12px;transform:rotate(-6deg)} .h2001:after{right:12px;transform:rotate(6deg)}

.h2002:before{content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(2deg);width:140px;height:22px;background:linear-gradient(#c7d2fe,#a5b4fc);box-shadow:0 4px 6px rgba(0,0,0,.12);opacity:.95}

.h2003:before{content:"";position:absolute;top:-14px;left:14px;width:100px;height:24px;background:linear-gradient(#fbcfe8,#f9a8d4);transform:rotate(-10deg);clip-path:polygon(0 0,100% 0,92% 100%,0 100%)}

.h2004:before,.h2004:after{content:"";position:absolute;top:-12px;width:80px;height:20px;background:linear-gradient(#99f6e4,#5eead4);opacity:.95}

.h2004:before{left:8px;transform:rotate(-8deg)} .h2004:after{left:96px;transform:rotate(4deg)}

.h2005:before{content:"";position:absolute;top:-12px;right:10px;width:120px;height:22px;background:linear-gradient(#fde68a,#fcd34d);opacity:.95;clip-path:polygon(0 0,100% 0,100% 85%,92% 100%,0 100%)}

.h2006{background:#fff8e1;border-color:#fcd34d}

.h2006:before,.h2006:after{content:"";position:absolute;top:-10px;width:84px;height:20px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.45)0 10px,rgba(255,255,255,.2)10px 20px),linear-gradient(#f59e0b,#fbbf24);opacity:.95;box-shadow:0 3px 6px rgba(0,0,0,.12)}

.h2006:before{left:16px;transform:rotate(-5deg)} .h2006:after{right:16px;transform:rotate(7deg)}

.h2007:before{content:"";position:absolute;top:-12px;left:12px;width:90px;height:22px;background:linear-gradient(#e5e7eb,#cbd5e1);opacity:.95;border:1px dashed #6b7280;transform:rotate(-6deg)}

.h2008{border-left:6px solid #ef4444}

.h2008:before{content:"";position:absolute;top:-12px;left:calc(50% - 45px);width:90px;height:22px;background:linear-gradient(#fecaca,#fca5a5);opacity:.95;transform:rotate(-3deg)}

.h2009:before,.h2009:after{content:"";position:absolute;top:-10px;width:70px;height:20px;background:linear-gradient(#bae6fd,#93c5fd);opacity:.95}

.h2009:before{left:10px;transform:rotate(-8deg)} .h2009:after{right:10px;transform:rotate(8deg)}

.h2010{background:#f8fafc;border-color:#cbd5e1}

.h2010:before{content:"";position:absolute;top:-10px;left:1em;width:110px;height:20px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.45)0 12px,rgba(255,255,255,.15)12px 24px),linear-gradient(#94a3b8,#64748b);opacity:.95;transform:rotate(-4deg)}

※本ページの実表示は下の「カスタムCSS」を適用して行っています。上記のコードブロックは読者向けのコピー用です。