HTMLのみで作れる*シンプルで使いやすい 見出しデザイン

   
コードをHTMLに貼り付けるだけで簡単に作れる
シンプルで使いやすい見出しデザインです。
   

 

 使いかた 
     
サンプルの下にあるHTMLコードをコピーして、自身のHTML編集に貼り付けて下さい。
(WordPressの場合はテキストエディタ(HTML)に貼り付けて下さい。)
     
見出しデザインは全て文字数によって横幅が変更するようになっています。
HTMLのみで作れる*シンプルで使いやすい BOXデザインと重複している見出しデザインもあります。
     

 

 

 

 

 

 

お知らせ
        2024.04.09 「見出し線」に追加しました。(詳しくはこちらからどうぞ。)
    2024.03.23 「二重線」に追加/リニューアルしました。( 詳しくはこちらからどうぞ。)

 

 

 

 

1. 見出し 線

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; border-bottom: 3px solid #b0c4de; font-size: 100%;"> ここに見出しを入れる </div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; border-bottom: 6px double #e3adc1; font-size: 100%;"> ここに見出しを入れる </div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; position: relative; margin-bottom: 0.2rem; padding: 2px 0; border-bottom: 5px solid #bcbace; color: #333; font-size: 100%;"><span style="position: absolute; bottom: -0.6rem; left: 0rem; right: 0rem; border-bottom: 2px solid #bfbec5; content: '';"></span> ここに見出しを入れる </div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; border-bottom: 3px dashed #bcc7d7; font-size: 100%;"> ここに見出しを入れる </div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; padding-bottom: 5px; font-size: 100%; background-image: repeating-linear-gradient(90deg, #c0c0c0 0, #c0c0c0 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 4px); background-size: 4px 4px; background-repeat: repeat-x; background-position: center bottom;"> ここに見出しを入れる </div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; position: relative; padding-bottom: 7px; font-size: 100%;"> ここに見出しを入れる <span style="content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; background-image: repeating-linear-gradient(45deg, #b4ada9 0px, #b4ada9 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%), repeating-linear-gradient(135deg, #b4ada9 0px, #b4ada9 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%); background-size: 8px 8px;"></span></div>

 

 

 

 

 ここに見出しを入れる 

 

<div style="display: inline-block; position: relative; padding-left: 20px;"><span style="position: absolute; content: ''; bottom: -3px; left: 0; width: 0; height: 0; border: none; border-left: solid 15px transparent; border-bottom: solid 15px #b4ada9;"></span> ここに見出しを入れる <span style="position: absolute; content: ''; bottom: -3px; left: 10px; width: 100%; border-bottom: solid 3px #b4ada9;"></span></div>

 

 

 

 

ここに見出しを入れる 

 

<div style="display: inline-block; border-left: 7px solid #aaaab0; border-bottom: 3px solid #bfbec5; padding-left: 12px; font-size: 100%;"> ここに見出しを入れる </div>

 

 

new

 

ここに見出しを入れる 

 

<div style="display: inline-block; border-left: 7px solid #aaaab0; border-bottom: 3px dashed #bfbec5; padding-left: 12px; font-size: 100%;">ここに見出しを入れる </div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: flex; justify-content: left; align-items: center; font-size: 100%; text-align: center;"><span style="content: ''; width: 30px; height: 2px; background-color: #c0c6c9; margin-right: 16px;"></span>ここに見出しを入れる<span style="content: ''; width: 30px; height: 2px; background-color: #c0c6c9; margin-left: 16px;"></span></div>

 

 

 

 

ここに見出しを入れる

 

<div style="position: relative; display: inline-block; padding: 0 55px;"><span style="content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 3px; border-top: solid 1px #c0c6c9; border-bottom: solid 1px #c0c6c9; left: 0;"></span>ここに見出しを入れる<span style="content: ''; position: absolute; top: 50%; display: inline-block; width: 45px; height: 3px; border-top: solid 1px #c0c6c9; border-bottom: solid 1px #c0c6c9; right: 0;"></span></div>

 

 

 

 

 

2. 見出し 枠

 

 

① 一重線

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fff; color: #333; margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fff; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fef9fb; color: #333; margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fef9fb; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fff; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fff; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fef9fb; color: #333; border-radius: 1em; margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #aaaab0; background: #fef9fb; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 1em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; padding: 10px; border: 3px solid #595857; -webkitborder-radius: 41px 35px 50px 11px/11px 50px 35px 41px; -moz-border-radius: 41px 35px 50px 11px/11px 50px 35px 41px; border-radius: 41px 35px 50px 11px/11px 50px 35px 41px; margin: 0 auto;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; margin: 2em auto; padding: 1em 1.5em; color: #000; background-color: #fff; border: 4px solid #595857; border-radius: 3em .8em 3em .7em/.9em 2em .8em 3em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; margin: 1em auto; padding: 20px; background-size: 2px 2px; background-position: 9px 0,0 9px,right 9px top 0,left 0 bottom 9px; background-repeat: repeat-y,repeat-x,repeat-y,repeat-x; background-image: linear-gradient(#585858,#585858),linear-gradient(#585858,#585858),linear-gradient(#585858,#585858),linear-gradient(#585858,#585858);">ここに見出しを入れる</div>

 

 

 

 

 

② 点線 / パッチワーク風

 

ここに見出しを入れる

 

