CSSで作るオシャレな見出しデザイン31選

ブログやwebサイトをカスタマイズする時、意外に悩むのが見出しのデザインですよね。 オシャレで可愛く、もしくはカッコよくデザインしたいと思っても、中々悩んでしまう事もあります。

そこでこのページでは画像を使わずcssだけで作れる見出しのデザインを紹介していきます。 もちろんすべてコピペするだけでwebサイトやブログに実装できるので、今すぐに簡単にカスタマイズする事が可能です。

CSSを使った見出しデザイン

各見出しのHTMLとCSSをコピペしてお使いください。 ここではh3タグに対してCSSを設定していきますが、使用したい箇所にclass属性を追加する事で見出し以外のデザインにも使えます。

まずはシンプルな形から紹介していきます。

背景色のみのデザイン

背景色のみのデザインの表示サンプル

背景色を付けただけのシンプルなデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#eee;
  padding:20px 10px;
}

角丸のデザイン

角丸のデザインの表示サンプル

見出しの角を丸くしただけのシンプルなデザイン

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#F0F8FF;
  padding:20px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

左に線があるデザイン

左に線があるデザインの表示サンプル

左側に線(border)を付けただけのシンプルなデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:20px 10px;
  border-left:8px solid #F0F8FF;
}

左線+下線のデザイン

左線+下線のデザインの表示サンプル

左線に下線を追加したデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:20px 10px;
  border-bottom:1px solid #e5f2fe;
  border-left:8px solid #e5f2fe;
}

左線+背景色があるデザイン

左線+背景色があるデザインの表示サンプル

左線(border)に背景色(background-color)を付けたデザイン

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#f4f9fe;
  padding:20px 10px;
  border-left:8px solid #d2e9fd;
}

上下にボーダーがあるデザイン

上下にボーダーがあるデザインの表示サンプル

上下に二重線のボーダーを付けたシンプルな見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:20px 10px;
  border-top:3px double #d2e9fd;
  border-bottom:3px double #d2e9fd;
}

枠線を付けたデザイン

枠線を付けたデザインの表示サンプル

枠線に背景を付けただけの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#f4f9fe;
  padding:20px 10px;
  border:3px double #d2e9fd;
}

枠線を付けたデザイン(パターン2)

枠線を付けたデザイン(パターン2)の表示サンプル

枠線と背景の間に隙間を空けたデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#d2e9fd;
  padding:20px 10px;
  border:2px solid #fff;
  -webkit-box-shadow: 0 0 0 3px #d2e9fd;
  -moz-box-shadow: 0 0 0 3px #d2e9fd;
  box-shadow: 0 0 0 3px #d2e9fd;
}

崩れた手書き風のデザイン

崩れた手書き風のデザインの表示サンプル

少し崩した感じの手書き風のデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:20px 10px;
  border:2px solid #d2e9fd;
  -webkitborder-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
  -moz-border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
  border-radius: 2em .8em 3em .8em/.8em 3em .8em 2em;
}

サブタイトル付きのデザイン

サブタイトル付きのデザインの表示サンプル

CSSの疑似要素を使っているので、SEOに悪影響を及ぼさないサブタイトル付きの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:10px ;
  border-bottom:2px solid #d2e9fd;
  font-size:18px;
  position:relative;
}
.sample:before{
  content:"sub title";
  position:absolute;
  top:-10px;
  left:10px;
  font-size:14px;
}

ストライプデザインの見出し

ストライプデザインの見出しの表示サンプル

背景にCSS3のグラデーションを利用しストライプ柄をデザインした見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  background-color: #f1f8fe;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #fff), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #fff),
            color-stop(.75, #fff), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px;
  padding:20px 10px;
}

ストライプデザインの見出し(パターン2)

ストライプデザインの見出し(パターン2)の表示サンプル

ストライプ背景に枠線を付けたデザイン パステルカラーが綺麗

