ビジネスライクな見出しデザインのご紹介
今回はオウンドメディアサイトなどでビジネスブログ向けで活用できる、ビジネスライクな見出しデザインをご紹介したいと思います。
HTML+CSSだけで構成していますので、コピペですぐに使えます！
※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。
CSSの知識が少しある方であれば、サンプルを組み合わせて、自分好みの見出しを作ることも可能かと思いますので、ご自由にカスタマイズしてください。
それでは早速にご紹介させて頂きます！！
[nop]
ラインだけのシンプルな見出し
下線のみ引いた定番スタイル。使い勝手がよく多用されています。
シンプルな下線付き見出し
CSS
h2 {
border-bottom: solid 3px #27acd9;
padding: 10px 0;
}
二重線バージョン。線幅を太くすればカジュアルな印象に。
二重の下線付き見出し
CSS
h2 {
border-bottom: double 4px #27acd9;
padding: 10px 0;
}
点線バージョン。線幅を太くすればよりカジュアルな印象に。
点線付き見出し
CSS
h2 {
border-bottom: dashed 2px #27acd9;
padding: 10px 0;
}
ツートンカラーにするだけでグッとおしゃれに。切り替え位置（width）の調整も可能です。
2色の下線付き見出し
CSS
h2 {
position: relative;
border-bottom: 5px solid #ddd;
padding: 10px 0;
}
h2:before {
position: absolute;
left: 0;
bottom: -5px;
width: 20%;
height: 5px;
content: '';
background: #27acd9;
}
左側にラインをプラスするだけで引き締まった印象に。
下線+左側にラインでアクセント
CSS
h2 {
border-bottom: 1px solid #A3A3A3;
padding: 0.2em 0.5em;
border-left: solid 5px #27acd9;
}
二重線（double）をただのライン（solid）や点線（dotted）に変えて使っても良し！
上下に二重線の付いた見出し
CSS
h2 {
border-top: double 4px #27acd9;
border-bottom: double 4px #27acd9;
padding: 0.5rem 0;
}
文字に薄いラインを重ねて蛍光マーカー風に。タイトル以外でも重宝されています。
蛍光マーカー風の見出し
CSS
h2 {
background: linear-gradient(transparent 60%, #c8f1ff 60%)
}
囲み線の付いた見出し
ラインで囲んだシンプルなスタイル。文字色も枠に合わせて統一感を出しています。
シンプルな囲み見出し
CSS
h2 {
border: solid 2px #27acd9;
padding: 1rem 1.5rem;
color: #27acd9;
}
実線の内側に点線を入れた二重の囲みスタイルです。
二重の囲み見出し
CSS
h2 {
position: relative;
padding: 1rem 1.5rem;
border: 3px solid #27acd9;
}
h2:before {
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 10px);
height: calc(100% - 10px);
content: '';
border: 1px dotted #27acd9;
}
背景付きの見出し
大見出し等におすすめの目立つパターン。黒文字+背景を薄い色にすれば落ち着いた印象に。
背景に色を入れた見出し
CSS
h2 {
background: #27acd9;
color: #fff;
padding: 0.75rem 2rem;
}
4つ角を丸くすれば柔らかな印象に。
背景+左線の見出し
CSS
h2 {
color: ##27acd9;
background: #eaf5f9;
border-radius: 10px;
padding: 0.75rem 2rem;
}
左に太めのラインを入れて付箋のようなデザインに。
背景+左線の見出し
CSS
h2 {
background: #eaf5f9;
border-left: solid 10px #27acd9;
padding: 0.75rem 1.5rem;
}
インデントを付けてアクセントに。
背景+左線（内側）の見出し
CSS
h2 {
background: #eaf5f9;
padding: 1rem 1rem 1rem 2.5rem;
position: relative;
}
h2:before {
position: absolute;
top: 20%;
left: 20px;
width: 6px;
height: 60%;
content: '';
border-radius: 3px;
background: #27acd9;
}
三角形を下に入れて立体的なリボン風に。帯のカラーより濃い色にするのがポイント。
リボン風の見出し
CSS
h2 {
background: #27acd9;
padding: 1rem;
position: relative;
color: #fff;
}
h2:before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 10px transparent;
border-right: solid 20px rgb(20, 86, 110);
}
グラデーションの見出し
上下のグラデーションで立体的に。濃淡を付け過ぎないことが綺麗に見せるポイント。
シンプルなグラデーション見出し
CSS
h2 {
position: relative;
padding: 0.75em 1.5em;
background: linear-gradient(to top, rgb(39, 172, 217), #45c4ee);
color: #fff;
}
全体に傾斜を付けてスタイリッシュな印象に。スポーツ系のサイト等におすすめ。
傾斜の付いたグラデーション見出し
CSS
h2 {
padding: 1rem 2rem;
color: #fff;
transform: skew(-15deg);
background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
}
グレーの薄いグラデーションで陰影を付け、ラインでアクセントを入れました。
ライン+グラデーション見出し
CSS
h2 {
position: relative;
padding: 1rem 1.5rem;
border: 1px solid #D8D8D8;
border-top: 4px solid #27acd9;
background: linear-gradient(#ffffff 0%, #eee 100%);
}
アイコン付きの見出し
左側にFont Awesomeのアイコンを置いたシンプルな見出しです。
矢印アイコン付き見出し
CSS
h2 {
position: relative;
padding-left: 1.5em;
}
h2:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f138";
left: 0;
top: 0;
font-weight: 900;
font-size: 1em;
color: #27acd9;
}
枠でメリハリをプラス。Font Awesomeのアイコン使用しています。
アイコン+枠付き見出し
CSS
h2 {
position: relative;
padding: 0.5em 0.75em;
border: solid 1px #27acd9;
border-left: solid 2.5em #27acd9;
}
h2:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f0eb";
font-weight: 900;
color: #fff;
padding: 0;
left: -1.6em;
top: 50%;
transform: translateY(-50%);
}
背景を入れた強調したスタイル。Font Awesomeのアイコン使用しています。
アイコン+背景付き見出し
CSS
h2 {
position: relative;
background: #eaf5f9;
padding: 0.5em 0.75em 0.5em 2.5em;
}
h2:before {
position: absolute;
font-family: "Font Awesome 5 Free";
content: "\f138";
font-weight: 900;
color: #27acd9;
padding: 0;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
吹き出しのデザイン見出し
左側にコンを置いたシンプルな見出しです。
斜め線で作る吹き出し見出し
CSS
h2 {
position: relative;
display: table-cell;
padding: 0 45px;
}
h2:before, h2:after {
content: '';
position: absolute;
top: 50%;
display: inline-block;
width: 44px;
height: 2px;
background-color: #27acd9;
}
h2:before {
left:0;
transform: rotate(60deg);
}
h2:after {
right: 0;
transform: rotate(-60deg);
}
吹き出し風のデザインで遊び心をプラス。
吹き出しカラー見出し
CSS
h2 {
position: relative;
padding: 1rem 2rem;
border-radius: 10px;
background: #27acd9;
color: #fff;
}
h2:after {
position: absolute;
content: '';
width: 0;
height: 0;
bottom: -10px;
left: 1.5em;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #27acd9 transparent transparent transparent;
}
下線だけで吹き出しを表現した今風のお洒落なスタイル。
下線のみの吹き出し風見出し
CSS
h2 {
position: relative;
padding: 1rem 0.5rem;
border-bottom: 3px solid #27acd9;
color: #27acd9;
}
h2:before, h2:after {
position: absolute;
content: '';
left: 1em;
width: 0;
height: 0;
border-width: 14px 12px 0;
border-style: solid;
}
h2:before {
bottom: -14px;
border-color: #27acd9 transparent transparent;
}
h2:after {
bottom: -10px;
border-color: #fff transparent transparent;
}
カギカッコでアクセントを付けました。
カギ括弧+背景カラー見出し
CSS
h2 {
position: relative;
background: #f4fbfd;
padding: 1rem 1.5rem;
text-align: center;
}
h2:before, h2:after {
content:'';
width: 20px;
height: 40px;
position: absolute;
display: inline-block;
}
h2:before {
border-left: solid 3px #27acd9;
border-top: solid 3px #27acd9;
top:0;
left: 0;
}
h2:after {
border-right: solid 3px #27acd9;
border-bottom: solid 3px #27acd9;
bottom:0;
right: 0;
}
ワンポイン入れたデザイン見出し
一文字目のカラーを変えて、さらに下線でアクセントをプラス。
先頭の文字だけ色を変えた見出し
CSS
h2 {
color: #555;
border-bottom: solid 2px #27acd9;
padding: 10px 0;
}
h2:first-letter {
color: #27acd9;
}
アクセントカラーを左側に入れてワンポイント。
左側に横ラインを入れた見出し
CSS
h2 {
position: relative;
display: table-cell;
padding-left: 55px;
}
h2:before {
position: absolute;
content: '';
top: calc(50% - 5px);
width: 40px;
left: 0;
height: 6px;
border-top: solid 6px #27acd9;
}
シンプルでありながら洗練された印象を与える装飾。
短いライン付きの中央寄せ見出し
CSS
h2 {
position: relative;
text-align: center;
padding: 1.5rem;
}
h2:before {
position: absolute;
content: '';
background: #27acd9;
bottom: 0;
left: calc(50% - 30px);
width: 80px;
height: 5px;
}
英語を添えてお洒落な印象に。サブタイトルとしても使えます。
English Title英語下線の見出し
CSS
h2 {
border-bottom: solid 2px #27acd9;
padding: 10px 0;
}
h2 span {
display: block;
font-size: 0.75rem;
color: #27acd9;
}
CSS側で共通で表示させる文字の編集が可能です。
固定文字+囲み線の見出し
CSS
h2 {
position: relative;
padding: 1rem 2rem;
border: solid 2px #27acd9;
}
h2:after {
position: absolute;
content: "Excellent Point";
top: -10px;
left: 15px;
background: #fff;
font-size: 0.75rem;
color: #27acd9;
padding: 0 10px;
}
契約の流れなどSTEPのあるコンテンツに最適。アイコン等に変更して使っても良し！
01枠+数字を入れた見出し
CSS
h2 {
position: relative;
overflow: hidden;
padding: 1rem 2rem 1rem 120px;
border: solid 2px #27acd9;
}
h2:before {
position: absolute;
content: '';
top: -150%;
left: -100px;
width: 200px;
height: 300%;
transform: rotate(25deg);
background: #27acd9;
}
h2 span {
position: absolute;
display: block;
top: 0;
left: 0;
z-index: 1;
font-size: 30px;
font-size: 3rem;
padding-left: 16px;
color: #fff;
}
[/nop]
まとめ
いかがでしたでしょうか？
今回は使いやすいシンプルなスタイルをまとめました。
ライン幅などは細めに設定して、全体的にスタイリッシュな印象にしております。
カラーや線幅などを調整すれば、カジュアルにもポップにも印象を変えられますので、お好みでカスタマイズしてご利用ください。
コピペOkシリーズと言えば先日、【HTML&CSS】で作る(表・table・テーブル)デザインの記事もございますので、併せてご利用頂ければと思います。
▼該当サービス
メールでのお問い合わせ
お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。
LINEでのお問い合わせ
お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。
