コピペでできる!CSSとhtmlだけの囲みと背景を利用した見出しデザイン25選

CSS HTML
 2017.12.31
 2018.03.12

htmlとcssだけでできる見出し27選です。
見出し次第で、記事の読みやすさは大きく変わります。
おもに、囲みと背景を利用した見出しのみです。

色は好みで変えていただければ、かまいません。
また、基本htmlは<h1>タグを使用していますが、<h2>〜<h6>などにそのまま変更することができます。

紹介している<h1>タグには、クラス名(.cp_h1title)を付与していますが、こちらも
css部分を下記のように変更すれば、クラスをつけずに使用することも可能です。

h1 {cssの中身}

色には6桁の16進数のカラーコード(#000000)も使えますが、他に、

  • 3桁の16進数カラーコード(#000)
  • RGB色相・彩度・明度(rgb(0,0,0))
  • RGBA色相・彩度・明度・透明度(rgb(0,0,0,1))

なども使用できます。
RGBA値での指定は、サポートしていないブラウザだと、透明度だけが無視されるのではなく、色指定そのものが認識されずに無効となるので注意が必要です。

browser:  65 11 20 10 

囲みと背景 [25種]

囲み利用したしたものです。指定する種類によって印象が違うものになります。

全体を囲む時は「border: サイズ 種類 色;」のようにボーダーの位置を省略できます
角丸は「border-radius:サイズ;」で指定します。
サイズは「左上、右上、右下、左下」の順番です。全て同じ場合は省略して1つだけの記載でOKです。
また、iOS8以下やAndroid4.4.4以下対応が必要な時は「-webkit-border-radius: サイズ;」にてベンダープレフィックスの指定を追加します。

影を利用した二重囲み

ニャン易度

見出しテキスト

<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;
}

囲みの上に「check!」の文字を載せる

ニャン易度

見出しテキスト

<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%;
}

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?