<h3 class="sample">見出しデザイン</h3>
.sample{
  background-color: #f1f8fe;
  background-image: -webkit-gradient(linear, 0 100%, 100% 0,
            color-stop(.25, #fff), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, #fff),
            color-stop(.75, #fff), color-stop(.75, transparent),
            to(transparent));
  background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -moz-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -ms-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  background-image: linear-gradient(45deg, #fff 25%, transparent 25%,
          transparent 50%, #fff 50%, #fff 75%,
          transparent 75%, transparent);
  -webkit-background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  background-size: 10px 10px;
  padding:20px 10px;
  border:solid 1px #c1e1fc;
}

古い紙のようなデザイン

古い紙のようなデザインの表示サンプル

2種類のbox-shadowを使う事で、古い紙のような質感を表現したデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  padding:20px 10px;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}

古い紙のようなデザイン(パターン2)

古い紙のようなデザイン(パターン2)の表示サンプル

古い紙のようなデザインに背景を追加したパターン

<h3 class="sample">見出しデザイン</h3>
.sample{
  background:#F2EFE7;
  padding:20px 10px;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}

布のようなデザイン

布のようなデザインの表示サンプル

ボーダーを追加して縫込みを表現した、布みたいなデザインの見出し

<h3 class="sample"><span>見出しデザイン</span></h3>
.sample{
  background:#F2EFE7;
  padding:3px;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
.sample span{
  display:block;
  border:1px dashed #fff;
  padding:20px 10px;
}

布のようなデザイン(パターン2)

布のようなデザイン(パターン2)の表示サンプル

上下に縫込みが入ったようなデザインのパターン

<h3 class="sample"><span>見出しデザイン</span></h3>
.sample{
  background:#F2EFE7;
  padding:3px 0;
  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2) inset,0 0 4px rgba(0, 0, 0, 0.2) ;
}
.sample span{
  display:block;
  border-top:1px dashed #fff;
  border-bottom:1px dashed #fff;
  padding:20px 10px;
}

エンボス風のデザイン

エンボス風のデザインの表示サンプル

背景が白以外の時のみ有効な、エンボス風のデザインの見出し。 背景に合わせたborderの色を設定して下さい。

<h3 class="sample">見出しデザイン</h3>
body {
  background:#4f5b6c;  /* 変更 */
}
.sample {
  color:#fff;
  padding:20px 10px;
  -webkit-box-shadow: 0 0 5px #333 inset;
  -moz-box-shadow: 0 0 5px #333 inset;
  box-shadow: 0 0 5px #333 inset;
  border-right:1px solid rgba(109,120,134,0.4); /* 背景に合わせて変更 */
  border-bottom:1px solid #6d7886;  /* 背景に合わせて変更 */
}

グラデーションのデザイン

グラデーションのデザインの表示サンプル

シンプルなグラデーションのデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  padding:20px 10px;
  background: #f1f8fe;
  background: -webkit-gradient(linear, left top, left bottom, from(#f1f8fe), to(#5ab0f9));
  background: -moz-linear-gradient(top, #f1f8fe, #5ab0f9);
  background: -o-linear-gradient(top, #f1f8fe, #5ab0f9);
  background: -ms-linear-gradient(top, #f1f8fe, #5ab0f9);
  background: linear-gradient(top, #f1f8fe, #5ab0f9);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f1f8fe', endColorstr='#5ab0f9');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f1f8fe', endColorstr='#5ab0f9')";
  background: linear-gradient(top, #f1f8fe, #5ab0f9);
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
  zoom: 1;
}

上だけ角丸のデザイン

上だけ角丸のデザインの表示サンプル

ボックスの上部だけ角丸にしたデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  padding:20px 10px;
  background: #81c2fa;
  -webkit-border-radius:10px 10px 0 0;
  -moz-border-radius:10px 10px 0 0;
  border-radius:10px 10px 0 0;
  border-bottom:1px solid #eee;
}

リボン風のデザイン

リボン風のデザインの表示サンプル

リボン風のデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position: relative;
  padding: 10px;
  color:#ffffff;
  zoom: 1;
  background: #81c2fa;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.sample:before,
.sample:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-top: 8px solid #327bba;
}
.sample:before {
  right: 0;
  border-left: 8px solid #327bba;
}
.sample:after {
  left: 0;
  border-right: 8px solid #327bba;
}

リボン風のデザイン(パターン2)

リボン風のデザイン(パターン2)の表示サンプル

縫込み風の表現をしたリボンのデザイン

<h3 class="sample"><span>見出しデザイン</span></h3>
 
.sample {
  position: relative;
  padding:3px 0;
  color:#ffffff;
  zoom: 1;
  background: #81c2fa;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.sample:before,
.sample:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-top: 8px solid #327bba;
}
.sample:before {
  right: 0;
  border-left: 8px solid #327bba;
}
.sample:after {
  left: 0;
  border-right: 8px solid #327bba;
}
.sample span{
  display:block;
  border-top:1px dashed #fff;
  border-bottom:1px dashed #fff;
  padding:10px;
}

リボン風のデザイン(パターン3)

リボン風のデザイン(パターン3)の表示サンプル

長いリボン風のデザインの見出し。
領域からはみ出す場合はネガティブマージンを併せて使用して下さい。

<h3 class="sample"><span class="sample2">見出しデザイン</span></h3>
.sample {
  position: relative;
  padding:3px 0;
  color:#ffffff;
  zoom: 1;
  background: #81c2fa;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,0.3);
  box-shadow:0 1px 3px rgba(0,0,0,0.3);
}
.sample:before,
.sample:after {
  content: "";
  position: absolute;
  top: 0;
  top:13px;
  height: 0;
  width: 0;
  border: 26px solid #81c2fa;
  z-index:-1;
}
.sample:before {
  right: -42px;
  border-right-color: transparent;
}
.sample:after {
  left: -42px;
  border-left-color: transparent;
}
.sample2:before,.sample2:after {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-top: 5px solid #327bba;
}
.sample2:before {
  right: 0;
  border-left: 5px solid #327bba;
}
.sample2:after {
  left: 0;
  border-right: 5px solid #327bba;
}
.sample span{
  display:block;
  border-top:1px dashed #fff;
  border-bottom:1px dashed #fff;
  padding:10px;
}

折り返しのデザイン

折り返しのデザインの表示サンプル

右端に折り返しがあるデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  background-color: #81c2fa;
  color:#fff;
  padding:20px 10px;
  position:relative;
}
.sample:after {
  content:"";
  position:absolute;
  top: 0;
  right: 0;
  border-color:#fff #fff #327bba #327bba;
  border-style: solid;
  border-width:0 25px 25px 0;
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0, 0.1);
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0, 0.1);
  box-shadow: -1px 1px 1px rgba(0,0,0, 0.1);
}

吹き出し風のデザイン

吹き出し風のデザインの表示サンプル

オシャレでかわいい吹き出し風のデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position: relative;
  background:#d4ebff;
  -webkit-box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.1) inset,1px 1px 4px rgba(0, 0, 0, 0.2) ;
  -moz-box-shadow: 2px px 8px rgba(255, 255, 255, 0.1) inset,1px 1px 4px rgba(0, 0, 0, 0.2) ;
  box-shadow: 2px 2px 8px rgba(255, 255, 255, 0.1) inset,1px 1px 4px rgba(0, 0, 0, 0.2) ;
  padding: 20px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.sample:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 0;
  width: 0;
  border: 10px solid transparent;
  border-top: 10px solid #d4ebff;
}