<div style="display: inline-block; border-radius: 5px; border: 3px dashed #8da0b6; font-size: 100%; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background-color: #f2f2f2; border-radius: 5px; border: 3px dashed #8da0b6; font-size: 100%; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #bdbdbd; border: 2px dashed #f2f2f2; box-shadow: 0 0 0 10px #bdbdbd; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #f2f2f2; border: 2px dashed #bdbdbd; border-radius: 5px; box-shadow: 0 0 0 10px #f2f2f2; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; color: white; background: #848484; padding: 10px; border: 2px dashed rgba(255 , 255 , 255 , 0.5); -moz-border-radius: 6px; -moz-box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); -webkit-border-radius: 6px; -webkit-box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); border-radius: 6px; box-shadow: 0 0 0 5px #848484 , 0 2px 3px 5px rgba(0 , 0 , 0 , 0.5); font-size: 100%;">ここに見出しを入れる</div>

 

 

 

 

 

③ 二重線

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 5px double #0f2350; background: #fff; color: #333; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 5px double #0f2350; background: #fff; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background-color: #fafdff; border: 4px double #8da0b6; font-size: 100%; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 5px double #0f2350; background: #fff; color: #333; border-radius: 1em; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 5px double #0f2350; background: #fff; color: #333; border-radius: 1em; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 5px double #8da0b6; background: #fafdff; color: #333; border-radius: 1em; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: 1px solid #595857; color: #333; margin: 20px 10px; padding: 10px; position: relative; z-index: 0;"><span style="border: 2px solid #595857; content: ''; display: block; position: absolute; top: -8px; bottom: -8px; left: -8px; right: -8px; z-index: -1;"></span>ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: none; border: 1px solid #8da0b6; margin: 10px; padding: 10px; position: relative;">ここに見出しを入れる<span style="background: none; border: 1px solid #8da0b6; content: ''; position: absolute; top: 3px; left: 3px; width: 100%; height: 100%; z-index: -1;"></span></div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #bccddb; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #bccddb; padding: 10px;">ここに見出しを入れる</div>

 

 

new

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #bccddb; border: 4px double #FFFFFF; box-shadow: 0 0 0 10px #bccddb; padding: 10px; border-radius: 10px; word-break: break-all;">ここに見出しを入れる</div>

 

 

renewal

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #d3d6dd; border: 4px double #eeeaec; box-shadow: 0 0 0 10px #d3d6dd; padding: 10px;"><span style="color: #7d7b83;">ここに見出しを入れる</span></div>

 

 

new

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #d3d6dd; border: 4px double #eeeaec; box-shadow: 0 0 0 10px #d3d6dd; padding: 10px; border-radius: 10px; word-break: break-all;"><span style="color: #7d7b83;">ここに見出しを入れる</span></div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #aaaab0; padding: 10px; border: double 10px #ffffff; border-radius: 10px; word-break: break-all;"><span style="color: #ffffff;"> ここに見出しを入れる</span></div>

 

 

 

 

 

④ 背景色のみ

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #eeeaec; color: #333; margin: 1em auto; padding: 0.5em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #eeeaec; color: #333; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 0.5em;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #eeeaec; border: 1px solid #A1A1A1; box-shadow: 5px 5px 0 0 #A1A1A1; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #b2cbe4; color: #333; border-radius: 10px; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #b2cbe4; border: 1px solid #A1A1A1; border-radius: 5px; box-shadow: 3px 3px 5px 1px #A1A1A1; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #8da0b6; color: #fff; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #8da0b6; color: #fff; box-shadow: 4px 4px 4px rgba(0,0,0,0.25); margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background-image: linear-gradient( -45deg, #fff 25%, #eeeaec 25%,#eeeaec 50%, #fff 50%, #fff 75%, #eeeaec 75%, #eeeaec ); background-size: 5px 5px; font-size: 100%; padding: 10px;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background-color: #8da0b6; color: #fff; padding: 0.5em 1em calc(0.5em - 6px); position: relative;">ここに見出しを入れる<span style="content: ''; background-color: #8da0b6; width: 100%; height: 3px; position: absolute; bottom: -6px; left: 0;"></span></div>

 

 

 

 

 

⑤ 付箋風

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border: #ebebeb solid 1px; background: #ffffff; padding: 8px 19px; margin: 2em 0; border-left: solid 10px #8da0b6; solid 5px #8da0b6; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; border-left: #8da0b6 solid 10px; padding: 10px; background: #f1f1f1; font-size: 100%; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに見出しを入れる</div>

 

 

 

 

ここに見出しを入れる

 

<div style="display: inline-block; background: #ffffff; padding: 8px 19px; margin: 2em 0; border-top: solid 10px #8da0b6; solid 5px #474a4d; box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33); word-break: break-all;">ここに見出しを入れる</div>

 

 

 

 

 

 

3. 見出し その他

 

 

ここに見出しを入れる

 

<div style="display: inline-block; padding: .5em 1em; margin: 2em 0; background: #ffffff; box-shadow: 0px 0px 10px 0px #cacaca;">
<p style="margin: 0; padding: 0;">ここに見出しを入れる</p></div>

 

 

 

セロテープ風になっています。

 

ここに見出しを入れる

 

<div style="display: inline-block; padding: 10px; background-color: #fff; border-left: 2px dotted rgba(0,0,0,0.1); border-right: 2px dotted rgba(0,0,0,0.1); box-shadow: 0 0 5px rgba(0,0,0,0.2);">ここに見出しを入れる</div>

 

 

 

 

 

 

 あとがき 
     
見出し線や枠を入れるだけでページがぐっと読みやすくなりますよね。
シンプルで使いやすい見出しデザインをこれからも随時増やしていく予定です。
季節に合った色や使い勝手のよさそうな色合いに変えるリニューアルも時々しています。