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

CSS HTML
 2017.12.31
 2024.07.03

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:  ✔︎ ✔︎ ✔︎ 

囲みと背景 [25種]

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

全体を囲む時は「border: サイズ 種類 色;」のようにボーダーの位置を省略できます
角丸は「border-radius:サイズ;」で指定します。
サイズは「左上、右上、右下、左下」の順番です。全て同じ場合は省略して1つだけの記載でOKです。

影を利用した二重囲み

ニャン易度

見出しテキスト

<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;/*背景色で右のリボンを再現*/
}

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

ニャン易度

見出しテキスト

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

copypet.jp

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

More Info

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