吹き出し風のデザイン(パターン2)

吹き出し風のデザイン(パターン2)の表示サンプル

枠線だけの吹き出し風のデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position: relative;
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  border :4px solid #d4ebff;
  padding: 20px 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.sample:after,
.sample:before {
  content: "";
  position: absolute;
  top: 100%;
  height: 0;
  width: 0;
}
.sample:after {
  left: 40px;
  border: 15px solid transparent;
  border-top: 15px solid #fff;
}
.sample:before {
  left: 35px;
  border: 20px solid transparent;
  border-top: 20px solid #d4ebff;
}

マジックで描かれたような下線デザイン

マジックで描かれたような下線デザインの表示サンプル

マジック風の下線を付けたちょっとオシャレなデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position: relative;
  font-weight:bold;
  font-size:24px;
}
.sample:after{
  content:"";
  display:block;
  height:8px;
  width:100%;
  background:rgba(129,194,250,0.5);
  position:absolute;
  bottom:4px;
}

一文字目だけ大きなサイズのデザイン

一文字目だけ大きなサイズのデザイン

一文字目だけが大きなサイズの記事風の見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position: relative;
  font-weight:bold;
  font-size:20px;
}
.sample:first-letter{
  font-size:35px;
}
.sample:after{
  content:"";
  display:block;
  height:8px;
  width:100%;
  background:rgba(129,194,250,0.5);
  position:absolute;
  bottom:4px;
}

