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

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

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

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

関連記事

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

目次

基本[カラーA:文字]

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

見出し「基本」

 

下線

基本[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 デフォルトカラー #adc2c3
見出し3 #a7baca
見出し4 #e08eb9
見出し5 #88b6ab

 

2本[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 デフォルトカラー #ed7476
見出し3 #f08972
見出し4 #8bc0b8
見出し5 #cedac6

 

1本点線[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #7a87b0
見出し3 #da8596
見出し4 #f08972
見出し5 #455d49

 

1本2色[カラーA:文字 B下線左 C:下線右]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #8682a5 #997bad #e5e6f4 
見出し3 #8682a5 #d6d3ea 
見出し4 #ecb69f  #f9eada 
見出し5 #f2cfd7  #e3ddd8 

 

マーカー[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #6d6d6d #89c56d
見出し3 #6195cc
見出し4 #f3d083
見出し5 #f4cfc8

 

1本矢印[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #0e467d #3caab1
見出し3 #cde7ee
見出し4 #cdbb9d
見出し5 #eeb1c0

 

ストライプ[カラーA:文字 B:下線 C:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #0e467d #d7316c  #eaddc7 
見出し3 #e8ba73  #f6e355 
見出し4 #ffefb4  #6195cc 
見出し5 #82c5ca  #0e467d 

 

グラデ[カラーA:文字 B:下線左 C:下線右]

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

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

 

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

 

センター[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #4f4f4f #194a9e
見出し3 #f5e928
見出し4 #2db497
見出し5 #b2bee1

 

センター矢印[カラーA:文字 B:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #4f4f4f #194a9e
見出し3 #f5e928
見出し4 #2db497
見出し5 #b2bee1

 

左線

基本[カラーA:文字 B:左線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #414d57 #de6042
見出し3 #2283b6
見出し4 #a5cc80
見出し5 #ecbb7c

 

左下線

基本[カラーA:文字 B:左線 C:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #193944 #397057  #9cc9c4 
見出し3 #e24b63  #f0b5bb
見出し4 #27539b  #aad7dd 
見出し5 #ece93b  #e6e9b1 

 

下点線[カラーA:文字 B:左線 C:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #193944 #397057  #9cc9c4 
見出し3 #e24b63  #27539b 
見出し4 #27539b  #aad7dd 
見出し5 #ece93b  #e6e9b1 

 

左2色[カラーA:文字 B:左線上 C:左線下&下線]

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

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

 

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

 

背景

基本[カラーA:文字 B:背景]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #f9ddba #0c2b60
見出し3 #c9de7e #393332
見出し4 #393332 #e0a50d
見出し5 #b6dfec #efa0a4

 

下線[カラーA:文字 B:背景 C:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #ede0df #2c3139 #b9bec2
見出し3 #eaeff4 #be877b #ede0df
見出し4 #665543 #eaeff4 #b3a49d
見出し5 #b3a49d #665543 #ebc0b9

 

左線[カラーA:文字 B:背景 C:左線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #7f6f67 #e7e743  #92a4b0 
見出し3 #b0d0dc  #e7e743 
見出し4 #c5df9c  #b0d0dc 
見出し5 #e0b6a9  #d3e9d0 

 

左下線[カラーA:文字 B:背景 C:左線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #fffeea #ef8244  #e0d5db 
見出し3 #ef8244 #fffeea  #b5b5b6 
見出し4 #ffe73b #647095  #d9d6dc 
見出し5 #81787c #bcdbec  #ffe73b 

 

吹き出し[カラーA:文字 B:背景]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #e584b3 #fcebf3
見出し3 #736b6e #b5b6b6
見出し4 #e7c2a4 #736b6e
見出し5 #e584b3 #d6e8e9

 

吹き出し線付[カラーA:文字 B:背景 C:線]

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

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

 

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

 

リボン[カラーA:文字 B:背景 C:影]

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

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

 

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

 

ボックス[カラーA:文字 B:背景 C:影]

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

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

 

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

 

ステッチ[カラーA:文字 B:背景 C:線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #ffffff #153c42  #8cc1b5 
見出し3 #88634c  #b99277 
見出し4 #115c79  #8cc1b5 
見出し5 #cc9c5f  #88634c 

 

ストライプ[カラーA:文字 B:背景 C:背景]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #0d0404 #a3edce  #d9ede5 
見出し3 #88634c  #b99277 
見出し4 #009966  #67988b 
見出し5 #ce9aa1  #f3e7ea 

 

線[カラーA:文字 B:背景 C:線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #e5d98e #003778  #e5d98e 
見出し3 #5867af #cfe1d7  #5867af 
見出し4 #acc9a5 #4a3b6d  #acc9a5
見出し5 #cf1727 #f3e7ea  #cf1727 

 

点線角丸[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーB カラーA・C
見出し2 #ffffff #254c75
見出し3 #36604d
見出し4 #a0435e
見出し5 #d4b360

 

括弧[カラーA:文字 B:線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #7076a2
見出し3 #394b56
見出し4 #4c6684
見出し5 #d0a4b0

 

はみ出す線[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB
見出し2 #ab4079 #4fbbc4
見出し3 #7aa458 #ebca48
見出し4 #4fbbc4 #f3a172
見出し5 #211d3b #4fbbc4

 

グラデーション

基本[カラーA:文字 B:背景 C:背景&線]

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

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

 

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

 

角丸[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #ffffff #a66da7  #c09eb9 
見出し3 #335ebf  #4c66b4 
見出し4 #f7cb3f  #fcecaf 
見出し5 #cf1727  #ce6f65 

 

ラウンド[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #211d3b #4fbbc4  #a1d3c9
見出し3 #7aa458 #b9d875 
見出し4 #f3a172
見出し5 #a86888

 

シンプル[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2  #211d3b #e1b819  #b19b4e 
見出し3 #3192b0  #a5a79a 
見出し4 #e37560 #f8e7dc 
見出し5 #a1c9a2  #d3cbd3 

 

シンプル角丸[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #ac7971 #fef4f4  #d3afba 
見出し3 #c9d8cc  #d3c495 
見出し4 #f8cdce #ee8a97 
見出し5 #bddfd8  #77a9aa 

 

シンプルラウンド[カラーA:文字 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #425b96 #fbe6d4  #d0715f 
見出し3 #f4e9b5  #aec48d 
見出し4 #f7f8f8 #737d97 
見出し5 #ddced8  #ddb1d6 

 

上線(文字黒)[カラーA:上線 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #16395e #a4c4e8 #78a8e8
見出し3 #8dccac #fff6b2  #ffec00 
見出し4 #6b6a70 #b6d6cc  #8dccac
見出し5 #ed6a1a #efba33  #eda578 

 

上線角丸(文字黒)[カラーA:上線 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #d75b7c #f6b9a5 #d75b7c
見出し3 #72c4b3 #cde5c3  #72c4b3
見出し4 #8fc9f3 #cce3f6  #8fc9f3
見出し5 #f6e43b #fff577 #f6e43b

 

上線(文字白)[カラーA:上線 B:背景 C:背景&線]

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

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

 

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

 

上線角丸(文字白)[カラーA:上線 B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #69821b #aacf53 #69821b
見出し3 #583822 #c39143  #583822
見出し4 #a22041 #ce5242  #a22041
見出し5 #e95295 #e597b2  #e95295

 

ラインマーク

基本[カラーA:文字 B:マーク]

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

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

 

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

 

背景角丸[カラーA:文字&マーク B:背景]

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

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

 

カラーサンプル
  カラーA カラーB
見出し2 #6195cc #ffefb4
見出し3 #f0b2c5
見出し4 #9bc3b0
見出し5 #d3d6db

 

背景線角丸[カラーA:文字&マーク B:背景 C:線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #eaddc7 #d7316c #ed747b
見出し3 #eb8a73 #f6e355  #a9d8cf
見出し4 #abbaba #407774  #a9bfa4
見出し5 #faf6b0 #194a9e  #9dd1a4

 

グラデ上線(文字黒)[カラーA:上線&マーク B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #e24863 #f0b5bb #f5b48b
見出し3 #397057 #edf7f5  #f6e355
見出し4 #10589c #edf7f5  #b3e0f2
見出し5 #ee794b #fdefd9  #f3a465

 

グラデ上線(文字白)[カラーA:上線&マーク B:背景 C:背景&線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #f0b5bb #e95467 #f0b5bb
見出し3 #9cc9c4 #397057  #9cc9c4
見出し4 #44617b #0c2860  #44617b
見出し5 #949495 #455765  #949495

 

丸マーク

基本[カラーA:文字 B:マーク]

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

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

 

カラーサンプル
  カラーA カラーB
見出し2 #393332 #c9de7e
見出し3 #efa0a4
見出し4 #e0a50d
見出し5 #9e9b95

 

背景角丸[カラーA:文字&マーク B:背景]

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

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

 

カラーサンプル
  カラーA カラーB
見出し2 #393332 #c9de7e
見出し3 #efa0a4
見出し4 #e0a50d
見出し5 #9e9b95

 

背景線角丸[カラーA:文字&マーク B:背景 C:線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #7f6f67 #e7e743 #ef5bb
見出し3 #647095 #92a4b0  #d9d8ce
見出し4 #ef8244 #fffeea  #d9dbd0
見出し5 #ffe73b #647095  #fffeea

 

グラデ上線(文字黒)[カラーA:上線&マーク B:背景 C:背景&線]

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

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

 

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

 

グラデ上線(文字白)[カラーA:上線&マーク B:背景 C:背景&線]

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

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

 

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

 

先頭大

基本[カラーA:文字 B:先頭文字]

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

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

 

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

 

先頭下線[カラーA:文字 B:先頭文字&先頭下線]

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

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

 

カラーサンプル
  カラーA カラーB
見出し2 #474342 #f5c54d
見出し3 #425eb5
見出し4 #eb4587
見出し5 #8fc9f3

 

下線[カラーA:文字 B:先頭文字 C:下線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #18395e #0363a6  #ffec00 
見出し3 #e37560  #f6c4be 
見出し4 #3192b0 #b19b4e 
見出し5 #a84079  #ebca48 

 

線角丸[カラーA:文字 B:先頭文字 C:線]

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

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

 

【カラーサンプル】
  カラーA カラーB カラーC
見出し2 #a84079 #511d6d #a84079
見出し3 #7aa458 #ebca48  #a1d3c9
見出し4 #a66da7 #ad435e #c09eb9
見出し5 #778587 #505b35  #cecd7f