コピペで使える!シンプルな見出しデザイン12選

Bitfan ガイド

2023/01/24 17:30

Follow

投稿・ページ内で使える、見出しのデザインサンプルをご紹介します。

 

コードをコピーしてソースモードで入力してお使いいただけます。

もちろん自分好みにカスタマイズして使って頂いても構いません!

 


 

▼ ソースモード切り替え方法

 

カスタマイズ方法

色を変える
#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>

 


 

ぜひ記事投稿の際にご活用ください!

 

ページを報告する

コピーしました

コピーしました