見出しデザイン全５３種類の一覧【カラーサンプル付き】

この記事では、見出しデザイン全54種類を一覧にして紹介しています。

アコーディオンボックス内には、使用したカラーコードを記述していますので、デザインを設定する際の参考にしてみてください。

見出しデザインの設定方法はコチラです。

関連記事
見出しデザインの設定方法

この記事では、見出しデザインの設定方法を紹介しています。 見出しのデザインは、全部で53種類。CSSの知識がなくても、デザインを選択するだけで美しい見出しを表示させることができます。また配色のパターンは、カラーピッカーを使うことで、無制限[…]

目次

基本［カラーA:文字］

初期設定の見出しです。文字色のみ指定ができます。イメージは、デフォルトの文字色です。

見出し「基本」

 

下線

基本［カラーA：文字　B：下線］

見出しデザイン「下線-基本」

カラーAは文字、Bは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ デフォルトカラー #adc2c3
見出し３ #a7baca
見出し４ #e08eb9
見出し５ #88b6ab

 

2本［カラーA：文字　B：下線］

見出しデザイン「下線-2本」

カラーAは文字、Bは下線の色を指定。下線部分が2本になっているデザインです。

 

【カラーサンプル】
  カラーA カラーB
見出し２ デフォルトカラー #ed7476
見出し３ #f08972
見出し４ #8bc0b8
見出し５ #cedac6

 

1本点線［カラーA：文字　B：下線］

見出しデザイン「下線-1本点線」

カラーAは文字、カラーBは下線の色を指定。下線部分が点線になってるデザインです。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #7a87b0
見出し３ #da8596
見出し４ #f08972
見出し５ #455d49

 

1本2色［カラーA：文字　B下線左　C：下線右］

見出しデザイン「下線1本-2色」

カラーAは文字、Bは下線左、Cは下線右の色を指定。文字が乗っている下線の部分だけが「カラーB」になります。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #8682a5 #997bad #e5e6f4 
見出し３ #8682a5 #d6d3ea 
見出し４ #ecb69f  #f9eada 
見出し５ #f2cfd7  #e3ddd8 

 

マーカー［カラーA：文字　B：下線］

見出しデザイン「下線-マーカー」

カラーAは文字、Bは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #6d6d6d #89c56d
見出し３ #6195cc
見出し４ #f3d083
見出し５ #f4cfc8

 

1本矢印［カラーA：文字　B：下線］

見出しデザイン「下線-1本矢印」

カラーAは文字、Bは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #0e467d #3caab1
見出し３ #cde7ee
見出し４ #cdbb9d
見出し５ #eeb1c0

 

ストライプ［カラーA：文字　B：下線　C：下線］

見出しデザイン「下線-ストライプ」

カラーAは文字、BとCは下線の色を指定。下線は2色で構成されているので、BとCが入れ替わっても問題ありません。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #0e467d #d7316c  #eaddc7 
見出し３ #e8ba73  #f6e355 
見出し４ #ffefb4  #6195cc 
見出し５ #82c5ca  #0e467d 

 

グラデ［カラーA：文字　B：下線左　C：下線右］

見出しデザイン「下線-グラデ」

カラーAは文字、Bは下線左、Cは下線右の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #4f4f4f #eb8a73  #e2b7d5 
見出し３ #f6e355  #cee8d7 
見出し４ #6185cc  #ffefb4 
見出し５ #669b76  #fbc8b2 

 

センター［カラーA：文字　B：下線］

見出しデザイン「下線-センター」

カラーAは文字、Bは下線の色を指定。文字、下線ともに中央に配置されます。下線の長さは、どの見出しでも同じ長さですね。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #4f4f4f #194a9e
見出し３ #f5e928
見出し４ #2db497
見出し５ #b2bee1

 

センター矢印［カラーA：文字　B：下線］

見出しデザイン「下線-センター矢印」

カラーAは文字、Bは下線の色を指定。文字と吹き出しのような矢印が中央に配置されます。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #4f4f4f #194a9e
見出し３ #f5e928
見出し４ #2db497
見出し５ #b2bee1

 

左線

基本［カラーA：文字　B：左線］

見出しデザイン「左線-基本」

カラーAは文字、Bは左線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #414d57 #de6042
見出し３ #2283b6
見出し４ #a5cc80
見出し５ #ecbb7c

 

左下線

基本［カラーA：文字　B：左線　C：下線］

見出しデザイン「左下線-基本」

カラーAは文字、Bは左線、Cは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #193944 #397057  #9cc9c4 
見出し３ #e24b63  #f0b5bb
見出し４ #27539b  #aad7dd 
見出し５ #ece93b  #e6e9b1 

 

下点線［カラーA：文字　B：左線　C：下線］

