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

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

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

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

関連記事

見出しデザインの設定方法

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

基本［カラーA:文字］

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

下線

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

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

【カラーサンプル】

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

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

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

【カラーサンプル】

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

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

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

【カラーサンプル】

	カラーA	カラーB
見出し２	#7a87b0
見出し３	#da8596
見出し４	#f08972
見出し５	#455d49

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

カラー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：下線］

カラー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：左線下＆下線］

カラー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