コピペで使える！シンプルな見出しデザイン12選
投稿・ページ内で使える、見出しのデザインサンプルをご紹介します。
コードをコピーしてソースモードで入力してお使いいただけます。
もちろん自分好みにカスタマイズして使って頂いても構いません！
▼ ソースモード切り替え方法
カスタマイズ方法
● 色を変える
#000000、#B8D200など#〜で書かれた箇所が色の指定です。この部分をお好みのカラーコードに書き換えてください。
01-シンプルな下線付き見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 0.3em 0; border-bottom: 3px solid #000000; color: #000000;">01-シンプルな下線付き見出しのデザイン</h2>02-点線の見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 0.3em 0; border-bottom: 3px dotted #000000; color: #000000;">02-点線の見出しのデザイン</h2>03-二重下線付きの見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 0.3em 0; border-bottom: 6px double #000000; color: #000000;">03-二重下線付きの見出しのデザイン</h2>
04-蛍光マーカー風の見出しのデザイン
<h2 style="font-size: 110%; background: linear-gradient(transparent 50%, #cadf38 50%); color: #000000;">04-蛍光マーカー風の見出しのデザイン</h2>05-左線付きの見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 0.3em 0.8em; border-left: 5px solid #B8D200; color: #000000;">05-左線付きの見出しのデザイン</h2>06-上下線の見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; border-top: 3px solid #000000; border-bottom: 3px solid #000000; color: #000000;">06-上下線の見出しのデザイン</h2>07-囲み線の見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; border: 3px solid #000000; color: #000000;">07-囲み線の見出しのデザイン</h2>08-背景色付きの見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; border-radius:8px; background:#b7d100; color: #000000;">08-背景色付きの見出しのデザイン</h2>09-背景色と左線付き見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; background: #f8fae5; border-left: 5px solid #b7d100; color: #000000;">09-背景色と左線付き見出しのデザイン</h2>10-背景色と上線付き見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; background: #f8fae5; border-top: 3px solid #b7d100; color: #000000;">10-背景色と上線付き見出しのデザイン</h2>11-背景色と下線付き見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em; background: #f8fae5; border-bottom: 3px solid #b7d100; color: #000000;">11-背景色と下線付き見出しのデザイン</h2>12番号が振られた見出しのデザイン
<h2 style="font-size: 110%; line-height: 1.4; margin: 0 0 1em 0; padding: 1em 0;"><span style="padding: 0.5rem; margin-right: 0.3em; border-radius: 2px; color: #ffffff; background: #000000;">12</span>番号が振られた見出しのデザイン</h2>
ぜひ記事投稿の際にご活用ください！