見出しデザイン「左下線-下点線」

カラーAは文字、Bは左線、Cは下線の色を指定。下線が点線になっています。濃いめの色の方が点線だとわかりやすそうですね。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #193944 #397057  #9cc9c4 
見出し３ #e24b63  #27539b 
見出し４ #27539b  #aad7dd 
見出し５ #ece93b  #e6e9b1 

 

左2色［カラーA：文字　B：左線上　C：左線下＆下線］

見出しデザイン「左下線-左2色」

カラーAは文字、Bは左線上、Cは左線下＆下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #3f4d77 #3f4d77  #928bac 
見出し３ #5fbeb3  #f4d637 
見出し４ #de5443  #e78bab 
見出し５ #dd7557  #add5d8 

 

背景

基本［カラーA：文字　B：背景］

見出しデザイン「背景-基本」

カラーAは文字、Bは背景の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #f9ddba #0c2b60
見出し３ #c9de7e #393332
見出し４ #393332 #e0a50d
見出し５ #b6dfec #efa0a4

 

下線［カラーA：文字　B：背景　C：下線］

見出しデザイン「背景-下線」

カラーAは文字、Bは背景、Cは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #ede0df #2c3139 #b9bec2
見出し３ #eaeff4 #be877b #ede0df
見出し４ #665543 #eaeff4 #b3a49d
見出し５ #b3a49d #665543 #ebc0b9

 

左線［カラーA：文字　B：背景　C：左線］

見出しデザイン「背景-左線」

カラーAは文字、Bは背景、Cは左線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #7f6f67 #e7e743  #92a4b0 
見出し３ #b0d0dc  #e7e743 
見出し４ #c5df9c  #b0d0dc 
見出し５ #e0b6a9  #d3e9d0 

 

左下線［カラーA：文字　B：背景　C：左線］

見出しデザイン「背景-左下線」

カラーAは文字、Bは背景、Cは左線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #fffeea #ef8244  #e0d5db 
見出し３ #ef8244 #fffeea  #b5b5b6 
見出し４ #ffe73b #647095  #d9d6dc 
見出し５ #81787c #bcdbec  #ffe73b 

 

吹き出し［カラーA：文字　B：背景］

見出しデザイン「背景-吹き出し」

カラーAは文字、Bは背景の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #e584b3 #fcebf3
見出し３ #736b6e #b5b6b6
見出し４ #e7c2a4 #736b6e
見出し５ #e584b3 #d6e8e9

 

吹き出し線付［カラーA：文字　B：背景　C：線］

見出しデザイン「背景-吹き出し線付」

カラーAは文字、Bは背景、Cは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #ffffff #a5d5b5  #4ea380 
見出し３ #f7c1c1  #dd9d91 
見出し４ #7090ab  #3a79aa 
見出し５ #b9ab9c  #72726e 

 

リボン［カラーA：文字　B：背景　C：影］

見出しデザイン「背景-リボン」

カラーAは文字、Bは背景、Cは影の色を指定。影の色とは、リボンの折り返し部分のことです。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #ddc998 #72796c  #4d3534 
見出し３ #4d3534 #eac1b2  #ce6f65 
見出し４ #1b5b39 #ddc998  #9baf97 
見出し５ #9baf97 #1b5b39  #aca575 

 

ボックス［カラーA：文字　B：背景　C：影］

見出しデザイン「背景-ボックス」

カラーAは文字、Bは背景、Cは影の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #9f938e #493024  #724b3f 
見出し３ #c49366 #64483f  #b46f4c 
見出し４ #7e205d #ce9898  #5e4d51
見出し５ #f4d3be #3b5b84  #1d343c 

 

ステッチ［カラーA：文字　B：背景　C：線］

見出しデザイン「背景-ステッチ」

カラーAは文字、Bは背景、Cは線の色を指定します。線とはステッチのこと。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #ffffff #153c42  #8cc1b5 
見出し３ #88634c  #b99277 
見出し４ #115c79  #8cc1b5 
見出し５ #cc9c5f  #88634c 

 

ストライプ［カラーA：文字　B：背景　C：背景］

見出しデザイン「背景-ストライプ」

カラーAは文字、BとCは背景の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #0d0404 #a3edce  #d9ede5 
見出し３ #88634c  #b99277 
見出し４ #009966  #67988b 
見出し５ #ce9aa1  #f3e7ea 

 

線［カラーA：文字　B：背景　C：線］

見出しデザイン「背景-線」

カラーAは文字、Bは背景、Cは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #e5d98e #003778  #e5d98e 
見出し３ #5867af #cfe1d7  #5867af 
見出し４ #acc9a5 #4a3b6d  #acc9a5
見出し５ #cf1727 #f3e7ea  #cf1727 

 

