見出しのデザインをCSSのみでカスタマイズする（一部CSS3対応）
この記事は約25分で読めます。
記事中に使用する見出しタグ「<h3></h3>、<h4></h4>」。
この見出しタグのデザインを変更するだけで、ブログ内のイメージはガラッと変わります。
賢威はシンプルな見出しタグが多いので、私はいつも見出しのデザインを変更しています。
見出しデザインは画像を使用する場合もありますが、
ここでは、CSSの修正のみで見出しのデザイン変えます。
シンプルな見出しから、凝った見出しまでデザインは様々なので、
あなたのWebサイト・ブログに合ったデザインを選んでください。
それぞれ、見出しデザインの見本とCSSへ追加するスタイルを並べています。
賢威の「h3」タグに合わせてCSSを作っていますので、
「h4」タグなど他に適用する場合は、フォントサイズ等を適宜変更して使用してください。
Topics
- 左ラインと下ラインのシンプルな見出し
- 上下2重ラインのシンプルな見出し
- 角丸のシンプルな見出し
- 外枠と長方形のワンポイントの見出し
- 角丸外枠と円のワンポイントの見出し
- 吹き出し型の見出し（賢威6.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;
}
見出しサンプル２
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;
}
見出しサンプル３
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;
}
見出しサンプル４
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;
}
見出しサンプル５
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;
}
見出しサンプル６
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: "";
}
見出しサンプル７
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;
}
見出しサンプル８
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);
}
見出しサンプル９
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);
}
見出しサンプル１０
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;
}
見出しサンプル１１
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;
}
見出しサンプル１２
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;
}
見出しサンプル１３
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);
}
見出しサンプル１４
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;
}
見出しサンプル１５
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);
}
見出しサンプル１６
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;
}
見出しサンプル１７
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対応） […]
[…] 見出し５と６は“賢威カスタマイズ研究所”さんの物を色を変えて使用しています。 […]
[…] ※ここからいただきました。 http://www.keni-customize.net/custom-midashi-design-555/ […]
[…] 見出しのデザインをCSSのみでカスタマイズする CSS でカッコいい見出しをつくろう アクセントに使えるCSSのborderと擬似要素を使った立体的な見出しデザイン […]
[…] 賢威カスタマイズ研究所 […]