コピーして使用できるHTMLとCSSで作る見出しのデザインです。使い方がわからない方はページ下部をご連絡ください。
基本的には<h2>タグで表示していますが、必要に応じて数字を変更してください。また初心者向けにできるだけコメントアウトも含めています。
1.シンプルな見出し
使いやすいシンプルな見出しです。過度な装飾は行わず、背景色や枠線のみでデザインを行っています。色や文字の大きさを変更すれば多くのサイトで使用できる使い勝手のいいデザインです。
見出しデザインサンプル001
見出しデザインサンプル002
見出しデザインサンプル003
見出しデザインサンプル004
見出しデザインサンプル005
見出しデザインサンプル006
見出しデザインサンプル007
見出しデザインサンプル008
見出しデザインサンプル009
見出しデザインサンプル010
|
1 |
<h2 class="a001">見出しデザインサンプル</h2> |
＊HTML部分のClass名は適宜変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a001{background-color:#eee;padding:5px;font-weight:600} .a002{background-color:#333;padding:5px;color:#fff;font-weight:600} .a003{background-color:#6294c3;color:#fff;padding:5px} .a004{background-color:#ffffff;color:#6294c3;padding:5px;border:2px solid #6294c3;font-weight:600} .a005{border:1px dashed #333;padding:5px;font-weight:600} .a006{border:1px dotted #333;padding:5px;font-weight:600} .a007{background-color:#eee;padding:5px;font-weight:600;border:1px solid} .a008{background-color:#eee;padding:5px;font-weight:600;border-bottom:1px solid #777;border-left:5px solid #777} .a009{border-bottom:2px solid #333;border-left:2px solid #333;padding:5px;font-weight:600} .a010{padding:5px;font-weight:600} |
2.下線付きの見出し
こちらもシンプルで使いやすいデザインを集めてみました。No.17～20はtext-decorationのプロパティでデザインしています。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a011">見出しデザインサンプル</h2> |
＊HTML部分のClass名は適宜変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a011{border-bottom:1px solid #333;font-weight:600;padding:5px} .a012{border-bottom:6px double #333;font-weight:600;padding:5px} .a013{border-bottom:2px dashed #333;font-weight:600;padding:5px} .a014{border-bottom:2px dotted #333;font-weight:600;padding:5px} .a015{border-bottom:5px solid #86a4d3;font-weight:600;padding:5px} .a016{border-bottom:3px solid #333;font-weight:600;padding:5px} .a017{font-weight:600;padding:5px;text-decoration:underline;text-underline-offset:10px} .a018{font-weight:600;padding:5px;text-decoration:underline dashed 3px;text-underline-offset:10px} .a019{font-weight:600;padding:5px;text-decoration:underline wavy 2px #FF0000;text-underline-offset:10px} .a020{font-weight:600;padding:5px;text-decoration:underline 5px dotted #aaa;text-underline-offset:10px} |
3.左線付きの見出し
下線付きと同じくシンプルで使いやすいデザインです。左端に線があることで、シンプルですが見出しであることが分かりやすく、文字のサイズが本文とあまり変わらなくても見出しとしての視認性も高くなります。
見出しデザインサンプル021
見出しデザインサンプル022
見出しデザインサンプル023
見出しデザインサンプル024
見出しデザインサンプル025
見出しデザインサンプル026
見出しデザインサンプル027
見出しデザインサンプル028
見出しデザインサンプル029
見出しデザインサンプル030
|
1 |
<h2 class="a021">見出しデザインサンプル</h2> |
＊HTML部分のClass名は適宜変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a021{border-left:3px solid #333;font-weight:600;padding:5px} .a022{border-left:8px solid #333;font-weight:600;padding:5px} .a023{border-left:3px dashed #333;font-weight:600;padding:5px} .a024{border-left:5px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px} .a025{border-left:5px solid #333;border-bottom:1px solid #333;background-color:#f5f5f5;font-weight:600;padding:5px} .a026{border-left:5px solid #333;border-radius:30px;font-weight:600;padding:5px 5px 5px 10px} .a027{border-left:5px solid #333;border-bottom:1px solid #333;border-radius:30px;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px} .a028{border-left:8px double #333;font-weight:600;padding:5px 5px 5px 10px} .a029{border-left:8px double #333;background-color:#f5f5f5;font-weight:600;padding:5px 5px 5px 10px} .a030{background-color:#000;font-weight:600;padding:5px;color:#fff} .a030:before{border-left:5px solid #fff;content:"";padding-right:6px} |
4.枠線付きの見出し
枠線が付いたデザインです。シンプルで使いやすいのが特徴ですが、線の太さや背景色を変更すると大きく印象を変えます。
見出しデザインサンプル031
見出しデザインサンプル032
見出しデザインサンプル033
見出しデザインサンプル034
見出しデザインサンプル035
見出しデザインサンプル036
見出しデザインサンプル037
見出しデザインサンプル038
見出しデザインサンプル039
見出しデザインサンプル040
|
1 |
<h2 class="a031">見出しデザインサンプル</h2> |
＊HTML部分のClass名は適宜変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 |
.a031{border:1px solid #333;font-weight:600;padding:5px} .a032{border:3px solid #333;font-weight:600;padding:5px} .a033{border:2px solid #333;font-weight:600;padding:5px;background-color:red;color:#fff} .a034{border:1px solid #333;border-left:5px solid #333;font-weight:600;padding:5px;background-color:#efefef} .a035{border:5px double #333;font-weight:600;padding:5px;background-color:#efefef} .a036{border:5px groove #333;font-weight:600;padding:5px} .a037{border:4px outset #555;font-weight:600;padding:5px} .a038{border:2px dashed #555;font-weight:600;padding:5px} .a039{border:3px solid #555;font-weight:600;padding:5px 5px 5px 9pt;border-radius:20px} .a040{border:3px dotted #d1d1d1;font-weight:600;padding:5px 5px 5px 9pt;background-color:#555;color:#fff} |
5.文字列中央寄せの見出し
文字自体を中央寄せした見出しです。文字数が多くなると折り返しのことも考慮する必要が出てくるので、短い文字列との組み合わせが良いでしょう。ブログ記事というよりはLPなどに向いています。
見出しデザインサンプル041
見出しデザインサンプル042
見出しデザインサンプル043
見出しデザインサンプル044
見出しデザインサンプル045
見出しデザインサンプル046
見出しデザインサンプル047
見出しデザインサンプル048
見出しデザインサンプル049
見出しデザインサンプル050
|
1 |
<h2 class="a031">見出しデザインサンプル</h2> |
＊HTML部分のClass名は適宜変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.a041{border-bottom:1px solid #333;border-top:1px solid #333;font-weight:600;padding:5px;text-align:center} .a042{border-bottom:5px double #333;border-top:5px double #333;font-weight:600;padding:5px;text-align:center} .a043{border-bottom:2px solid #333;border-top:2px solid #333;font-weight:600;padding:5px;text-align:center;background-color:#f5edc5} .a044{font-weight:600;text-align:center;display:inline-block;position:relative;width:100%} .a044::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} .a044::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} .a045{font-weight:600;text-align:center} .a045:before{content:"†";padding-right:3px} .a045:after{content:"†";padding-left:3px} .a046{font-weight:600;padding:5px;text-align:center;display:flex;overflow:hidden;background:#d73232;padding:.3em;align-items:center;color:#fff} .a046::after,.a46::before{content:"";flex:1;background:#fff;padding:1px 0;height:0;transform:rotate(48deg)} .a047{position:relative;padding:.3em;text-align:center;font-weight:600} .a047::after,.a47:before{content:'';width:20px;height:30px;position:absolute;display:inline-block} .a047::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} .a048{font-weight:600;padding:5px;text-align:center;text-decoration:underline double 2px #333;text-underline-offset:5px} .a049{font-weight:600;padding:5px;text-align:center;background-color:#0069ff;color:#fff;box-shadow:1px 1px 1px 1px #aaa} .a050{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} .a050::before{background-color:#4c9ac0;left:2em;width:4em} |
6.影付きの見出し
枠線や文字自体に影を付け、立体感を出したデザインです。装飾としては控えめですが視認性が上がります。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
7.文字列を装飾した見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
8.吹き出し付きの見出し
比較的よく見るデザインです。見出しの下部マージン(margin-bottom)とのバランスも調整してご利用ください。
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
9.文字の前にアイコンがある見出し
アイコンは画像ではなくFont AwesomeというWbbアイコンを利用するのが一般的です。今回はFont Awesome5を使用しています。Font Awesomeの使い方はこちら
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
10.蛍光マーカーなど下線のデザイン性が高い見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
11.タブ付きの見出し
見出しデザインサンプル011
見出しデザインサンプル012
見出しデザインサンプル013
見出しデザインサンプル014
見出しデザインサンプル015
見出しデザインサンプル016
見出しデザインサンプル017
見出しデザインサンプル018
見出しデザインサンプル019
見出しデザインサンプル020
|
1 |
<h2 class="a11">見出しデザインサンプル</h2> |
|
1 2 |
12.下線付きの見出し
見出しデザインサンプル121
見出しデザインサンプル122
見出しデザインサンプル123
見出しデザインサンプル124
見出しデザインサンプル125
見出しデザインサンプル126
見出しデザインサンプル127
見出しデザインサンプル128
見出しデザインサンプル129
見出しデザインサンプル130
|
1 |
<h2 class="a121">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a121{background:linear-gradient(to right, #ff7e5f, #feb47b);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a122{background:linear-gradient(to right, #2193b0, #6dd5ed);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a123{background:linear-gradient(to right, #667eea, #764ba2);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a124{background:linear-gradient(45deg, #fc466b, #3f5efb);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a125{background:linear-gradient(to right, #11998e, #38ef7d);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a126{background:linear-gradient(to right, #8e2de2, #4a00e0);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a127{background:linear-gradient(to right, #f953c6, #b91d73);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a128{background:linear-gradient(to bottom, #ff416c, #ff4b2b);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a129{background:linear-gradient(to right, #654ea3, #eaafc8);color:#fff;font-weight:600;padding:10px;border-radius:5px} .a130{background:linear-gradient(135deg, #43cea2, #185a9d);color:#fff;font-weight:600;padding:10px;border-radius:5px} |
13.ステッチ（縫い目）デザインの見出し
見出しデザインサンプル131
見出しデザインサンプル132
見出しデザインサンプル133
見出しデザインサンプル134
見出しデザインサンプル135
見出しデザインサンプル136
見出しデザインサンプル137
見出しデザインサンプル138
見出しデザインサンプル139
見出しデザインサンプル140
|
1 |
<h2 class="a131">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a131{border:2px dashed #333;background:#fff;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 5px #f8f8f8;margin:5px} .a132{border:1px dashed #aaa;background:#f8f8f8;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 3px #ddd;margin:3px} .a133{background:#fff;font-weight:600;padding:10px;border-radius:2px;outline:1px dashed #888;outline-offset:4px} .a134{border:2px dotted #333;font-weight:600;padding:10px;background:#f9f9f9} .a135{font-weight:600;padding:15px;background:#fff;position:relative;outline:2px dashed #ccc;outline-offset:-8px} .a136{border:1px solid #ccc;font-weight:600;padding:10px;border-radius:5px;box-shadow:0 0 0 4px #f0f0f0,0 0 0 5px #ddd} .a137{font-weight:600;padding:10px;border:2px dashed #333;background:#fff;position:relative;box-shadow:8px 8px 0 0 #f0f0f0} .a138{font-weight:600;padding:10px;border:2px dotted #555;background:#f8f8f8;border-radius:3px} .a139{font-weight:600;padding:12px;background:#fff;border:1px solid #ddd;outline:1px dashed #999;outline-offset:-5px} .a140{font-weight:600;padding:10px;border:3px double #ccc;background:#fafafa;position:relative} |
14.角丸のリボン型見出し
見出しデザインサンプル141
見出しデザインサンプル142
見出しデザインサンプル143
見出しデザインサンプル144
見出しデザインサンプル145
見出しデザインサンプル146
見出しデザインサンプル147
見出しデザインサンプル148
見出しデザインサンプル149
見出しデザインサンプル150
|
1 |
<h2 class="a141">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a141{background:#3498db;color:#fff;font-weight:600;padding:10px 15px;border-radius:5px 20px 5px 20px;position:relative} .a142{background:#e74c3c;color:#fff;font-weight:600;padding:10px 20px;border-radius:0 10px 10px 0;position:relative;margin-left:-10px;border-left:10px solid #c0392b} .a143{background:#2ecc71;color:#fff;font-weight:600;padding:10px 15px;border-radius:10px 0 0 10px;position:relative;border-right:15px solid #27ae60} .a144{background:#9b59b6;color:#fff;font-weight:600;padding:8px 20px;border-radius:0 0 15px 0;box-shadow:3px 3px 0 #8e44ad} .a145{background:#f1c40f;color:#fff;font-weight:600;padding:10px 15px;border-radius:30px 0 30px 0;border:2px solid #f39c12} .a146{background:#e67e22;color:#fff;font-weight:600;padding:10px 20px;border-radius:10px;position:relative;box-shadow:0 3px 0 #d35400} .a147{background:#1abc9c;color:#fff;font-weight:600;padding:10px 25px;border-radius:25px;border:2px dashed #fff;outline:2px solid #16a085} .a148{background:#34495e;color:#fff;font-weight:600;padding:12px 15px;border-radius:10px 10px 0 0;border-bottom:4px solid #2c3e50} .a149{background:#f0f0f0;color:#333;font-weight:600;padding:10px 15px;border-radius:50px;border:3px solid #ddd;box-shadow:inset 0 0 5px rgba(0,0,0,0.1)} .a150{background:#ff5722;color:#fff;font-weight:600;padding:10px 20px;border-radius:0 10px 10px 10px;position:relative} |
15.波線下線付きの見出し
見出しデザインサンプル151
見出しデザインサンプル152
見出しデザインサンプル153
見出しデザインサンプル154
見出しデザインサンプル155
見出しデザインサンプル156
見出しデザインサンプル157
見出しデザインサンプル158
見出しデザインサンプル160
|
1 |
<h2 class="a151">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a151{border-bottom:2px wavy #3498db;font-weight:600;padding:5px 0;margin:10px 0} .a152{font-weight:600;padding:5px 0;background-image:linear-gradient(to right,#333 30%,rgba(255,255,255,0) 0%);background-position:bottom;background-size:10px 2px;background-repeat:repeat-x;padding-bottom:5px} .a153{font-weight:600;padding:5px 0;position:relative;display:inline-block} .a154{font-weight:600;padding:5px 0;border-bottom:4px dotted #2ecc71} .a155{font-weight:600;padding:5px 0;background-image:repeating-linear-gradient(-45deg,#9b59b6,#9b59b6 3px,transparent 3px,transparent 6px);background-position:0 bottom;background-repeat:repeat-x;background-size:8px 3px;padding-bottom:5px} .a156{font-weight:600;padding:5px 0;border-bottom:3px solid;border-image:repeating-linear-gradient(to right,#f1c40f 0%,#f1c40f 50%,transparent 50%,transparent 100%) 5} .a157{font-weight:600;padding:5px 0;position:relative} .a158{font-weight:600;padding:5px 0;border-bottom:4px dashed #1abc9c} .a159{font-weight:600;padding:5px 0;background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="4"><circle cx="1" cy="1" r="1" fill="%2334495e"/><circle cx="5" cy="3" r="1" fill="%2334495e"/></svg>');background-position:bottom;background-repeat:repeat-x;padding-bottom:8px} .a160{font-weight:600;padding:5px 0;border-image:radial-gradient(circle at 8px 8px,#f39c12 0%,#f39c12 30%,transparent 30%) 0 0 8 0 repeat;border-bottom:4px solid transparent} |
16.二重線枠の見出し
見出しデザインサンプル161
見出しデザインサンプル162
見出しデザインサンプル163
見出しデザインサンプル164
見出しデザインサンプル165
見出しデザインサンプル166
見出しデザインサンプル167
見出しデザインサンプル168
見出しデザインサンプル169
見出しデザインサンプル170
|
1 |
<h2 class="a161">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a161{border:5px double #3498db;font-weight:600;padding:10px;border-radius:5px} .a162{border:4px double #e74c3c;font-weight:600;padding:10px;position:relative;background:#fff} .a163{border:4px double #2ecc71;font-weight:600;padding:15px;outline:1px solid #2ecc71;outline-offset:-10px} .a164{border:5px double #9b59b6;font-weight:600;padding:10px;box-shadow:0 0 0 1px #9b59b6;border-radius:5px} .a165{border:5px double #f1c40f;font-weight:600;padding:10px;background:#fff8e1} .a166{border:6px double #e67e22;font-weight:600;padding:15px;border-radius:10px;background:linear-gradient(to right,#fff 92%,#e67e22)} .a167{border:4px double #1abc9c;font-weight:600;padding:10px;position:relative} .a168{border:5px double #34495e;font-weight:600;padding:10px;background:#f8f9fa} .a169{border:4px double #f39c12;font-weight:600;padding:10px;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(to right,#f39c12,#e74c3c) border-box;border-radius:10px} .a170{border:5px double #3f51b5;font-weight:600;padding:15px;background:#fff;position:relative;box-shadow:inset 0 0 0 1px #3f51b5} |
17.横スクロールエフェクト付きの見出し
|
1 |
<h2 class="a171">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a171{position:relative;overflow:hidden;font-weight:600;padding:10px;background:#fff;border-left:5px solid #3498db} .a172{position:relative;font-weight:600;padding:10px;overflow:hidden;border-bottom:1px solid #ddd} .a173{position:relative;font-weight:600;padding:10px;overflow:hidden;border-bottom:2px solid #eee} .a174{position:relative;font-weight:600;padding:10px;overflow:hidden} .a175{position:relative;font-weight:600;padding:10px;overflow:hidden;border-bottom:2px dashed #ccc} .a176{position:relative;font-weight:600;padding:10px 15px;overflow:hidden;border-left:4px solid transparent} .a177{position:relative;font-weight:600;padding:10px;overflow:hidden} .a178{position:relative;font-weight:600;padding:10px;overflow:hidden;border-bottom:3px solid #ecf0f1} .a179{position:relative;font-weight:600;padding:10px;overflow:hidden} .a180{position:relative;font-weight:600;padding:10px;overflow:hidden;border-radius:5px;background:#f8f8f8} |
18.ドットパターン背景の見出し
見出しデザインサンプル181
見出しデザインサンプル182
見出しデザインサンプル183
見出しデザインサンプル184
見出しデザインサンプル185
見出しデザインサンプル186
見出しデザインサンプル187
見出しデザインサンプル188
見出しデザインサンプル189
見出しデザインサンプル190
|
1 |
<h2 class="a181">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a181{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#3498db 1px,transparent 1px);background-size:10px 10px} .a182{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#e74c3c 2px,transparent 2px);background-size:20px 20px;border-left:4px solid #e74c3c} .a183{font-weight:600;padding:10px;background-color:#f8f9fa;background-image:linear-gradient(45deg,#2ecc71 25%,transparent 25%,transparent 50%,#2ecc71 50%,#2ecc71 75%,transparent 75%);background-size:10px 10px;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,0.5)} .a184{font-weight:600;padding:10px;background-color:#fff;background-image:linear-gradient(#9b59b6 1px,transparent 1px),linear-gradient(to right,#9b59b6 1px,transparent 1px);background-size:20px 20px;border:1px solid #9b59b6} .a185{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#f1c40f 3px,transparent 3px);background-size:30px 30px;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,0.1)} .a186{font-weight:600;padding:10px;background-color:#fff;background-image:linear-gradient(45deg,#e67e22 25%,transparent 25%),linear-gradient(-45deg,#e67e22 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e67e22 75%),linear-gradient(-45deg,transparent 75%,#e67e22 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,10px 0;color:#e67e22} .a187{font-weight:600;padding:10px;background-color:#e8f8f5;background-image:radial-gradient(#1abc9c 1px,transparent 2px);background-size:15px 15px;border-bottom:3px solid #1abc9c} .a188{font-weight:600;padding:10px;background-color:#f5f5f5;background-image:repeating-linear-gradient(0deg,#34495e,#34495e 1px,transparent 1px,transparent 10px),repeating-linear-gradient(90deg,#34495e,#34495e 1px,transparent 1px,transparent 10px);color:#34495e} .a189{font-weight:600;padding:10px;background-color:#fff8e1;background-image:linear-gradient(135deg,#f39c12 10%,transparent 10%);background-size:20px 20px;color:#f39c12;border-radius:5px} .a190{font-weight:600;padding:10px;background-color:#fff;background-image:radial-gradient(#3f51b5 1.5px,transparent 1.5px),radial-gradient(#3f51b5 1.5px,transparent 1.5px);background-size:30px 30px;background-position:0 0,15px 15px;border:1px solid #3f51b5} |
19.折り紙風の折れ曲がり角デザインの見出し
見出しデザインサンプル191
見出しデザインサンプル192
見出しデザインサンプル193
見出しデザインサンプル194
見出しデザインサンプル195
見出しデザインサンプル196
見出しデザインサンプル197
見出しデザインサンプル198
見出しデザインサンプル199
見出しデザインサンプル200
|
1 |
<h2 class="a191">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a191{font-weight:600;padding:10px;background:#fff;position:relative;border:1px solid #ddd;box-shadow:1px 1px 3px rgba(0,0,0,0.1)} .a192{font-weight:600;padding:15px;background:#fff;position:relative;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .a193{font-weight:600;padding:15px;background:#f0f0f0;position:relative;border-left:3px solid #2ecc71;box-shadow:1px 1px 3px rgba(0,0,0,0.1)} .a194{font-weight:600;padding:10px;background:#fff;position:relative;border:1px solid #ddd;border-radius:5px} .a195{font-weight:600;padding:15px;background:#fff;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .a196{font-weight:600;padding:10px;background:#fff;border:1px solid #ddd;position:relative;border-radius:5px;box-shadow:2px 2px 0 #e67e22} .a197{font-weight:600;padding:15px;background:#fff;position:relative;border:1px solid #e0e0e0} .a198{font-weight:600;padding:15px;background:#fff;position:relative;border:1px solid #ddd;border-radius:3px} .a199{font-weight:600;padding:10px;background:#fff;position:relative;border:1px solid #ddd;box-shadow:1px 1px 3px rgba(0,0,0,0.1)} .a200{font-weight:600;padding:15px;background:#fff;position:relative;border:1px solid #e0e0e0;border-radius:5px} |
20.テープ貼り付け風の見出し
見出しデザインサンプル201
見出しデザインサンプル202
見出しデザインサンプル203
見出しデザインサンプル204
見出しデザインサンプル205
見出しデザインサンプル206
見出しデザインサンプル207
見出しデザインサンプル208
見出しデザインサンプル209
見出しデザインサンプル210
|
1 |
<h2 class="a201">見出しデザインサンプル</h2> |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.a201{font-weight:600;padding:10px;background:#fff;position:relative;box-shadow:0 2px 4px rgba(0,0,0,0.1)} .a202{font-weight:600;padding:10px;background:#fff;position:relative;border:1px solid #ddd;border-radius:5px} .a203{font-weight:600;padding:15px;background:#f9f9f9;position:relative;border-left:3px solid #2ecc71;box-shadow:1px 1px 3px rgba(0,0,0,0.1)} .a204{font-weight:600;padding:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.1);position:relative} .a205{font-weight:600;padding:10px;background:#fff;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .a206{font-weight:600;padding:10px 20px;background:#fff;position:relative;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .a207{font-weight:600;padding:10px;background:#f5f5f5;position:relative;border-radius:3px} .a208{font-weight:600;padding:15px;background:#fff;position:relative;box-shadow:0 1px 3px rgba(0,0,0,0.1)} .a209{font-weight:600;padding:10px;background:#fff;position:relative;border:1px dashed #f39c12;box-shadow:0 0 0 3px #fff,0 1px 3px 3px rgba(0,0,0,0.1)} .a210{font-weight:600;padding:15px;background:#fff;position:relative;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.1)} |