コピペだけ！CSSの見出しデザイン30選【サンプルコード】 │ TechMania

本記事では見出し（h1〜h6タグ）のデザインパターンを30個紹介します。CSSコードをコピペするだけで利用できます。また、組み合わせて自分好みのデザインにすることも可能なのでぜひいろいろ試してみてください。

プログラミングの基礎からサイト制作まで
↓実践力が身につくプログラミングスクール↓

HTMLコード

本記事ではすべて、以下のHTMLコードを使用します。

<h2>見出しデザイン</h2>

CSSコード

文字色の変更

【CSSコード】

h2{
 color:#2F5597;/*文字色*/
}

下線

【CSSコード】

h2{
 border-bottom:solid 3px black; /*線の種類（実線） 太さ 色*/
}

◆線の種類

solid	1本線
double	2本線
dashed	破線
dotted	点線

破線

【CSSコード】

h2{
 border-bottom:dashed 3px #4472C4; /*線の種類（点線） 太さ 色*/
}

二重線

【CSSコード】

h2{
 border-bottom:double 6px #FFBD31; /*線の種類（二重線） 太さ 色*/
}

上下線

【CSSコード】

h2{
 padding:0.5em 0; /*上下の余白 左右の余白*/
 border-top:solid 3px #4472C4; /*線の種類 太さ 色*/
 border-bottom:solid 3px #4472C4; /*線の種類 太さ 色*/
}

◆余白（padding）の指定方法

padding: ○px;	「上下左右」を指定
padding: ○px ○px;	「上下」「左右」を指定
padding: ○px ○px ○px;	「上」「左右」「下」を指定
padding: ○px ○px ○px ○px;	「上」「右」「下」「左」を指定

◆サイズの単位

px	スクリーンの1ピクセルを1とした単位表示サイズは使用するモニタの解像度に依存
em	親要素のフォントサイズに対して何倍かを表現する単位
rem	HTMLのルート要素のフォントサイズに対して何倍か示した単位
%	親要素のフォントサイズに対する倍率で表現する単位

背景色

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 background:#DEEBF7; /*背景色*/
}

下線+背景色

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 background:#DEEBF7; /*背景色*/
 border-bottom:solid 3px #2F5597; /*線の種類 太さ 色*/
}

枠線

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 border:solid 3px #2F5597; /*線の種類 太さ 色*/
}

丸み枠線

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 border:solid 3px #2F5597; /*線の種類 太さ 色*/
 border-radius: 0.5em;/*丸角*/
}

左線

【CSSコード】

h2{
 padding:0.25em 0.5em; /*上下 左右の余白*/
 border-left:solid 6px #4472C4; /*左線*/
 background:transparent; /*背景職を透明に指定*/
}

左線+背景色

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 border-left:solid 6px #4472C4; /*左線*/
 background:#DEEBF7; /*背景色*/
}

背景色（立体感）

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 background:#DEEBF7; /*背景色*/
 box-shadow:0 0 5px rgba(0, 0, 0, 0.5);
}

左線+背景色（立体感）

【CSSコード】

h2{
 padding:0.5em; /*上下左右の余白*/
 background:#F3F3F3; /*背景色*/
 border-left:solid 6px #4472C4;/*左線*/
 border-bottom:solid 4px #D6D6D6;/*下線*/
}

吹き出し

【CSSコード】

h2{
 position:relative; /*相対値で配置*/
 padding:0.5em; /*上下左右の余白*/
 background:#DEEBF7; /*背景色*/
}

/*擬似クラス*/
h2:after{
 position:absolute; /*絶対値で配置*/
 content:''; /*コンテンツの挿入*/

 top:100%;
 left:30px; /*左側からの距離*/
 border:15px solid transparent;
 border-top:20px solid #DEEBF7;
 width:0;
 height:0;
}

ステッチ

【CSSコード】

h2{
 background:#DEEBF7; /*背景色*/
 box-shadow: 0px 0px 0px 5px #DEEBF7;
 border:dashed 3px white;
 padding:0.5em; /*上下左右の余白*/
}

h2{
 position:relative;
 display:inline-block;
 height:40px;
 margin-left:40px;
 padding:1rem 2rem;
 color:white;
 background:#2F5597;
}

h2:before{
 position:absolute;
 top:0;
 left:-40px;
 content:'';
 border-width:36px 40px 36px 0;
 border-style:solid;
 border-color:transparent #2F5597 transparent transparent;
}

h2:after{
 position:absolute;
 top: calc(50% - 7px);
 left:-10px;
 width:15px;
 height:15px;
 content:'';
 border-radius:50%;
 background:white;
}

ペーパー

【CSSコード】

h2{
 position:relative;
 background:#DEEBF7;
 padding:0.5em 0.9em;
 box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}

h2::after{
 position:absolute;
 content:'';
 left:-2px;
 top:-2px;
 border-width:0 0 20px 20px;
 border-style:solid;
 border-color:white white #B5D2ED;
 box-shadow:1px 1px 1px rgba(0,0,0,0.3);
}

マーカー

【CSSコード】

