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

<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>

<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>

<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 #e3e3e3; -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 #e3e3e3; 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(#eeeaec,#eeeaec),linear-gradient(#eeeaec,#eeeaec),linear-gradient(#eeeaec,#eeeaec),linear-gradient(#eeeaec,#eeeaec);">ここに見出しを入れる</div>

<div style="display: inline-block; position: relative; padding: 1rem 2rem calc(1rem + 10px); color: #606060; background: #eeeaec; font-size: 100%;"><span style="position: absolute; top: -7px; left: -7px; width: 100%; height: 100%; border: 1px solid #aaaab0;"></span>ここに見出しを入れる</div>

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

<div style="display: inline-block; border-radius: 5px; border: 3px dashed #dfdfdf; font-size: 100%; padding: 1em; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.33);">ここに見出しを入れる</div>

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

<div style="display: inline-block; background-color: #fef9fb; border-radius: 5px; border: 3px dashed #dfdfdf; font-size: 100%; padding: 1em; box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.33);">ここに見出しを入れる</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 #eeeaec; background: #fff; color: #333; margin: 1em auto; padding: 10px;">ここに見出しを入れる</div>

<div style="display: inline-block; border: 5px double #eeeaec; 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>

<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>

<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>

<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: 1em;">ここに見出しを入れる</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: 1em;">ここに見出しを入れる</div>

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

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

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

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

<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>