Loading

[CSS] CSSのみでデザインするおしゃれなヘッダー・見出し(h1~h6タグ)サンプル集

SAYA160105352465_TP_V

今回は見出し・ヘッダー(h1〜h6タグ)の洗練されたおしゃれなデザインサンプルを紹介します。h3タグベースに、CSSのソースコードはコピペで利用できるように整理してますので、ご自由にご利用ください!

No.1 左ワンポイントでおしゃれさUP!

最もポピュラーでありながら、デザイン性の良さから様々なサイトで活用されています!他サイトと同じパターンが多く、見出しであることがひと目で分かるので、ユーザビリティ向上にも一役買ってくれるでしょう(。・ω・。)

01. 見出しサンプル01
h3{
  margin: 20px 0px;
  width: 95%;
  color: #ececec;
  background-color: #232323;
  border-top: 1px solid #232323;
  border-right: 1px solid #232323;
  border-bottom: 1px solid #232323;
  border-left: 7px solid #00BFFF;
  padding: 1.5em .9em;
}

No.2 アンダーラインで高級感UP!

No.1に続き、こちらもメジャーなヘッダー・見出しのデザインです!No.1と組み合わせ、「No.2はH3タグ、No.1はH4タグ」と階層を分けて使うパターンもよく見ます(。・ω・。)

02. 見出しサンプル02
h3{
  margin: 20px 0px;
  width: 95%;
  color: #ececec;
  background-color: #232323;
  border: 1px solid #232323;
  border-bottom: 3px solid #00BFFF;
  padding: 1.5em .9em;
}

No.3 1文字目強調でシンプルに!

1文字目を強調し、シンプルにヘッダーであることをアピールしてます!ヘッダーを強調しすぎたくないけど、ヘッダーであることはわかってほしい・・・といった時に活躍してくれるヘッダーデザインです(。・ω・。)

見出しサンプル03
h3{
  padding: 0 0 10px 0;
  border-bottom: 2px solid #cccccc;
}
h3:first-letter{
  font-size: 1.8em;
  color: #2E9AFE;
}

No.4 幾何学的なヘッダーデザイン!

こちらは一風変わったデザインです!幾何学的なデザインで、シンプルながらおしゃれな演出をしています(。・ω・。)

04. 見出しサンプル04
h3{
  width: 95%;
  line-height: 2.0;
  position: relative;
  padding: 0.25em 1em;
  border-top: solid 2px #232323;
  border-bottom: solid 2px #232323;
}
h3:before, h3:after{
  content: '';
  position: absolute;
  top: -7px;
  width: 2px;
  height: -webkit-calc(100% + 14px);
  height: calc(100% + 14px);
  background-color: #232323;
}
h3:before{left:7px;}
h3:after{right:7px;}

No.5 かぎかっこでヘッダーを表現!

日本ではメジャーなカギ括弧(「」」でデザインしたヘッダです!こちらもわかりやすくて良いです(。・ω・。) ただ、日本以外では逆に伝わりにくいかもしれないので、注意しましょう!あと、本文にカギ括弧(「」)をよく使う方も、意味が重ならないようにするために要注意です!

05. 見出しサンプル05
h3{
  position: relative;
  line-height: 2.0;
  padding: 0.25em 1em;
  display: inline-block;
}
h3:before,h3:after{ 
  content: '';
  width: 25px;
  height: 25px;
  position: absolute;
  display: inline-block;
}
h3:before{
  border-left: solid 1px #232323;
  border-top: solid 1px #454545;
  top: 0;
  left: 0;
}
h3:after{
  border-right: solid 1px #232323;
  border-bottom: solid 1px #454545;
  bottom: 0;
  right: 0;
}

No.6 上下ボーダーでシンプルに

メジャーなデザインに戻ってきました!上下ボーダー、こちらも色々なサイトで使われています!シンプルですが、こちらもヘッダーとしてはわかりやすいので人気が高いです(。・ω・。)

06. 見出しサンプル06
h3{
  padding: .9em 0;
  border-top: 1px solid #acacac;
  border-bottom: 1px solid #acacac;
}

No.7 太さの違う上下ダブルボーダー

先程と同じく上下ボーダーですが、今度は二重線にしてます!また、二重線の2つの線の太さも変えているので、よりおしゃれに演出できてます(。・ω・。)

07 見出しサンプル07
h3{
  position: relative;
  padding: 1em 0;
}
h3:before,h3:after {
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 6px;
  box-sizing: border-box;
}
h3:before {
  top: 0;
  border-top: 2px solid #ccc;
  border-bottom: 1px solid #ccc;
}
h3:after {
  bottom: 0;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid #ccc;
}

No.8 2カラーアンダーバー

装飾はアンダーバーのみですが、2カラーで表現しています。2カラーにするだけでもかなりオシャレ感UPしますね!(。・ω・。)

08 見出しサンプル08
h3{
  position: relative;
  padding-bottom: .5em;
  border-bottom: 4px solid #ccc;
}
h3:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #3498db;
}

No.9 マークをつけてわかりやすく!

最後にご紹介するのはマーク付きのヘッダー(見出し)です!マークが付くだけでもかなりおしゃれになりますね(。・ω・。)

09 見出しサンプル09
h3{
  position: relative;
  padding: 0 .5em .5em 1.7em;
  border-bottom: 1px solid #232323;
}
h3:after {
  position: absolute;
  top: .1em;
  left: .4em;
  z-index: 2;
  content: '';
  width: 14px;
  height: 14px;
  background-color: #ccc;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

いかがでしたでしょうか?お気に入りのものございましたら、是非コピペでご利用ください!

[アニメ] 笑える面白い次回予告まとめ

[Excel VBA] マクロでエクセルの行の高さを自動調整する方法

関連記事

  1. [Excel VBA] マクロで対象ブックの印刷総枚数を取得する

    2016.06.21
  2. [jQuery] カーソルをあてた時に画像を切り替える方法(マウスオーバー・マウ…

    2018.06.20
  3. [Excel VBA] マクロで月の日数を取得する(当月・前月・翌月)

    2016.08.02
  4. [jQuery] フォーム送信時(Submit時)にボタン毎に遷移先URLを変更…

    2018.08.10
  5. [Excel VBA] マクロで辞書オブジェクト(KEY-VALUE)の使い方ま…

    2016.09.01
  6. [PHP] 入力フォームのバリデーションチェックを実装する

    2016.05.09

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. ドラクエウォーク イオ 特技こころ
  2. ドラクエウォーク バギ属性とくぎ こころ
  3. ドラクエⅣ BGM
  4. ドラクエウォーク 賢者 やまびこ
  5. ドラクエウォーク バトルマスタ 怒り
PAGE TOP