h2{
 background:linear-gradient(transparent 60%,#9DC3E6 60%);
}

下線（2色）

【CSSコード】

h2{
 position:relative;
 border-bottom:solid 5px gray;
}

h2::after{
 position:absolute;
 content:"";
 display:block;
 border-bottom:solid 5px #9DC3E6;
 bottom:-5px;
 width:20%;
}

下線（グラデーション）

【CSSコード】

h2{
 position:relative;
 padding:0.2em 0;
}

h2:after{
 content:"";
 display:block;
 height:5px;

 background:linear-gradient(to right,#6DA6D9,#1F4F7B);
}

両サイド線

【CSSコード】

h2{
 position:relative;
 display:inline-block;
 padding:0 150px;
 text-align:center;
}

h2:before,h2:after{
 position:absolute;
 top:calc(50% - 5px);
 width:100px;
 height:10px;
 content:'';
 border-top:solid 3px #2F5597;
}

h2:before{
 left:0;
}

h2:after{
 right:0;
}

台形

【CSSコード】

h2{
 position:relative;
 padding:5px 40px 5px 40px;
 background:#DEEBF7;
 ine-height:2px;
 border-bottom:solid 3px #9DC3E6;

}

h2::before{
 position:absolute;
 content:'';
 left:-2px;
 top:-2px;
 width:0;
 height:0;
 border:none;
 border-left:solid 40px white;
 border-bottom:solid 80px transparent;

}

h2::after{
 position:absolute;
 content:'';
 right:-2px;
 top:-7px;
 width:0;
 height:0;
 border:none;
 border-left:solid 40px transparent;
 border-bottom:solid 80px white;

}

カギカッコ

【CSSコード】

h2{
 position:relative;
 line-height:2;
 padding:0.2em 1.3em;
 display:inline-block;
}

h2:before,h2:after{
 position:absolute;
 content:'';
 width:20px;
 height:30px;
 display:inline-block;
}

h2:before{
 border-left:solid 3px #9DC3E6;
 border-top:solid 3px #9DC3E6;
 top:0;
 left: 0;
}

h2:after{
 border-right:solid 3px #9DC3E6;
 border-bottom:solid 3px #9DC3E6;
 bottom:0;
 right: 0;
}

カッコ

【CSSコード】

h2{
 position:relative;
 line-height:2;
 padding:0.1em 2em;
 display:inline-block;
 top:0;
}

h2:before,h2:after{ 
 position:absolute;
 content:'';
 top:0;
 width:8px;
 height:100%;
 display:inline-block;
}

h2:before{
 border-left:solid 3px #6DA6D9;
 border-top:solid 3px #6DA6D9;
 border-bottom:solid 3px #6DA6D9;
 left: 0;
}

h2:after{
 border-top:solid 3px #6DA6D9;
 border-right:solid 3px #6DA6D9;
 border-bottom:solid 3px #6DA6D9;
 right:0;
}

一文字目だけ装飾する

【CSSコード】

h2:first-letter{
 font-size:1.2em;
 color:#2F5597;
}

背景色（グラデーション）

【CSSコード】

h2{
 position:relative;
 padding:0.2em 0.5em;

 background:linear-gradient(to right,#9DC3E6,transparent);
}

反射

【CSSコード】

h2{
 position:relative;
 color:#9DC3E6;
 line-height:2; /*行高*/
 -webkit-box-reflect:below -30px -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0) 10%,rgba(0,0,0,0.7));
}

先頭円

【CSSコード】

h2{
 position:relative;
 padding:0px 15px;
}
h2::before{
 content:"";
 position:absolute;
 background:#DEEBF7;
 width:50px;
 height:50px;
 border-radius:50%;
 top:50%;
 left:5px;

 transform:translateY(-50%);
 z-index:-1;
}

背景色（重なり）

【CSSコード】

h2{
 padding:1rem 2rem;
 color:white;
 background:#4472C4;
 box-shadow:5px 5px 0 #2F5597;
}

サブコピー

【CSSコード】

h2{
 margin:30px 20px 10px;
 position:relative;
 padding:1rem;
 text-align:center;
 border:3px solid black;
 border-radius:0 10px 10px 10px;
}

h2::before{
 font-size:20px;
 position:absolute;
 top:-25px;
 left:-3px;
 height:25px;
 padding:0 1em;
 content:'POINT';
 color:white;
 border-radius:10px 10px 0 0;
 background:black;
}

CSSの勉強方法は？

書籍やインターネットで学習する方法があります。昨今では、YouTubeなどの動画サイトやエンジニアのコミュニティサイトなども充実していて多くの情報が手に入ります。
そして、より効率的に知識・スキルを習得するには、知識をつけながら実際に手を動かしてみるなど、インプットとアウトプットを繰り返していくことが重要です。特に独学の場合は、有識者に質問ができたりフィードバックをもらえるような環境があると、理解度が深まるでしょう。

ただ、CSSに限らず、ITスキルを身につける際、どうしても課題にぶつかってしまうことはありますよね。特に独学だと、わからない部分をプロに質問できる機会を確保しにくく、モチベーションが続きにくいという側面があります。独学でモチベーションを維持する自信がない人にはプログラミングスクールという手もあります。費用は掛かりますが、その分スキルを身につけやすいです。しっかりと知識・スキルを習得して実践に活かしたいという人はプログラミングスクールがおすすめです。

プログラミングスクールならテックマニアがおすすめ！

ITスキル需要の高まりとともにプログラミングスクールも増えました。しかし、どのスクールに通うべきか迷ってしまう人もいるでしょう。そんな方にはテックマニアをおすすめします！これまで多くのITエンジニアを育成・輩出してきたテックマニアでもプログラミングスクールを開講しています。

＜テックマニアの特徴＞
・たしかな育成実績と親身な教育　～セカンドキャリアを全力支援～
・講師が現役エンジニア　～“本当”の開発ノウハウを直に学べる～
・専属講師が学習を徹底サポート　～「わからない」を徹底解決～
・実務ベースでスキルを習得　～実践的な凝縮カリキュラム～

このような特徴を持つテックマニアはITエンジニアのスタートラインとして最適です。
話を聞きたい・詳しく知りたいという方はこちらからお気軽にお問い合わせください。