グラデーションの仕切り線があるデザイン

グラデーションの仕切り線があるデザインの表示サンプル

グラデーションの仕切り線が上下にあるデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample{
  position:relative;
  text-align:center;
}
.sample:before,
.sample:after{
  content:"";
  display:block;
  position:absolute;
  height:1px;
  width:100%;
  border: 0;
  background: #ccc;
  background: -webkit-gradient(linear, left top, right top, from(#fff), color-stop(0.7,#ccc), color-stop(0.7,#cecece), to(#fff));
  background: -moz-linear-gradient(left,#fff 0%, #ccc 30%, #cecece 70%, #fff 100%);
  background: -o-linear-gradient(left,#fff 0%, #ccc 30%, #cecece 70%, #fff 100%);
  background: -ms-linear-gradient(left,#fff 0%, #ccc 30%, #cecece 70%, #fff 100%);
  background: linear-gradient(left,#fff 0%, #ccc 30%, #cecece 70%, #fff 100%);
}
.sample:before{
  top:-10px;
}
.sample:after{
  bottom:-10px;
}

ボックスにサブタイトルを付けたデザイン

ボックスにサブタイトルを付けたデザインの表示サンプル

疑似要素でボックスにサブタイトルを付けた、シンプルでオシャレなデザインの見出し。

<h3 class="sample">見出しデザイン</h3>
.sample {
  position:relative;
  padding:20px 10px;
  border:5px solid #81c2fa;
}
.sample:after {
  content:"check";
  position:absolute;
  top: -18px;
  left: 10px;
  background:#fff;
  font-size:20px;
  font-weight:bold;
  color:#81c2fa;
  padding:0 5px;
}

シンプルだけどオシャレなデザイン

シンプルだけどオシャレなデザインの表示サンプル

タイトルの前にひし形のマークを配置したデザインの見出し

<h3 class="sample">見出しデザイン</h3>
.sample {
  position:relative;
  padding:5px 25px;
  border-bottom:3px solid #81c2fa;
}
.sample:before{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border:2px solid #81c2fa;
  position:absolute;
  top:11px;
  left:3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

シンプルだけどオシャレなデザイン(パターン2)

title32

ひし形の後ろにもう一つひし形を加えたオシャレ風なデザイン

<h3 class="sample">見出しデザイン</h3>
.sample {
  position:relative;
  padding:5px 25px;
  border-bottom:3px solid #81c2fa;
}
.sample:before,
.sample:after{
  content:"";
  display:block;
  width:10px;
  height:10px;
  border:2px solid #81c2fa;
  position:absolute;
  top:11px;
  left:3px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.sample:after{
  top:12px;
  left:10px;
  height:12px;
  width:12px;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
  border:none;
  background:rgba(129,194,250,0.3);
}

まとめ

以上、画像を使わずCSSだけで作れるオシャレな見出し31選でした。 ホントはもうちょっと紹介したかったのですが、力尽きて止めちゃいましたw

でも、これだけあれば気に入って頂けるのもあるんじゃないかなって勝手に思ってます。

あと基本的にすべてコピペで使えますが、用途に合わせて微調整をお願いします。 中にはネガティブマージンが必要になるのもあると思います。

それとベンダープレフィックスは必要に応じて削除・追加して下さい。