コピーして使用できるHTMLとCSSで作る見出しのデザインです。使い方がわからない方はページ下部をご連絡ください。
基本的には<h2>タグで表示していますが、必要に応じて数字を変更してください。また初心者向けにできるだけコメントアウトも含めています。
シンプルな見出し
使いやすいシンプルな見出しです。過度な装飾は行わず、背景色や枠線のみでデザインを行っています。色や文字の大きさを変更すれば多くのサイトで使用できる使い勝手のいいデザインです。
見出しデザインサンプル001
見出しデザインサンプル002
見出しデザインサンプル003
見出しデザインサンプル004
見出しデザインサンプル005
見出しデザインサンプル006
見出しデザインサンプル007
見出しデザインサンプル008
見出しデザインサンプル009
見出しデザインサンプル010
＊HTML部分のClass名は適宜変更してください。
|
1 |
<h2 class="a1">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 |
.a1{background-color:#eee;padding:5px;font-weight:600;} .a2{background-color:#333;padding:5px;color:#FFF;font-weight:600;} .a3{background-color:#6294c3;color:#FFF;padding:5px;} .a4{background-color:#ffffff;color:#6294c3;padding:5px;border:3px solid #6294c3;font-weight: 600;} .a5{border:1px dashed #333;padding:5px;font-weight:600;} .a6{border:1px dotted #333;padding:5px;font-weight:600;} .a7{background-color:#eee;padding:5px;font-weight:600;border:1px solid;} .a8{background-color:#eee;padding:5px;font-weight:600;border-bottom:1px solid #777;border-left:5px solid #777;} .a9{border-bottom:2px solid #333;border-left:2px solid #333;padding:5px;font-weight:600;} .a10{padding:5px;font-weight:600;} |
下線付きの見出し
こちらもシンプルで使いやすいデザインを集めてみました。No.17～20はtext-decorationのプロパティでデザインしています。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.a11{border-bottom:1px solid #333;font-weight:600;padding:5px} .a12{border-bottom:6px double #333;font-weight:600;padding:5px} .a13{border-bottom:2px dashed #333;font-weight:600;padding:5px} .a14{border-bottom:2px dotted #333;font-weight:600;padding:5px} .a15{border-bottom:5px solid #86a4d3;font-weight:600;padding:5px} .a16{border-bottom:3px solid #333;font-weight:600;padding:5px} .a17{font-weight:600;padding:5px;text-decoration:underline;text-underline-offset:10px} .a18{font-weight:600;padding:5px;text-decoration:underline dashed 3px;text-underline-offset:10px} .a19{font-weight:600;padding:5px;text-decoration:underline wavy 2px #FF0000;text-underline-offset:10px} .a20{font-weight:600;padding:5px;text-decoration:underline 5px dotted #aaa;text-underline-offset:10px} |
左線付きの見出し
下線付きと同じくシンプルで使いやすいデザインです。左端に線があることで、シンプルですが見出しであることが分かりやすく、文字のサイズが本文とあまり変わらなくても見出しとしての視認性も高くなります。
見出しデザインサンプル021
見出しデザインサンプル022
見出しデザインサンプル023
見出しデザインサンプル024
見出しデザインサンプル025
見出しデザインサンプル026
見出しデザインサンプル027
見出しデザインサンプル028
見出しデザインサンプル029
見出しデザインサンプル030
|
1 |
<h2 class="a21">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a21{border-left:3px solid #333;font-weight:600;padding:5px} .a22{border-left:8px solid #333;font-weight:600;padding:5px} .a23{border-left:3px dashed #333;font-weight:600;padding:5px} .a24{border-left:5px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px} .a25{border-left:5px solid #333;border-bottom:1px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px} .a26{border-left:5px solid #333;border-radius:30px;font-weight:600;padding:5px 5px 5px 10px} .a27{border-left:5px solid #333;border-bottom:1px solid #333;border-radius:30px;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px} .a28{border-left:8px double #333;font-weight:600;padding:5px 5px 5px 10px} .a29{border-left:8px double #333;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px} .a30{background-color:#000;font-weight:600;padding:5px;color:#fff} .a30:before{border-left:5px solid #fff;content:"";padding-right:6px} |
枠線付きの見出し
枠線が付いたデザインです。シンプルで使いやすいのが特徴ですが、線の太さや背景色を変更すると大きく印象を変えます。
見出しデザインサンプル031
見出しデザインサンプル032
見出しデザインサンプル033
見出しデザインサンプル034
見出しデザインサンプル035
見出しデザインサンプル036
見出しデザインサンプル037
見出しデザインサンプル038
見出しデザインサンプル039
見出しデザインサンプル040
|
1 |
<h2 class="a31">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 |
.a31{border:1px solid #333;font-weight:600;padding:5px} .a32{border:3px solid #333;font-weight:600;padding:5px} .a33{border:2px solid #333;font-weight:600;padding:5px;background-color:red;color:#fff} .a34{border:1px solid #333;border-left:5px solid #333;font-weight:600;padding:5px;background-color:#efefef} .a35{border:5px double #333;font-weight:600;padding:5px;background-color:#efefef} .a36{border:5px groove #333;font-weight:600;padding:5px} .a37{border:4px outset #555;font-weight:600;padding:5px} .a38{border:2px dashed #555;font-weight:600;padding:5px} .a39{border:3px solid #555;font-weight:600;padding:5px 5px 5px 9pt;border-radius:20px} .a40{border:3px dotted #d1d1d1;font-weight:600;padding:5px 5px 5px 9pt;background-color:#555;color:#fff} |
文字列中央寄せの見出し
文字自体を中央寄せした見出しです。文字数が多くなると折り返しのことも考慮する必要が出てくるので、短い文字列との組み合わせが良いでしょう。ブログ記事というよりはLPなどに向いています。
見出しデザインサンプル041
見出しデザインサンプル042
見出しデザインサンプル043
見出しデザインサンプル044
見出しデザインサンプル045
見出しデザインサンプル046
見出しデザインサンプル047
見出しデザインサンプル048
見出しデザインサンプル049
見出しデザインサンプル050
|
1 |
<h2 class="a41">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* No.41 */ .a41{border-bottom:1px solid #333;border-top:1px solid #333;font-weight:600;padding:5px;text-align:center} /* No.42 */ .a42{border-bottom:5px double #333;border-top:5px double #333;font-weight:600;padding:5px;text-align:center} /* No.43 */ .a43{border-bottom:2px solid #333;border-top:2px solid #333;font-weight:600;padding:5px;text-align:center;background-color:#f5edc5} /* No.44 */ .a44{font-weight:600;text-align:center;display:inline-block;position:relative;width:100%} .a44:before{content:"";border-top:3px solid #333;left:10px;content:'';position:absolute;top:50%;display:inline-block;width:15%;height:3px;border-top:3px solid #00acc1} .a44:after{content:"";border-top:3px solid #333;right:10px;content:'';position:absolute;top:50%;display:inline-block;width:15%;height:3px;border-top:3px solid #00acc1} /* No.45 */ .a45{font-weight:600;text-align:center} .a45:before{content:"†";padding-right:3px} .a45:after{content:"†";padding-left:3px} /* No.46 */ .a46{font-weight:600;padding:5px;text-align:center;display:flex;overflow:hidden;background:#d73232;padding:.3em;align-items:center;color:#fff} .a46:after,.a46:before{content:"";flex:1;background:#fff;padding:1px 0;height:0;transform:rotate(48deg)} /* No.47 */ .a47{position:relative;padding:.3em;text-align:center;font-weight:600} .a47:after,.a47:before{content:'';width:20px;height:30px;position:absolute;display:inline-block} .a47:before{border-left:solid 2px #283593;border-top:solid 2px #283593;top:0;left:0}.a47:after{border-right:solid 2px #283593;border-bottom:solid 2px #283593;bottom:0;right:0} /* No.48 */ .a48{font-weight:600;padding:5px;text-align:center;text-decoration:underline double 2px #333;text-underline-offset:5px} /* No.49 */ .a49{font-weight:600;padding:5px;text-align:center;background-color:#0069ff;color:#fff;box-shadow:1px 1px 1px 1px #aaa} /* No.50 */ .a50{font-weight:700;padding-bottom:.5em;text-align:center;position:relative}.a50:after,.a50:before{content:'';position:absolute;margin:auto;left:0;bottom:0;width:2em;background-color:#e3e3e3;height:5px;right:2em} .a50:before{background-color:#4c9ac0;left:2em;width:4em} |
影付きの見出し
枠線や文字自体に影を付け、立体感を出したデザインです。装飾としては控えめですが視認性が上がります。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
文字列を装飾した見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
吹き出し付きの見出し
比較的よく見るデザインです。見出しの下部マージン(margin-bottom)とのバランスも調整してご利用ください。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
文字の前にアイコンがある見出し
アイコンは画像ではなくFont AwesomeというWbbアイコンを利用するのが一般的です。今回はFont Awesome5を使用しています。Font Awesomeの使い方はこちら
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
蛍光マーカーなど下線のデザイン性が高い見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
タブ付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
下線付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |