htmlとcssだけでできる見出し27選です。
見出し次第で、記事の読みやすさは大きく変わります。
おもに、囲みと背景を利用した見出しのみです。
色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。
紹介している<h1>タグには、クラス名（.cp_h1title）を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。
h1 {cssの中身}色には6桁の16進数のカラーコード(#000000)も使えますが、他に、
なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
border: solid 2px #90CAF9;
box-shadow: 0px 0px 0px 5px #2196F3;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: #E65100;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: #03A9F4;
border-radius: 6px;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: #FF8A65;
border: 2px solid #BF360C;
border-radius: 6px;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
border: dashed 1px #ffffff;
background: #80DEEA;
box-shadow: 0px 0px 0px 5px #80DEEA;
color: #ffffff;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
border: 2px solid #ffffff;
background: #f1c6c6;
box-shadow:0px 0px 0px 6px #da3c41;
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: linear-gradient(180deg, #da3c41 0%, #f1c6c6 100%);
color:#ffffff;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: 4px 20px 4px 40px;
background: #FFB74D;
border-top: 2px solid #E65100;
border-bottom: 2px solid #E65100;
z-index:1;
color:#ffffff;
}
.cp_h1title:before {
position: absolute;
content: '';
left: 0px;
top: -3px;/*ボーダーサイズ分マイナス*/
width: 0;
height: 0;
border: none;
border-left: solid 40px #fafcfc;/*bodyのカラーと同じ色に*/
border-bottom: solid 55px transparent;
z-index: 2;
}
.cp_h1title:after {
position: absolute;
content: '';
right: 0px;
top: -3px;/*ボーダーサイズ分マイナス*/
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;/*bodyのカラーと同じ色に*/
border-bottom: solid 55px white;
z-index: 2;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: repeating-linear-gradient(-45deg, #3949AB, #3949AB 5px,#5C6BC0 5px, #5C6BC0 10px);
color: #ffffff;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
background: #00ACC1;
border-radius: 8px;
color: #ffffff;
}
.cp_h1title:after {
position: absolute;
content: '';
top: 100%;
left: 20px;
border: 10px solid transparent;
border-top: 10px solid #00ACC1;
width: 0;
height: 0;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: 4px 34px 3px 34px;
background: #EC407A;
border-radius: 1em;
color:#fff;
}
.cp_h1title:before,
.cp_h1title:after {
font-size: 0.5em;
top: calc(50% - 0.6em);
}
.cp_h1title:before {
position: absolute;
content: '●';
color: #fff;
left:10px;
}
.cp_h1title:after {
position: absolute;
content: '●';
color: #fff;
right:10px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
background-color: #00897B;
color: #ffffff;
}
.cp_h1title::after {
position: absolute;
top: 0;
right: 0;
content: '';
width: 0;
border-width: 0 16px 16px 0;
border-style: solid;
border-color: #fafcfc #fafcfc #B2DFDB #B2DFDB;
box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background-color: #455A64;
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.4);
color: #ffffff;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background: #FFA000;
box-shadow: 0 0 7px 3px rgba(215, 73, 23,0.5) inset;
color:#ffffff;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
border: 2px solid #283593;
border-radius: 1em .6em 2em .6em/.6em 2em .6em 1em;
color: #283593;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
zoom: 1;
background: #F8BBD0;
box-shadow:0 1px 3px rgba(0,0,0,0.4);
color: #D81B60;
}
.cp_h1title:before,
.cp_h1title:after {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 8px solid transparent;
border-top: 8px solid #EC407A;
}
.cp_h1title:before {
right: 0;
border-left: 8px solid #EC407A;
}
.cp_h1title:after {
left: 0;
border-right: 8px solid #EC407A;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
background-color: #B2EBF2;
color: #0097A7;
}
.cp_h1title::before,.cp_h1title::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
.cp_h1title::before {
top: 100%;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #0097A7;
}
.cp_h1title::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #0097A7;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
background-color: #F9A825;
color: #E65100;
}
.cp_h1title::before,.cp_h1title::after {
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
}
.cp_h1title::before {
top: 100%;
left: 0;
border-width: 0 15px 15px 0;
border-right-color: #F57F17;
}
.cp_h1title::after {
top: -15px;
right: 0;
border-style: solid;
border-width: 0 15px 15px 0;
border-bottom-color: #da3c3c;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .6em .3em .3em .3em;
border: 1px solid #0097A7;
}
.cp_h1title::after{
content: "check!";
position: absolute;
top: -8px;
left: 10px;
background: #fafcfc;
font-size: 14px;
color: #0097A7;
padding: 0 10px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
background-color: #4CAF50;
color: #fff;
padding: .3em;
position: relative;
overflow: hidden;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}
.cp_h1title:before{
background-color: #fff;
border-radius: 100px 100px 100px 100px;
content: '';
display: block;
opacity: 0.5;
position: absolute;
bottom: 9px;
left: 0px;
width: 100px;
height: 100px;
}
.cp_h1title:after{
background-color: #fff;
border-radius: 50px 50px 50px 50px;
content: '';
opacity: 0.6;
position: absolute;
bottom: -8px;
left: 70px;
display: block;
width: 50px;
height: 50px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
background-color: #F8BBD0;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
padding: .3em;
color: #D81B60;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
padding: .3em;
background-color: rgba(255,255,255,0);
border-left: 2px dotted rgba(0,0,0,0.1);
border-right: 2px dotted rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
background-color: #da3c3c;
color: #fff;
overflow: hidden;
padding: .3em;
}
.cp_h1title:before{
background-color: rgba(27, 37, 56, 1);
content: '';
display: block;
transform: rotate(-30deg);
position: absolute;
bottom: -30px;
right: -100px;
width: 200px;
height: 200px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em .7em;
border-top: solid 1px #da3c41;
border-bottom: solid 1px #da3c41;
}
.cp_h1title::before,
.cp_h1title::after{
content: '';
position: absolute;
top: -10px;
width: 1px;
height: calc(100% + 20px);
background-color: #da3c41;
}
.cp_h1title::before{
left: 10px;
}
.cp_h1title::after{
right: 10px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: .3em;
border: solid 2px #2196F3;
border-radius: 3px 0 3px 0;
}
.cp_h1title:before,.cp_h1title:after {
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #2196F3;
border-radius: 50%;
}
.cp_h1title:after {
bottom: 100%;
right: 100%;
}
.cp_h1title:before {
top: 100%;
left: 100%;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info