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