一般的な見出しデザインはちょっと調べれば出てきます。
どこも「シンプル、線を入れる、背景を入れる、タグ風 … etc.. 」といった感じでしょうか。
できれば自分「らしさ」を出したいところです。
この記事は少し個性的な見出しデザインのCSSを紹介いたします。
1.見出しの左上と右下に小さな三角の切れ込み
個性的でオシャレな見出しデザインCSS
見出しの先頭と最後に印象が付くことで、見出し感が出ます。
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 | h2 { position: relative; padding: 1rem; background-image: linear-gradient(135deg, #F4593D 15px, #f4f4f4 15px calc(100% - 15px), #F4593D 15px); color: #386B8C;/*テキストの色*/ font-weight: bold; font-size: 26px; overflow: hidden; } /* #efefefが背景色 #2ce0e0 が三角の色*/ /*背景色をrgba(XX,YY,ZZ,0.5)とかにすると透明度をもたせることができる*/ |
2.見出しの先頭文字に三角の切れ込みを入れてインパクトを出す
先頭の文字にインパクトを与えることで見出しがぐっと引き締まります。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 | h2{ color: #386B8C;/*全体の文字色*/ font-size: 30px; font-weight: bold; text-align: center; } h2::first-letter { background-image: linear-gradient(45deg, #BF1413 50%, #386B8C 50%);/*#BF1413(切れ込みの色), #386B8C(全体の文字色)*/ -webkit-background-clip: text; color: transparent; } |
3.先頭の文字と最後の文字にサイズ違いの四角を表示
先頭の文字と最後の文字の上にサイズが違う四角形を表示することで見出しに注目を集めます。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | h2 { margin: 0; position: relative; font-weight: bold; font-size: 30px; color:#00558F;/*見出し文字の色*/ text-align: center; margin: 20px 0; display: inline-block; } p { margin: 0; line-height: 2; } h2:before { content: ''; height: 40px; /*先頭ボックスの高さ*/ width: 40px; /*先頭ボックスの幅*/ border: solid 1px #F4593D; /*先頭ボックスの色*/ display: block; position: absolute; left: 0; top: 0; margin: auto; z-index: -1; } h2:after { content: ''; height: 30px;/*後方のボックス高さ*/ width: 30px;/*後方のボックスの幅*/ border: solid 1px #BF1413;/*後方ボックスの色*/ display: block; position: absolute; right: 0; bottom: 0; margin: auto; z-index: -1; } h2-wrap { padding-bottom: 20px; text-align: center; } |
4.見出しの先頭文字を流体シェイプにする
見出しの先頭文字を流体シェイプにすることで一文字目にインパクトを与えます。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | h2{ font-size: 30px; font-weight: bold; color:#00558F;/*見出しテキストの文字色*/ } h2::first-letter { padding: 0.3rem; border-radius: 54% 46% 38% 62%/49% 70% 35% 53%;/*パーセンテージを変更することで形が変わります*/ background-color: #2d1b11;/*流体シェイプのベース色*/ background-image: linear-gradient(135deg, #00558F 10%, #00F2D1 100%);/*#00558F, #00F2D12つの色を変更することでグラデーション色が変わります*/ color: white; font-size: 36px; } |
5.先頭の文字に透過度のある丸いシェイプ
見出しの先頭文字の周辺に透過度のある図形を配置することで、一文字目にインパクトを与えるこよができます。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | h2{ position: relative; text-shadow: 0 0 2px white; font-weight: bold; font-size: 30px; color: #00558F;/*テキストの色*/ } h2:before { content: ""; position: absolute; background: #BF141333;/*丸い図形の色*/ width: 36px;/*丸い図形の幅*/ height: 36px;/*丸い図形の高さ*/ border-radius: 50%; top: 30%; /* border: dashed 1px white; */ left: -15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } |
6.上下にラインを入れ半分から斜めにして色分け
上下にラインを入れ、半分かから45度の斜めにして前後のライン色と文字色を変化させることで、インパクトのある見出しにします。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | h2{ position: relative; padding: 1rem 1rem; margin-bottom: 0.2rem; background: -webkit-linear-gradient(120deg, #386B8C 0 50%, #F4593D 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: black; font-weight: bold; font-size: 26px; text-align: center; } h2::before, h2::after { position: absolute; height: 0.4rem; width: 100%; content: ''; } h2::before { top: 0px; left: 0; background: linear-gradient(150deg, #F4593D 0 59%, #386B8C 59%); } h2::after { bottom: 0px; right: 0; background: linear-gradient(150deg, #F4593D 0 42%, #386B8C 42%); } /*このコードで使用している色は2色です。#F4593Dと#386B8C の2色を好みの色に変更できます*/ |
7.ニューモーフィズムのようなデザイン
ニューモーフィズムは背景から要素が浮き上がったり、窪んでいたりするようなスタイルのデザイン手法で、少しオシャレ感がある見出しになります。
ニューモーフィズムとはこちらの記事で紹介していますので、ご参照ください。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 | h2 { margin-bottom: 0.2rem; padding: 1rem; background: #DEE1E9;/*背景色*/ color: #DEE1E9;/*テキスト色*/ text-shadow: -1px -1px white, 1px 1px #333;/*シャドウの色*/ font-weight: bold; font-size: 36px; text-align: center; } |
8.背景にグラデーションをかける
背景にグラデーションをかけるのは他でもたくさん紹介されていますが、2022年はグラデーションが、わりと流行っているようです。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | h2{ position: relative; padding: 1rem; padding: 15px 20px; color: #ffffff;/*テキストの文字色*/ margin: 0 auto; font-weight: bold; font-size: 30px; text-align:center; background-image: -webkit-linear-gradient(linear, left top, right top, from(#05d6d9), to(#f907fc)); background-image: -webkit-linear-gradient(left, #05d6d9 0%, #f907fc 100%); background-image: linear-gradient(to right, #05d6d9 0%, #f907fc 100%); } /* #05d6d9と#f907fcの色を変えて2色のグラデーションを作ります。*/ |
9.背景色と文字色を入れ替える
見出しの前半の色と背景を後半で入れ替えることで、かなりインパクトのある見出しになります。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | h2 { position: relative; padding: 0.8rem; margin-bottom: 0.2rem; background-image: linear-gradient(45deg, #F4593D 0 50%, #386B8C 50%);/*前半部分の文字色と背景色*/ -webkit-background-clip: text; color: transparent; font-weight: bold; font-size: 30px; text-align: center; } h2:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, #386B8C 50%, #F4593D 0 50%);/*後半部分の文字色と背景色は前半部分と反対にします*/ content: ''; z-index: -1; } |
10.先頭と最後に斜線入りのカギカッコ
普通のカギカッコでは面白くないと考えている方は、是非試してみてください。
個性的でオシャレな見出しデザインCSS
CSSコードを表示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | h2{ position: relative; padding: 0.5rem; margin: 1rem; background-color: #ffffff;/*文字の背景色*/ color: #386B8C; font-size: 30px; text-align: center; } h2::before { position: absolute; top: -10px; left: -10px; width: 30px; height: 30px; background: repeating-linear-gradient(-45deg, #F4593D 0px 3px, transparent 4px 8px);/*#F4593Dがカギカッコの斜線部分の色*/ content: ''; z-index: -1; } h2::after { position: absolute; bottom: -10px; right: -10px; width: 30px; height: 30px; background: repeating-linear-gradient(-45deg, #F4593D 0px 3px, transparent 4px 8px);*#F4593Dがカギカッコの斜線部分の色*/ content: ''; z-index: -1; } |
まとめ
見出しデザイン一つでサイト全体のイメージがガラッと変わります。
インパクトが強かったり、シンプルだったり、サイト運営者の個性が引き出されます。
個性と考えると、見出しは重要なファクターだと思われます。
どういった見出しをデザインするかはあなた次第ですが、他の人と同じでも面白くないと思い、わりと大胆なデザインを紹介しました。
お気に入りのものがあればコピペOKなので、使用してみてください。
次の記事と前の記事
次のページ
前へ
2021年4月13日
2021年 YouTubeに適した 目立つ 際立つWordPressテーマ7選
