背景を工夫する
まずは、背景色や背景画像を利用した見出しサンプルをご紹介していきます。
１グラデーション背景
まずは定番中の定番。グラデーション背景を利用した見出しサンプルです。
見出しサンプル
背景色が単色だとのっぺりとした感じになりがちで、素人感が出てしまうことが多いです。（単色背景がダメというわけではありません）
一方、背景をグラデーションにするとスタイリッシュさや洗練された雰囲気を出すことができます。
グラデーションで重要なのはなんといっても、配色（グラデーションの色の移り変わり）です。
微妙な色のグラデーションにしてしまうぐらいなら、何もしない方がマシ…ということも多々あるので、単にグラデーションにすれば良いというものではありません。
配色に自信がないという方は【 グラデーション サンプル 】で検索すると美しいグラデーションのサンプルがたくさん出てくるので、そういった配色を参考にすると良いでしょう。
見本のCSSコードは以下のようになっています。
※見出しなので本来はh1やh2タグでマークアップすべきですが、サンプルなのでpタグでマークアップしています。
<p>見出しサンプル</p>
p {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
background-image: linear-gradient(to right, #24c6dc, #514a9d);
color: white;
}
※線形グラデーション（CSS）についての詳しい記事はこちら
２２色背景
linear-gradient()で色が移り変わるポイントを同じにして、グラデーションではなくツートーンにするのもけっこうオシャレです。
見出しサンプル
▲このように左右で色を分けると付箋のようなデザインにすることができます。
背景色をツートーンにしている分、paddingでテキストの位置を微調整するのがポイントです。
こちらのCSSコードは以下のようになっています。
<p>見出しサンプル</p>
p {
width: 250px;
text-align: center;
padding: 10px 20px 10px 30px;
font-size: 2rem;
font-weight: bold;
background-image: linear-gradient(to right, #de7a05 10%, #3f4761 10%);
color: #de7a05;
}
また、上下にツートーンにしても見やすくスッキリまとめられます。（▼参考）
見出しサンプル
<p>見出しサンプル</p>
p {
width: 250px;
text-align: center;
padding: 10px 20px 15px 20px;
font-size: 2rem;
font-weight: bold;
background-image: linear-gradient(to top, #99A799 20%, #D3E4CD 20%);
color: #697d6d;
}
３ストライプ背景
repeating-linear-gradient()を使って、背景をストライプ柄にするのもアクセントになります。
ただし、ストライプ柄の色が強すぎるとテキストが見づらくなるので注意が必要です。
見出しサンプル
<p>見出しサンプル</p>
p {
width: 250px;
text-align: center;
padding: 10px 20px 15px 20px;
font-size: 2rem;
font-weight: bold;
background-image:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
repeating-linear-gradient(90deg, lightblue, lightblue 7px, white 7px, white 14px);
color: #4c778c;
}
※ストライプの作り方（CSS）の詳しい記事はこちら
４背景画像
背景に空や海、紙や木目、パターン背景といった背景画像を敷くのもおすすめです。
見出しサンプル
<p>見出しサンプル</p>
p {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
background-image: url('画像のファイルURL');
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
color: #fff;
}
背景に画像を指定する場合は、テキストが読みづらくならないような画像を選ぶことがポイントです。
特に画像の中にキャラクターや人物が含まれていると、それだけで無加工・無調整では背景画像としては使いづらいので注意が必要です。
※背景画像指定（CSS）についての詳しい記事はこちら
POINT!
- ・見出しの背景を変えることで、目を引く見出しデザインにできる！
- ・背景色が単色だと物足りないことも多いが、グラデーションなどにするとスタイリッシュな印象に！
- ・ただし、テキストが見づらくならないように色や背景画像に気をつける必要がある！
ラインを入れる
見出しにラインを引いてアクセントをつけるというデザインも定番で、様々なデザインに取り入れることができるためおすすめです。
１見出しに下線
ただ普通に見出しの下に下線を引くだけでは味気ないのですが、ラインの長さを見出しよりもちょっと短くするとヌケ感が出てオシャレな雰囲気になります。
<p class="sample_header01">見出しサンプル</p>
.sample_header01 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
}
.sample_header01::before {
content: '';
position: absolute;
width: 100px;
height: 1px;
background-color: black;
left: 0;
right: 0;
bottom: -5px;
margin: auto;
}
コードを見たらわかるように、擬似要素を使うと簡単にできます。
※擬似要素についての記事はこちら
デザイン的には、ラインがアクセントとセパレート（区切り）の役目を果たしているため、見出しの下にコンテンツを配置しやすいデザインです。
また、サンプルのように細いラインの場合はスッキリとしていて大人な雰囲気を感じさせるデザインとなるため、明朝体の見出しとも合いますね。
このようなデザインはメインターゲットが大人である場合や、高級感を出したい場合に良いかと思います。
反対に、子ども向けサイトや多種多様な商品で賑やかさを出したいECサイトなどでは不向きです。
２横に縦のライン
見出しの横にラインを入れると中〜小見出しのような印象になります。
<p class="sample_header02">見出しサンプル</p>
.sample_header02 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
}
.sample_header02::before {
content: '';
position: absolute;
width: 10px;
height: 50%;
background-color: black;
left: -10px;
top: 0;
bottom: 0;
margin: auto;
}
.sample_header02::after {
content: '';
position: absolute;
width: 3px;
height: 50%;
background-color: black;
left: 5px;
top: 0;
bottom: 0;
margin: auto;
}
▲擬似要素を２つとも使い、それぞれ太さの違う縦のラインを見出しの横に置いたサンプルです。
border-leftを使うとpaddingを含めた長さになってしまうため、ラインの長さを調整したい時は擬似要素を使った方が楽です。
３セリフっぽく
左右に斜めのラインを入れると、誰かが喋っているようなデザインになります。
<p class="sample_header03">見出しサンプル</p>
.sample_header03 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
}
.sample_header03::before {
content: '';
position: absolute;
width: 2px;
height: 50%;
background-color: black;
left: 10px;
top: 0;
bottom: -5px;
margin: auto;
transform: rotate(-25deg);
}
.sample_header03::after {
content: '';
position: absolute;
width: 2px;
height: 50%;
background-color: black;
right: 10px;
top: 0;
bottom: -5px;
margin: auto;
transform: rotate(25deg);
}
かなりカジュアルな雰囲気になるため、ユーザーに親近感を持たせたい場合に使うとグッドです。
反面、高級料理店のページなどある程度敷居の高い雰囲気が求められる場面では避けた方が無難かもしれません。
POINT!
- ・見出しにラインを入れるだけでも見出しの印象を変えることができる！
- ・シンプルな下線は落ち着いた雰囲気や高級感を出したい場合に！
- ・左右に斜めのラインを入れるとセリフっぽくなり、カジュアルな印象に！
枠を工夫する
３つ目に紹介する見出しデザインは、枠に変化をつけたサンプルです。
ラインを入れる場合と比べて、他の要素との区別が強調されるのでコンテンツを分離しやすいのが特徴です。
１カギカッコ型の枠
見出しをカギカッコのような枠で囲んだサンプルです。
<p class="sample_header04"><span>見出しサンプル</span></p>
.sample_header04 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
}
.sample_header04::before {
content: '';
position: absolute;
width: 30%;
height: 1px;
background-color: black;
left: -5px;
top: -5px;
}
.sample_header04::after {
content: '';
position: absolute;
width: 1px;
height: 45%;
background-color: black;
left: 5px;
top: -15px;
}
.sample_header04 span::before {
content: '';
position: absolute;
width: 30%;
height: 1px;
background-color: black;
right: -5px;
bottom: -5px;
}
.sample_header04 span::after {
content: '';
position: absolute;
width: 1px;
height: 45%;
background-color: black;
right: 5px;
bottom: -15px;
}
左上のカギカッコでpタグの::beforeと::afterの両方を使ってしまうので、pタグのテキストをspanタグで挟み、spanタグの擬似要素（::beforeと::after）で右下のカギカッコを作っています。
ラインを少し重ねてクロスさせることで、スタイリッシュな印象になります。
２枠をずらす
ただ枠をつけるだけでは素人感が出てしまいがちですが、枠を重ねて少しずらすとヌケ感が出てアクセントになります。
<p class="sample_header05">見出しサンプル</p>
.sample_header05 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
border: solid 1px;
}
.sample_header05::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
border: solid 1px;
left: 10px;
top: 7px;
}
.sample_header05::after {
content: '';
position: absolute;
background-color: black;
width: 50px;
height: 1px;
right: -25px;
top: 17px;
transform: rotate(40deg);
}
枠の右上にラインも入れてみました。
枠の位置をずらし過ぎるとヌケ感よりも違和感の方が強くなるため、あまりずらし過ぎないのがポイントです。
３フキダシ風の枠
雲のような形や手描き風のフキダシはさすがにCSSでは難しいですが、直線的なフキダシであればCSSで描画可能です。
<p class="sample_header06">見出しサンプル</p>
.sample_header06 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
}
.sample_header06::before {
content: '';
position: absolute;
width: 20px;
height: 30px;
left: 0;
right: 0;
bottom: -10px;
margin: auto;
transform: rotate(45deg);
box-shadow: 4px 1px 0px darkgrey;
}
.sample_header06::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: -1px -1px 0 2px darkgrey inset;
left: 0;
top: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 40%, 40% 40%, 40% 100%, 0 100%);
}
枠線というとborderプロパティを思い浮かべると思いますが、サンプルのように枠線はbox-shadowプロパティでも表現することが可能です。
オフセットが指定できるので、太さが不揃いで影に見える枠線をつけたい場合には便利です。
POINT!
- ・枠線をつけた見出しは他との区別がつきやすく、見出しの近くにコンテンツを並べやすい！
- ・普通に枠線をつけるだけでは素人っぽさが出てしまうので注意！
- ・枠線を重ねたりずらしたりすると、スタイリッシュな印象になる！
テキストを工夫する
最後にご紹介する見出しデザインは、テキストそのものに変化やアクセントをつける…といったデザインのサンプルです。
見出しのテキストそのものに手を加えるので、やり過ぎると読みづらくなりがちになる点には注意が必要です。
１二重の袋文字
ただ単にテキストを縁取るだけでは見出しのインパクトとしては少し弱いですが、縁取りを２重にすることでアクセントが強くなります。
<p class="sample_header07">見出しサンプル</p>
.sample_header07 {
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
position: relative;
text-stroke: white 1px;
-webkit-text-stroke: white 1px;
z-index: 1;
}
.sample_header07::before {
content: '見出しサンプル';
position: absolute;
top: 0;
left: 0;
width: 250px;
text-align: center;
padding: 10px 20px;
font-size: 2rem;
font-weight: bold;
text-stroke: black 5px;
-webkit-text-stroke: black 5px;
z-index: -1;
}
ただ、サンプルの『プ』の字がちょっと読みづらいようにテキストやフォントによっては潰れて可読性が下がってしまいます。
使用シーンとしては、テキストをよく見なくてもぱっと見で何が書いてあるのか分かるような見出しが良いでしょう。
ちなみにですが、text-strokeプロパティは2021年12月現在、ブラウザに関わらずベンダープレフィックスが必要です。
２縁取りと塗りをずらす
テキストの縁取りとテキストの塗りをずらすことで、ヌケ感を出すことができます。
<p class="sample_header08">見出しサンプル</p>
.sample_header08 {
width: 300px;
text-align: center;
padding: 10px 20px;
font-size: 2.1rem;
font-weight: bold;
position: relative;
text-stroke: black 1px;
-webkit-text-stroke: black 1px;
z-index: 1;
color: transparent;
}
.sample_header08::before {
content: '見出しサンプル';
position: absolute;
top: 2px;
left: 3px;
width: 300px;
text-align: center;
font-size: 2.1rem;
font-weight: bold;
color: #ffbb66;
z-index: -1;
text-stroke: #ffbb66 2px;
-webkit-text-stroke: #ffbb66 2px;
}
ポップで柔らかな印象になりますね。
ただこちらのデザインも読みやすさ重視というわけではないので、ぱっと見で読める短い見出しで使った方が良いでしょう。
２テキストを切断
思いきって見出しをスパッと切るとカッコイイ感じになります。デザイン性・個性を重視したい場合などに良いですね。
<p class="sample_header09">見出しサンプル</p>
.sample_header09 {
width: 300px;
text-align: center;
font-size: 2.1rem;
font-weight: bold;
position: relative;
z-index: 1;
color: transparent;
}
.sample_header09::before {
content: '見出しサンプル';
position: absolute;
top: 0;
left: 0;
width: 250px;
text-align: center;
font-size: 2.1rem;
font-weight: bold;
z-index: -1;
color: black;
clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);
}
.sample_header09::after{
content: '見出しサンプル';
position: absolute;
top: 5px;
left: 5px;
width: 250px;
text-align: center;
font-size: 2.1rem;
font-weight: bold;
z-index: -1;
color: black;
clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
}
見出しは基本的に何が書いてあるのか認識できれば問題ありません。
読みやすさを意識するのは大事ですが、読みやすさにこだわりすぎると機械的で退屈なデザインになってしまいがちです。
筆者もどちらかというといつも無難なデザインに走りがちなので、たまにはデザインや雰囲気を重視したものを検討してみるように心がけています。
POINT!
- ・テキストそのものに変化を加えることでも、見出しを際立たせられる！
- ・やり過ぎは読みづらくなるため注意が必要！
- ・とは言え何が書いてあるのか認識できる程度であればOKなので、たまには冒険してみよう！