点線角丸［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「背景-点線角丸」

カラーAは文字、Bは背景、Cは線の色を指定。

 

【カラーサンプル】
  カラーB カラーA・C
見出し２ #ffffff #254c75
見出し３ #36604d
見出し４ #a0435e
見出し５ #d4b360

 

括弧［カラーA：文字　B：線］

見出しデザイン「背景-括弧」

カラーAは文字、Bは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #7076a2
見出し３ #394b56
見出し４ #4c6684
見出し５ #d0a4b0

 

はみ出す線［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「背景-はみ出す線」

カラーAは文字、Bは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #ab4079 #4fbbc4
見出し３ #7aa458 #ebca48
見出し４ #4fbbc4 #f3a172
見出し５ #211d3b #4fbbc4

 

グラデーション

基本［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-基本」

カラーAは文字、Bは背景、Cは背景＆線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #ffffff #3b7294  #7eacc4 
見出し３ #b17a59  #ceb36c 
見出し４ #ed7456  #f3a172 
見出し５ #36604d  #7aa458 

 

角丸［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-角丸」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #ffffff #a66da7  #c09eb9 
見出し３ #335ebf  #4c66b4 
見出し４ #f7cb3f  #fcecaf 
見出し５ #cf1727  #ce6f65 

 

ラウンド［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-ラウンド」

カラーAは文字、Bは背景、Cは背景と線の色を指定。見出し４と５は、カラーB・Cを同色にしてみました。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #211d3b #4fbbc4  #a1d3c9
見出し３ #7aa458 #b9d875 
見出し４ #f3a172
見出し５ #a86888

 

シンプル［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-シンプル」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２  #211d3b #e1b819  #b19b4e 
見出し３ #3192b0  #a5a79a 
見出し４ #e37560 #f8e7dc 
見出し５ #a1c9a2  #d3cbd3 

 

シンプル角丸［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-シンプル角丸」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #ac7971 #fef4f4  #d3afba 
見出し３ #c9d8cc  #d3c495 
見出し４ #f8cdce #ee8a97 
見出し５ #bddfd8  #77a9aa 

 

シンプルラウンド［カラーA：文字　B：背景　C：背景＆線］

見出しデザイン「グラデ-シンプルラウンド」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #425b96 #fbe6d4  #d0715f 
見出し３ #f4e9b5  #aec48d 
見出し４ #f7f8f8 #737d97 
見出し５ #ddced8  #ddb1d6 

 

上線（文字黒）［カラーA：上線　B：背景　C：背景＆線］

見出しデザイン「グラデ-上線（文字黒）」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #16395e #a4c4e8 #78a8e8
見出し３ #8dccac #fff6b2  #ffec00 
見出し４ #6b6a70 #b6d6cc  #8dccac
見出し５ #ed6a1a #efba33  #eda578 

 

上線角丸（文字黒）［カラーA：上線　B：背景　C：背景＆線］

