【HTML】【CSS】コピペで使えるサンプル集－見出し編（シンプル）

ブログなどでコピペだけで使えるHTMLタグのサンプル集を紹介していきたいと思います。

ここでは見出し編として一般的にブログ等で使用されているシンプルな見出しをまとめてみましたので、
気に入ったものがあればご利用ください(^o^)／

CSSがわかる方は色や大きさも好きにカスタマイズしていただければと思います。

タグ内でCSSを使用していますので、コピペで利用可能なものだけを紹介しています。
画像は使用しておりません。

■利用方法
・テキストエリアのHTMLタグをコピペしてブログ等に貼り付けてください
・見出しのタイトルは書き換えてください
・背景色を変更したい場合は「background」の部分を変更してください
・文字色を変更したい場合は「color」の部分を変更してください

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編

────────────────────────────────────────────────────────────────────
----------------------------------------------------------------------------------------------------------------------------------------

見出しサンプル集

----------------------------------------------------------------------------------------------------------------------------------------
────────────────────────────────────────────────────────────────────

見出し①

<h1 style="background-color: #fefdfa; border-bottom-color: rgb(170, 170, 170); border-bottom-style: solid; border-left-color: rgb(170, 170, 170); border-left-style: solid; border-width: 0px 0px 1px 7px; clear: both; color: #333333; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px 0px 20px; padding: 0.3em 0.5em; position: relative; vertical-align: baseline;"> 見出し①</h1>

見出し②

<h1 style="background: #eee; border-bottom: 1px dashed #aaa; border-top: 1px dashed #aaa; box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; color: #665555; font: bold 24px/1.6 Arial, Helvetica, sans-serif; padding: 5px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1);"> 見出し②</h1>

見出し③

<h1 style="-moz-transform: rotate(-3deg) skew(-3deg); -ms-transform: rotate(-3deg) skew(-3deg); -o-transform: rotate(-3deg) skew(-3deg); -webkit-transform: rotate(-3deg) skew(-3deg); background: #f0e800; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 30px 0 0 0 #f0e800, -30px 0 0 0 #f0e800; color: #333333; font: bold 30px/1.6 Arial, Helvetica, sans-serif; margin: 0 -1px; position: relative; text-align: center; text-shadow: 1px 1px 0 rgba(255,255,255,1); transform: rotate(-3deg) skew(-3deg);"> 見出し③</h1>

見出し④

<h1 style="border-bottom: 1px dashed #B92A2C; border-left: 7px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;"> 見出し④</h1>

見出し⑤

<h1 style="border-bottom: 3px double #B92A2C; border-top: 3px double #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;"> 見出し⑤</h1>

見出し⑥

<h1 style="-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;"> 見出し⑥</h1>

見出し⑦

<h1 style="-moz-border-radius: 5px; -webkit-border-radius: 5px; background: #B92A2C; border-radius: 5px; color: white; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em; position: relative;"> 見出し⑦</h1>

見出し⑧

<h1 style="-moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); border: 2px solid #B92A2C; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.8em;"> 見出し⑧</h1>

見出し⑨

<h1 style="-moz-box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; border-bottom: 2px solid #B92A2C; box-shadow: 0 1px 0 #aaaaaa; color: #111111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; text-shadow: #999999 0px 1px 1px;"> <font style="font-size:3.0em;">見</font>出し⑨</h1>

見出し⑩

見出し⑩

見出し⑩

見出し⑩

見出し⑩

<h1 style="border-left: 15px solid #8491c3;padding: 7px;background: #ccd6ff;"> 見出し⑩</h1> <h1 style="border-left: 15px solid #89c3eb;padding: 7px;background: #bbd7ea;"> 見出し⑩</h1> <h1 style="border-left: 15px solid #f09199;padding: 7px;background: #efd7d9;"> 見出し⑩</h1> <h1 style="border-left: 15px solid #c3d825;padding: 7px;background: #e3e5d0;"> 見出し⑩</h1> <h1 style="border-left: 15px solid #769164;padding: 7px;background: #e0ffcc;"> 見出し⑩</h1>

見出し⑪

見出し⑪

見出し⑪

見出し⑪

見出し⑪

<h1 style="border-bottom: 1px solid #426579;border-left: 10px solid #426579;padding: 7px;"> 見出し⑪</h1> <h1 style="border-bottom: 1px solid #006e54;border-left: 10px solid #006e54;padding: 7px;"> 見出し⑪</h1> <h1 style="border-bottom: 1px solid #715c1f;border-left: 10px solid #715c1f;padding: 7px;"> 見出し⑪</h1> <h1 style="border-bottom: 1px solid #c85179;border-left: 10px solid #c85179;padding: 7px;"> 見出し⑪</h1> <h1 style="border-bottom: 1px solid #9790a4;border-left: 10px solid #9790a4;padding: 7px;"> 見出し⑪</h1>

見出し⑫

<h1 style="background: -moz-linear-gradient(top left, #ffffff, #ffcc00 60%, #ff9900 80%, #ff6600);background: -webkit-gradient(linear, left top, right bottom, from(#ffffff), color-stop(60%, #ffcc00), color-stop(80%, #ff9900), to(#ff6600));color: #993300;text-shadow: 1px 1px #ffffff;border: 1px #cc6600 solid;"> 見出し⑫</h1>

見出し⑬

<h1 style="font-size:30px;font-family:bold;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);"> 見出し⑬</h1>

見出し⑭

<h1 style="background:#cccccc; color: #fff;font-size:30px;font-weight:bold;font-family:"sans serif";text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;"> 見出し⑭</h1>

