見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)
この記事は約25分で読めます。
記事中に使用する見出しタグ「<h3></h3>、<h4></h4>」。
この見出しタグのデザインを変更するだけで、ブログ内のイメージはガラッと変わります。
賢威はシンプルな見出しタグが多いので、私はいつも見出しのデザインを変更しています。
見出しデザインは画像を使用する場合もありますが、
ここでは、CSSの修正のみで見出しのデザイン変えます。
シンプルな見出しから、凝った見出しまでデザインは様々なので、
あなたのWebサイト・ブログに合ったデザインを選んでください。
それぞれ、見出しデザインの見本とCSSへ追加するスタイルを並べています。
賢威の「h3」タグに合わせてCSSを作っていますので、
「h4」タグなど他に適用する場合は、フォントサイズ等を適宜変更して使用してください。
Topics
- 左ラインと下ラインのシンプルな見出し
- 上下2重ラインのシンプルな見出し
- 角丸のシンプルな見出し
- 外枠と長方形のワンポイントの見出し
- 角丸外枠と円のワンポイントの見出し
- 吹き出し型の見出し(賢威6.1プリティー版)
- リボン型の見出し
- ワンポイントと下線の見出し1
- 浮き出しているボックスの見出し
- 切り取ったようなラインの見出し
- 斜めに貼り付けたテープのような見出し
- 中が斜線になっている吹き出し型の見出し
- 右下が折れている紙のような見出し
- モザイクワンポイントの見出し
- 旗のような見出し
- ワンポイントと下線の見出し2
- 先頭文字を大きく際立たせた見出し
見出しサンプル1
h3{ margin: 0 0 1.5em; padding: 0.8em; border-left: 7px solid #B92A2C; border-bottom: 1px dashed #B92A2C; font-size: 1.143em; font-weight: bold; }
見出しサンプル2
h3{ margin: 0 0 1.5em; padding: 0.8em; border-top: 3px double #B92A2C; border-bottom: 3px double #B92A2C; font-size: 1.143em; font-weight: bold; }
見出しサンプル3
h3{ margin: 0 0 1.5em; padding: 0.8em; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
見出しサンプル4
h3{ position: relative; margin: 0 0 1.5em; padding: 0.8em 0 0.8em 1.5em; border: 2px solid #B92A2C; font-size: 1.143em; font-weight: bold; } h3:before{ content: ""; position: absolute; background: #B92A2C; top: 50%; left: 0.5em; margin-top :-15px; height: 30px; width: 8px; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; }
見出しサンプル5
h3{ position: relative; margin: 0 0 1.5em; padding: 0.8em 0 0.8em 2.5em; border: 1px solid #B92A2C; font-size: 1.143em; font-weight: bold; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; } h3:before { content: ""; position: absolute; background: #B92A2C; top: 50%; left: 0.5em; margin-top :-10px; height: 20px; width: 20px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; box-shadow: 1px 1px 1px #B92A2C inset; -moz-box-shadow: 1px 1px 1px #B92A2C inset; -webkit-box-shadow: 1px 1px 1px #B92A2C inset; -o-box-shadow: 1px 1px 1px #B92A2C inset; -ms-box-shadow: 1px 1px 1px #B92A2C inset; }
見出しサンプル6
h3{ position: relative; margin: 0 0 1.5em; padding: 0.8em; background: #B92A2C; color: #fff; font-size: 1.143em; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } h3:after{ position: absolute; bottom: -15px; left: 10%; z-index: 90; margin-left: -15px; border-top: 15px solid #B92A2C; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 0; content: ""; }
見出しサンプル7
h3{ position: relative; color: #fff; background: #B92A2C; font-size: 1.143em; font-weight: bold; margin: 0 -1.8em 1.5em -1.8em; padding: 0.8em; box-shadow: 0 1px 3px #777; -moz-box-shadow: 0 1px 3px #777; -webkit-box-shadow: 0 1px 3px #777; -o-box-shadow: 0 1px 3px #777; -ms-box-shadow: 0 1px 3px #777; } h3:after, h3:before{ content: ""; position: absolute; top: 100%; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid #333; } h3:before{ right: 0; border-left: 5px solid #333; } h3:after{ left: 0; border-right: 5px solid #333; }
見出しサンプル8
h3{ position: relative; color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 1.7em; border-bottom: 3px solid #B92A2C; } h3:before{ content: ""; position: absolute; background: #d48789; top: 0; left: 0.4em; height: 12px; width: 12px; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); } h3:after{ content: ""; position: absolute; background:#d26466; top: 1.0em; left: 0; height: 8px; width: 8px; transform: rotate(15deg); -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); }
見出しサンプル9
h3{ margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; border: 2px solid #B92A2C; box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.4); }
見出しサンプル10
h3{ margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; border-top: 1px dashed #aaa; border-bottom: 1px dashed #aaa; background: #eee; text-shadow: 1px 1px 0 rgba(255,255,255,1); box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; -moz-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; -webkit-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; -o-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; -ms-box-shadow: 0 5px 4px -4px rgba(0,0,0,0.3) inset; }
見出しサンプル11
h3{ position: relative; padding: 0.8em; margin: 0 0 1.5em; font-size: 1.25em; font-weight: bold; text-align: center; color: #fff; background: #B92A2C; transform: rotate(-1deg) skew(-1deg); -webkit-transform: rotate(-1deg) skew(-1deg); -moz-transform: rotate(-1deg) skew(-1deg); -o-transform: rotate(-1deg) skew(-1deg); -ms-transform: rotate(-1deg) skew(-1deg); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C; -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C; -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C; -o-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C; -ms-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2), 1.0em 0 0 0 #B92A2C, -1.0em 0 0 0 #B92A2C; }
見出しサンプル12
h3{ position: relative; padding: 0.8em; margin: 0 0 1.5em; font-size: 1.143em; font-weight: bold; color: #333; background: #fff; text-shadow: 1px 1px 0 #fff, 1px 1px 0 #999; border: #B92A2C solid 2px; background-image: -webkit-gradient(linear, left top, right bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(255, 255, 255, 0.0)), color-stop(0.4, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(0, 0, 0, 0.1)), color-stop(0.6, rgba(255, 255, 255, 0.0)), to( rgba(255, 255, 255, 0.0)) ); background-image: -webkit-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -moz-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: -o-linear-gradient(top -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-image: linear-gradient(to bottom -45deg, transparent 40%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.1) 60%, transparent 60% ); background-size:4px 4px; } h3:before{ content: " "; position: absolute; top: 100%; left: 24px; width: 0; height: 0; border-width: 12px; border-style: solid; border-color: transparent; border-top-color: #B92A2C; } h3:after{ content: " "; position: absolute; top: 100%; left: 28px; width: 0; height: 0; border-width: 8px; border-style: solid; border-color: transparent; border-top-color: #F0F0F0; z-index:1; }
見出しサンプル13
h3{ position: relative; margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; color: #fff; background: #B92A2C; box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2); -moz-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2); -webkit-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2); -o-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2); -ms-box-shadow: 12px 0 0 0 #B92A2C, 0 12px 0 0 #B92A2C, 1px 15px 4px -3px rgba(0,0,0,0.2); } h3:before{ content: " "; position: absolute; top: 100%; left: 100%; width: 0; height: 0; border-width: 12px 12px 0 0; border-style: solid; border-color: transparent; border-top-color: #822022; } h3:after{ content: " "; position: absolute; padding: 0 20px; bottom: 0; left: 0.8em; width: 10.0em; height: 1.5em; background: rgba(255,244,244,0.4); transform: rotate(-1deg); -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -o-transform: rotate(-1deg); }
見出しサンプル14
h3{ position: relative; margin: 0 0 1.5em; padding: 0.6em 0.4em 0.6em 4.0em; font-size: 1.143em; font-weight: bold; color: #fff; background: #333333; z-index: 1; } h3:before{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-right: #fff solid 2px; background: #B92A2C; background-image: -webkit-gradient(linear, left top, left bottom, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(top, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to bottom, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; } h3:after{ content: " "; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background-image: -webkit-gradient(linear, left top, right top, from( rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.0)), color-stop(0.20, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.1)), color-stop(0.40, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.3)), color-stop(0.60, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.5)), color-stop(0.80, rgba(255, 255, 255, 0.6)), to( rgba(255, 255, 255, 0.6)) ); background-image: -webkit-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -moz-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: -o-linear-gradient(left, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); background-image: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.1) 20%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0.6) 100% ); z-index:-1; }
見出しサンプル15
h3{ position: relative; margin: 0 0 1.5em; padding: 0.8em; font-size: 1.143em; font-weight: bold; color: #fff; background: #B92A2C; } h3:before{ content: "<"; position: absolute; top: middle; left: -10px; width: 0; height: 0; font-size: 25px; line-height: 1.0; color: #c96; } h3:after{ content: " "; position: absolute; top: -2px; left: -10px; width: 0; height: 130%; border: #600 solid 2px; border-radius:2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; transform: rotate(-2deg); -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); }
見出しサンプル16
h3{ position: relative; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; padding: 0.5em 0.5em 0.5em 2.0em; border-bottom: 2px solid #B92A2C; } h3:before{ content: "□"; font-size: 200%; position: absolute; color: #ff6b6e; top: -0.8em; left: 0.3em; height: 12px; width: 12px; } h3:after{ content: "□"; font-size: 200%; position: absolute; color: #B92A2C; top: -0.5em; left: 0; height: 12px; width: 12px; }
見出しサンプル17
h3{ color: #111; font-size: 1.143em; font-weight: bold; margin: 0 0 1.5em; border-bottom: 2px solid #B92A2C; box-shadow: 0 1px 0 #aaaaaa; -webkit-box-shadow: 0 1px 0 #aaaaaa; -moz-box-shadow: 0 1px 0 #aaaaaa; text-shadow: #999999 0px 1px 1px; } h3{ font-size:3.0em; }
一部のデザインで以下のサイトを参考させて頂き、賢威用にアレンジしました。
H1一つでここまで出来るCSS見出しデザインのアイデア9個 | SQUEEZE
CSSの擬似要素を使った見出しデザイン | Webpark
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 […]
[…] H2タグのスタイルは「賢威カスタマイズ研究所」さんの記事「見出しのデザインをCSSのみでカスタマイズする」のCSSを参考にさせてもらいました。サンプルコードから色と幅を変えただけの結果がコレです。おおむね満足の結果となりました。 […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 via kwout […]
[…] デザインとコード取得ができる参考サイトはこちら ※ご自身でお気に入りのデザインを他のサイト等で探してコード取得しておいてもOKです。 上記の参考にさせていただいたサイ […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | 賢威カスタマイズ研究所 […]
[…] http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] なお、このカスタマイズについては、『賢威カスタマイズ研究所』さんのこの記事を参考にさせていただきました。 […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] 賢威カスタマイズ研究所 […]
[…] http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] サンプル10~13は見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)を参考にさせていただきました。 […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] | WEB道 CSS見出し-ジェネレーター | WEB道 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) | […]
[…] 参照サイト:WordPressテーマ マテリアル 見出しデザイン参照:賢威カスタマイズ研究所 […]
[…] http://www.keni-customize.net/custom-midashi-design-555/ 上記のver.2を少しアレンジしたバーションです。 […]
[…] http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] 賢威カスタマイズ研究所 […]
[…] 参考 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応)−賢威カスタマイズ研究所− […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] 見出しのデザインをCSSのみでカスタマイズする(一部CSS3対応) […]
[…] 見出し5と6は“賢威カスタマイズ研究所”さんの物を色を変えて使用しています。 […]
[…] ※ここからいただきました。 http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] 見出しのデザインをCSSのみでカスタマイズする CSS でカッコいい見出しをつくろう アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン […]
[…] 賢威カスタマイズ研究所 […]