見出しデザイン「グラデ-上線角丸(文字黒）

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #d75b7c #f6b9a5 #d75b7c
見出し３ #72c4b3 #cde5c3  #72c4b3
見出し４ #8fc9f3 #cce3f6  #8fc9f3
見出し５ #f6e43b #fff577 #f6e43b

 

上線（文字白）［カラーA：上線　B：背景　C：背景＆線］

見出しデザイン「グラデ-上線（文字白）」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #8a8ca2 #5f616b #8a8ca2
見出し３ #f6ad49 #ed6a1a  #f6ad49
見出し４ #9079ad #493759  #9079ad
見出し５ #3e62ad #192f60  #3e62ad

 

上線角丸（文字白）［カラーA：上線　B：背景　C：背景＆線］

見出しデザイン「グラデ-上線角丸（文字白）」

カラーAは文字、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #69821b #aacf53 #69821b
見出し３ #583822 #c39143  #583822
見出し４ #a22041 #ce5242  #a22041
見出し５ #e95295 #e597b2  #e95295

 

ラインマーク

基本［カラーA：文字　B：マーク］

見出しデザイン「ラインマーク-基本」

カラーAは文字、Bはマークの色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #e9507c #ed7476
見出し３ #455d49 #669b76
見出し４ #997bad #c6b3d6
見出し５ #3caab1 #82c5ca

 

背景角丸［カラーA：文字＆マーク　B：背景］

見出しデザイン「ラインマーク-背景角丸」

カラーAは文字とマーク、Bは背景の色を指定。

 

カラーサンプル
  カラーA カラーB
見出し２ #6195cc #ffefb4
見出し３ #f0b2c5
見出し４ #9bc3b0
見出し５ #d3d6db

 

背景線角丸［カラーA：文字＆マーク　B：背景　C：線］

見出しデザイン「ラインマーク-背景線角丸」

カラーAは文字とマーク、Bは背景、Cは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #eaddc7 #d7316c #ed747b
見出し３ #eb8a73 #f6e355  #a9d8cf
見出し４ #abbaba #407774  #a9bfa4
見出し５ #faf6b0 #194a9e  #9dd1a4

 

グラデ上線（文字黒）［カラーA：上線＆マーク　B：背景　C：背景＆線］

見出しデザイン「ラインマーク-グラデ上線（文字黒）」

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #e24863 #f0b5bb #f5b48b
見出し３ #397057 #edf7f5  #f6e355
見出し４ #10589c #edf7f5  #b3e0f2
見出し５ #ee794b #fdefd9  #f3a465

 

グラデ上線（文字白）［カラーA：上線＆マーク　B：背景　C：背景＆線］

見出しデザイン「ラインマーク-グラデ上線（文字白）」

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #f0b5bb #e95467 #f0b5bb
見出し３ #9cc9c4 #397057  #9cc9c4
見出し４ #44617b #0c2860  #44617b
見出し５ #949495 #455765  #949495

 

丸マーク

基本［カラーA：文字　B：マーク］

見出しデザイン「丸マーク-基本」

カラーAは文字、Bはマークの色を指定。

 

カラーサンプル
  カラーA カラーB
見出し２ #393332 #c9de7e
見出し３ #efa0a4
見出し４ #e0a50d
見出し５ #9e9b95

 

背景角丸［カラーA：文字＆マーク　B：背景］

見出しデザイン「丸マーク-背景角丸」

カラーAは文字とマーク、Bは背景の色を指定。

 

カラーサンプル
  カラーA カラーB
見出し２ #393332 #c9de7e
見出し３ #efa0a4
見出し４ #e0a50d
見出し５ #9e9b95

 

背景線角丸［カラーA：文字＆マーク　B：背景　C：線］

見出しデザイン「丸マーク-背景線角丸」

カラーAは文字とマーク、Bは背景、Cは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #7f6f67 #e7e743 #ef5bb
見出し３ #647095 #92a4b0  #d9d8ce
見出し４ #ef8244 #fffeea  #d9dbd0
見出し５ #ffe73b #647095  #fffeea

 

グラデ上線（文字黒）［カラーA：上線＆マーク　B：背景　C：背景＆線］

見出しデザイン「丸マーク-グラデ上線（文字黒）」

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #674196 #dbd0e6 #a59aca
見出し３ #316745 #a6c8b2  #3eb370
見出し４ #f08300 #f8e58c  #fbca4d
見出し５ #c9171e #e198b4  #c97586

 

グラデ上線（文字白）［カラーA：上線＆マーク　B：背景　C：背景＆線］

見出しデザイン「丸マーク-グラデ上線（文字白）」

カラーAは上線とマーク、Bは背景、Cは背景と線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #89c3eb #2ca9e1 #89c3eb
見出し３ #5383c3 #1e50a2  #5383c3
見出し４ #aacf53 #69821b  #aacf53
見出し５ #69b076 #47885e  #69b076

 

先頭大

基本［カラーA：文字　B：先頭文字］

見出しデザイン「先頭大-基本」

カラーAは文字、Bは先頭文字の色を指定。

 

【カラーサンプル】
  カラーA カラーB
見出し２ #3d4059 #46a2a0
見出し３ #67988b #0d0404
見出し４ #8a9a97 #cf1727
見出し５ #5b67af #003778

 

先頭下線［カラーA：文字　B：先頭文字＆先頭下線］

見出しデザイン「先頭大-先頭下線」

カラーAは文字、Bは先頭文字と先頭下線の色を指定。

 

カラーサンプル
  カラーA カラーB
見出し２ #474342 #f5c54d
見出し３ #425eb5
見出し４ #eb4587
見出し５ #8fc9f3

 

下線［カラーA：文字　B：先頭文字　C：下線］

見出しデザイン「先頭大-下線」

カラーAは文字、Bは先頭文字、Cは下線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #18395e #0363a6  #ffec00 
見出し３ #e37560  #f6c4be 
見出し４ #3192b0 #b19b4e 
見出し５ #a84079  #ebca48 

 

線角丸［カラーA：文字　B：先頭文字　C：線］

見出しデザイン「先頭大-線角丸」

カラーAは文字、Bは先頭文字、Cは線の色を指定。

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し２ #a84079 #511d6d #a84079
見出し３ #7aa458 #ebca48  #a1d3c9
見出し４ #a66da7 #ad435e #c09eb9
見出し５ #778587 #505b35  #cecd7f
スポンサーリンク