見出し⑭

<h1 style="background: #21e1b4; color: white; font-size: 30px; margin: 0; overflow: hidden; padding: 10px; text-shadow: 0px 0px #18b28e, 1px 1px #18b28e, 2px 2px #18b28e, 3px 3px #18b28e, 4px 4px #18b28e, 5px 5px #18b28e, 6px 6px #18b28e, 7px 7px #18b28e, 8px 8px #18b28e, 9px 9px #18b28e;"> 見出し⑭</h1>

見出し⑮

<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1D8ADE; border-radius: 4px; box-shadow: inset -1px -1px 2px rgba(0,0,0, 0.6),inset 1px 1px 2px rgba(255,255,255,0.8); color: white; margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;"> 見出し⑮</h1>

見出し⑯

<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 0 0 50px rgba(0,0,0, 0.1); background: #7db9e8; background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 50%, #207cca 51%, #1e5799 100%); background: -ms-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -o-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7db9e8), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#1e5799)); background: -webkit-linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); background: linear-gradient(top, #7db9e8 0%,#2989d8 50%,#207cca 51%,#1e5799 100%); border-radius: 4px; color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7db9e8', endColorstr='#1e5799',GradientType=0 ); margin: 0 0 30px 0; padding: 12px 10px; text-shadow: 1px 1px 2px #333;"> 見出し⑯</h1>

見出し⑰

<h1 style="-moz-border-radius: 7px; -webkit-border-radius: 7px; background: #fff; background: -moz-linear-gradient(top, #eee, #ccc); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); border-bottom: 1px solid #888; border-left: 30px double #AAA; border-radius: 7px; border-right: 10px solid #AAA; border-top: 1px solid #888; color: red; font-size: 140%; padding: 5px 5px 5px 15px;"> 見出し⑰</h1>

見出し⑱

<h1 style="-webkit-background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px); color: white; padding: .5em .75em; text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);"> 見出し⑱</h1>

見出し⑲

見出し⑲

見出し⑲

見出し⑲

見出し⑲

<h1 style="background: #f4b3c2; border-radius: 5px; border: 2px dashed #e8ecef; box-shadow: 0 0 3px 3px #f4b3c2; color: #a25768; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑲</h1> <h1 style="background: #f7b977; border-radius: 5px; border: 2px dashed #ebe1a9; box-shadow: 0 0 3px 3px #f7b977; color: #ee836f; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑲</h1> <h1 style="background: #cbb994; border-radius: 5px; border: 2px dashed #856859; box-shadow: 0 0 3px 3px #cbb994; color: #6f4b3e; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑲</h1> <h1 style="background: #c1e4e9; border-radius: 5px; border: 2px dashed #698aab; box-shadow: 0 0 3px 3px #c1e4e9; color: #007bbb; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑲</h1> <h1 style="background: #274a78; border-radius: 5px; border: 2px dashed #f8fbf8; box-shadow: 0 0 3px 3px #274a78; color: #f8fbf8; font-size: 18pt; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑲</h1>

見出し⑳

見出し⑳

見出し⑳

見出し⑳

見出し⑳

<h1 style="background: #fdeff2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #c97586; color: #c97586; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑳</h1> <h1 style="background: #dcd3b2; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #94846a; color: #94846a; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑳</h1> <h1 style="background: #bce2e8; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #5383c3; color: #5383c3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑳</h1> <h1 style="background: #c7dc68; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #69821b; color: #69821b; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑳</h1> <h3 style="background: #bbc8e6; border-radius: 0 30px 30px 0 / 0 30px 30px 0; border-radius: 30px; box-shadow: 0 1px 10px 0 #7058a3; color: #7058a3; font-size: 18pt; margin-left: 20px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し⑳</h3>

見出し㉑

<h1 style="background: #000; border-bottom: 13px dashed #fff; border-top: 13px dashed #fff; box-shadow: 0 0 3px 8px #000,25px 20px 4px 2px rgba(0,0,0,0.2); color: white; font-size: 18pt; margin-left: 10px; padding: 10px; text-shadow: 0 0 5px; width: 80%;"> 見出し㉑</h1>

見出し㉒

<h1 style="-moz-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); -webkit-box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); background: #fff; box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.1),15px 15px 0 -5px #fff,15px 15px 1px -4px rgba(0,0,0,0.2); color: #1f3134; font-size: 18pt; padding: 15px; width: 70%;"> 見出し㉒</h1>

❏参考記事、ブログ

こちらの記事やブログのサイト様を参考にさせていただきましたm(_ _)m

・H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -

・少しの労力でサイトをかっこよく！見出しのCSSデザインに役立つジェネレーター＆サンプル集30個まとめ
・CSS でかっこいい h タグをつくろう | ショップハンター - 楽天ブログ
・第6回 CSS3で作るWebパーツ | Think IT（シンクイット）
・●●っぽい表現ができる「CSS3」サンプル集 | Find Job! Startup
・【CSS】先頭に四角形が入った見出しのデザインを真似してみました | キノめも
・Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える | Webクリエイターボックス
・CSSの擬似要素を使った見出しデザイン｜Webpark
・コピペで出来るCSS3で見出しスタイリング | 3streamer blog

こちらも合わせてご確認ください☆

関連記事

・【HTML】【CSS】コピペで使えるサンプル集－見出し編（応用）
・【HTML】【CSS】コピペで使えるサンプル集－ボタン編
・【HTML】【CSS】コピペで使えるサンプル集－背景編

・【HTML】【CSS】コピペで使えるサンプル集－引用部分編