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 {
color: #ffffff;
background: #E65100;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #ffffff;
background: #03A9F4;
border-radius: 6px;/*角丸*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #ffffff;
background: #FF8A65;
border: 2px solid #BF360C;/*囲み線*/
border-radius: 6px;/*角丸*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #ffffff;
background: #80DEEA;
border: dashed 1px #ffffff;/*ステッチ部分*/
box-shadow: 0px 0px 0px 5px #80DEEA;/*外側のライン*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
background: #e8e8e8;
border: 2px solid #6a4e12;/*額縁の内側*/
box-shadow:0px 0px 0px 6px #896321;/*額縁の外側*/
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color:#ffffff;
background: linear-gradient(180deg, #4CAF50 0%, #C8E6C9 100%);/*グラデーション*/
}<h1 class="cp_h1title"><span>見出しテキスト</span></h1>.cp_h1title {
position: relative;
color:#ffffff;
background: #FFB74D;
border-top: 2px solid #E65100;/*上の線*/
border-bottom: 2px solid #E65100;/*下の線*/
transform: skewX(150deg);/*傾斜をつける*/
}
.cp_h1title span {
display: block;
transform: skewX(-150deg);/*テキストのみ傾斜を戻す*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #ffffff;
background: repeating-linear-gradient(-45deg, #3949AB, #3949AB 5px,#5C6BC0 5px, #5C6BC0 10px);/*ストライプを指定*/
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
color: #ffffff;
background: #00ACC1;
border-radius: 8px;
}
.cp_h1title:after {
position: absolute;
content: '';
bottom: -10px;/*三角形の高さ分さげる*/
left: 20px;/*三角形の横位置*/
border-style: solid;
border-width: 10px 10px 0 10px;/*下向きの三角形*/
border-color: #00ACC1 transparent transparent transparent;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: 0 34px 0 34px;
background: #EC407A;
border-radius: 1em;
color:#fff;
}
.cp_h1title:before,
.cp_h1title:after {
position: absolute;
content: '●';
color: #fff;
font-size: 0.5em;
top: calc(50% - 0.5em);
}
.cp_h1title:before {
left:10px;
}
.cp_h1title:after {
right:10px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
background-color: #00897B;
color: #ffffff;
}
.cp_h1title::after {
position: absolute;
content: '';
top: 0;
right: 0;
width: 0;
border-width: 0 16px 16px 0;/*ドッグイヤーのサイズ*/
border-style: solid;
border-color: #fafcfc #fafcfc #B2DFDB #B2DFDB;/*背景色（#fafcfc）*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #ffffff;
background-color: #455A64;
box-shadow: 0px 5px 3px -3px rgba(0,0,0,0.4);
}
<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color:#ffffff;
background: #FFA000;
box-shadow: 0 0 5px 2px rgba(215, 73, 23,0.5) inset;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
border: 2px solid #283593;
border-radius: 15px 30px 20px 35px/60px 20px 35px 40px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
background: #F8BBD0;
box-shadow:0 1px 3px rgba(0,0,0,0.4);
}
.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;
color: #0097A7;
background-color: #B2EBF2;
}
.cp_h1title::before,
.cp_h1title::after {
position: absolute;
content: '';
border-style: solid;
border-width: 0 15px 15px 0;
border-color: transparent;
}
.cp_h1title::before {/*下の折り返し部分*/
top: 100%;
left: 0;
border-right-color: #0097A7;
}
.cp_h1title::after {/*上の折り返し部分*/
top: -15px;
right: 0;
border-style: solid;
border-bottom-color: #0097A7;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
color: #E65100;
background: #F9A825;
}
.cp_h1title::before,
.cp_h1title::after {
position: absolute;
content: '';
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: 0;
right: 0;
border-width: 25px 20px;
border-right-color: #fafcfc;/*背景色で右のリボンを再現*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: 10px 10px 0px 10px;
border: 1px solid #0097A7;
}
.cp_h1title::after{
content: "check!";
position: absolute;
padding: 0 10px;
top: -10px;
left: 10px;
color: #0097A7;/*「check!」の文字色*/
background: #fafcfc;/*「check!」をのせる背景*/
font-size: 14px;/*「check!」の文字サイズ*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #fff;
background-color: #4CAF50;
position: relative;
overflow: hidden;/*●がはみ出ないように「hidden」に設定*/
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
}
.cp_h1title:before,
.cp_h1title:after {
position: absolute;
content: '';
display: block;
}
.cp_h1title:before{/*左上の●*/
background-color: #fff;
border-radius: 100px 100px 100px 100px;
opacity: 0.5;
bottom: 9px;
left: 0px;
width: 100px;
height: 100px;
}
.cp_h1title:after{/*左下の●*/
background-color: #fff;
border-radius: 50px 50px 50px 50px;
opacity: 0.6;
bottom: -8px;
left: 70px;
width: 50px;
height: 50px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
color: #D81B60;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);/*文字を読みやすくするために影を追加*/
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;/*パターンの大きさ*/
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
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;
color: #fff;
background-color: #da3c3c;
overflow: hidden;/*はみ出ないようにする*/
}
.cp_h1title:before{
position: absolute;
content: '';
display: block;
bottom: -220px;
right: -240px;
width: 330px;
height: 330px;
transform: rotate(50deg);/*斜めにする角度*/
background-color: #1b2538;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
padding: 5px 20px;
border-top: solid 1px #da3c41;/*上の線*/
border-bottom: solid 1px #da3c41;/*下の線*/
}
.cp_h1title::before,
.cp_h1title::after{
position: absolute;
content: '';
top: -10px;
width: 1px;
height: calc(100% + 20px);/*上下10pxずつオーバーするように設定*/
background-color: #da3c41;
}
.cp_h1title::before{
left: 10px;
}
.cp_h1title::after{
right: 10px;
}<h1 class="cp_h1title">見出しテキスト</h1>.cp_h1title {
position: relative;
border: solid 2px #2196F3;
border-radius: 3px 0 3px 0;
width: calc(100% - 26px);
margin-left: 13px;
}
.cp_h1title:before,.cp_h1title:after {
content: '';
position: absolute;
width:10px;
height: 10px;
border: solid 2px #2196F3;
border-radius: 20% 50% 20% 50%;
}
.cp_h1title:after {
top: -13px;
left: -13px;
}
.cp_h1title:before {
bottom: -13px;
right: -13px;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info