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

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

ここでは以前紹介した見出し編（シンプル）に少し多めにCSSを使って、少し凝ったデザインの見出しをまとめていきます。


CSSがわかる方は更にカスタマイズしていただければと思います。

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

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

関連記事

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

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

見出しサンプル集

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

見出し①

<h1 style="-moz-box-shadow: 1px 1px 3px #292929; -webkit-box-shadow: 1px 1px 3px #292929; background: #e3e3e3; background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8)); box-shadow: 1px 1px 3px #292929; color: #454545; margin-left: -20px; margin-top: 0; padding: 10px 20px; position: relative; text-shadow: 0 1px 0 white; width: 70%;"> 見出し①<span style="border-left: 20px solid transparent; border-top: 10px solid #c8c8c8; height: 0; left: 0; line-height: 0; position: absolute; top: 104%; width: 0;"></span></h1>

見出し②

<h1 style="-moz-border-radius: 4px; -webkit-border-radius: 4px; background: #1d8ade; border-left: 1px solid #036; border-top: 1px solid #036; box-shadow: inset 1px 1px 4px #036; color: white; margin: 0 0 30px 0; padding: 12px 10px; position: relative; text-shadow: 1px 1px 2px #333;"> <span style="background: transparent; border-color: #1d8ade transparent transparent transparent; border-style: solid; border-width: 15px; bottom: -27px; content: ' '; height: 0; left: 14px; position: absolute; width: 0; z-index: 2;"></span> 見出し②</h1>

見出し③

<h1 style="color: #111111; font-size: 20px; line-height: 1; margin: 30px 0 0 0; padding: 14px 5px 10px 10px; position: relative;"> <span style="-moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); background: #999; height: 12px; left: -5px; position: absolute; top: 0; transform: rotate(45deg); width: 12px;"></span> 見出し③ <span style="-moz-transform: rotate(15deg); -ms-transform: rotate(15deg); -o-transform: rotate(15deg); -webkit-transform: rotate(15deg); background: #777; height: 8px; left: -10px; position: absolute; top: 15px; transform: rotate(15deg); width: 8px;"></span> </h1>

見出し④

<h1 style="background: #ccc; border-radius: 22px 0 0 22px; color: #111111; font-size: 20px; line-height: 1; margin: 30px 20px 10px -10px; padding: 14px 5px 10px 50px; position: relative;"> <span style="background: #eee; border-radius: 50%; box-shadow: 1px 1px 1px #777 inset; height: 20px; left: 14px; margin-top: -10px; position: absolute; top: 50%; width: 20px;"></span> 見出し④ <span style="position: absolute; top: 0; right: -22px; height: 0; width: 0; border: 22px solid #ccc; border-right-color: transparent;"></span> </h1>

見出し⑤

<h3 style="-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%); border-radius: 6px; padding: 1em 4em 1em 1em; position: relative;"> 見出し⑤<span style="-webkit-transform-origin: bottom right; -webkit-transform: translateY(-1.89424em) rotate(-40deg); background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2)); border-bottom-left-radius: 6px; box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15); content: ''; height: 3.5493em; position: absolute; right: 0; top: 0; transform-origin: bottom right; transform: translateY(-1.89424em) rotate(-40deg); width: 1.65507em;"></span></h3>

□ 見出し⑥ □

<h1 style="border-bottom: 2px solid #B92A2C; font-size: 1.5em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.0em; position: relative;"> <span style="color: #ff6b6e; font-size: 180%; height: 12px; left: 0.3em; position: absolute; top: -0.6em; width: 12px;">□</span> 見出し⑥ <span style="color: #b92a2c; font-size: 180%; height: 12px; left: 0; position: absolute; top: -0.3em; width: 12px;">□</span> </h1>

見出し⑦

<h2 style="border-bottom: 2px solid #0099FF; color: #333333; font-size: 23px; padding-left: 45px; position: relative;"> <span style="border: 4px solid #B2E0FF; height: 14px; left: 12px; position: absolute; top: 12px; width: 14px;"></span> 見出し⑦ <span style="border: 4px solid #0099FF; height: 17px; left: 2px; position: absolute; top: 2px; width: 17px;"></span> </h1>

見出し⑧

<div style="background: #a9cc51; box-shadow: inset 0px 25px 10px -10px rgba(136, 136, 136, 0.2); height: 70px; margin-bottom: 0; margin-bottom: 0px; margin-left: 5px; width: 40px;"> </div> <h1 style="border-radius: 6px; box-shadow: rgba(110, 110, 110, 0.2) 0px 0px 5px 1px #a9cc51 inset; color: #888888; font-size: 16pt; height: 30px; margin-bottom: 0px; margin-top: -70px; padding-left: 50px; padding-top: 10px; padding-bottom: 10px; width: 80%;"> 見出し⑧</h1> <div style="background: #c9bd6b; border-radius: 45px; box-shadow: inset -2px -2px 3px 1px #7e742d,inset -1px -1px 2px #837727, 0 0 1px #b6a73f; height: 15px; margin-bottom: 30px; margin-left: 18px; margin-top: -32px; width: 15px;"> </div> <div style="background: #fff; border-bottom: 15px solid transparent; border-left: 20px solid #a9cc51; border-right: 20px solid #a9cc51; height: 10px; margin-bottom: 30px; margin-left: 5px; margin-top: 0px; width: 0;"> </div>

見出し⑨

<h1 style="background: #ffc; box-shadow: 12px 0 0 0 #ffc, 0 12px 0 0 #ffc, 1px 15px 4px -3px rgba(0,0,0,0.2); color: #000099; font: normal 24px/1.3 serif; margin: 0 22px 0 10px; padding: 14px 15px 0px 20px; position: relative;"> <span style="border-color: transparent; border-style: solid; border-top-color: #cc9; border-width: 12px 12px 0 0; height: 0; left: 100%; position: absolute; top: 100%; width: 0;"></span> 見出し⑨ <span style="-moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); -webkit-transform: rotate(-1deg); background: rgba(255,182,182,0.4); bottom: 0; height: 20px; left: 10px; padding: 0 20px; position: absolute; transform: rotate(-1deg); width: 120px;"></span> </h1>

見出し⑩

説明文をここに書き込んでください

<div style="border-bottom: 1px solid #48832C; border-left: 5px solid #48832C; padding: 3px 10px;"> <h1 style="font-size: large; margin: 0;"> 見出し⑩</h1> <div style="color: #999999; font-size: 0.8em; margin: 5px 0 0 8px;"> 説明文をここに書き込んでください</div> </div>

❏参考記事、ブログ

こちらの記事やブログのサイト様を参考にさせていただきました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】コピペで使えるサンプル集－引用部分編