シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

  • Posted on
  • Category : Tips
シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

画像は使用せずにCSSだけでスタイリングしたタイトル(見出し)のデザインサンプルで、似たようなものやちょっとCSS追記した程度のものも多いですが全50種類です。全体的にすごく手間がかかっているようなものはないのですが、似たようなタイトルデザインを使う場合はCSSコピペで実装できると思います。また、一部複数行に向かないものもありますが、基本的には複数行のタイトルでも見栄えが崩れない感じのものになっており、余白やカラーなどを調整することでデザインを変更するのも容易です。

以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなシンプルなHTMLを使用しています。
ただ、一部異なるものといってもいずれもspan要素を1つ追記する程度のものです。

HTML

<h1>あのイーハトーヴォのすきとおった風</h1>

また、ここでは見栄えの紹介は全て画像を使用していますが実際の表示は以下デモページで確認でき、デモでは複数行の時の見栄えも併せて確認することができます。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50 目次

  1. 下ボーダー
  2. 下ボーダー × 先頭の文字大きく
  3. 下ボーダー(2本線)
  4. 上下にボーダー #1
  5. 上下にボーダー #2
  6. 左ボーダー
  7. 左ボーダー × 下ボーダー
  8. 左ボーダー × 下ボーダー(擬似要素使用)
  9. ボーダーで囲む
  10. ボーダーで囲む × 角丸
  11. ボーダーで囲む × 手書き風
  12. ボーダーで囲む × アクセント
  13. 背景色
  14. 背景色 × 角丸
  15. 背景色 × 下ボーダー
  16. 背景色 × 上下にボーダー
  17. 背景色 × 左ボーダー
  18. 背景色 × 2本線で囲む
  19. 補足やサブタイトル的なものを表示
  20. テキストとボーダーを重ねる #1
  21. テキストとボーダーを重ねる #2
  22. テキストとボーダーを重ねる #3
  23. 下ボーダー(2カラー) #1
  24. 下ボーダー(2カラー) #2
  25. 左ボーダー(2カラー)
  26. 吹き出し #1
  27. 吹き出し #2
  28. 吹き出し #3
  29. ボックス
  30. リボン #1
  31. リボン #2
  32. リボン #3
  33. リボン #4
  34. ドッグイヤー #1
  35. ドッグイヤー #2
  36. ページカール
  37. ボックスシャドウ #1
  38. ボックスシャドウ #2
  39. ボックスシャドウ #3
  40. 紙を切り取ったようなデザイン
  41. カウント表示させる
  42. マーカーのような下線
  43. グラデーション
  44. ストライプ
  45. 2種類のラインを重ねる #1
  46. 2種類のラインを重ねる #2
  47. グラデーション × ボーダー
  48. グラデーション × ボーダー × マーク
  49. マーク #1
  50. マーク #2

1. 下ボーダー

下ボーダー

シンプルにタイトル下にボーダーを引いたものです。
これ以降出てくるものもborder-stylesolidを指定しているものが多めですが、doubledasheddottedなど、ボーダーの種類を変えるだけでもいろいろな見せ方ができます。

CSS

h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}

目次へ

2. 下ボーダー × 先頭の文字大きく

下ボーダー × 先頭の文字大きく

先ほどのものに加えて、先頭の文字のみ大きくなるようにしたものです。

CSS

h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
h1:first-letter {
	margin-right: .1em;
	font-size: 1.5em;
}

目次へ

3. 下ボーダー(2本線)

下ボーダー(2本線)

border-styledoubleを指定したものです。

CSS

h1 {
	padding-bottom: .5em;
	border-bottom: 3px double #ccc;
}

目次へ

4. 上下にボーダー #1

上下にボーダー #1

シンプルにタイトルの上下にボーダーを引いたものです。

CSS

h1 {
	padding: .75em 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

目次へ

5. 上下にボーダー #2

上下にボーダー #2

こちらも上下にボーダーを引いたものですが、上下ともに見た目を2本線にしつつ、外側に面しているものは少し太くなるよう指定したものになります。
ここでは太さを変えたかったのでわざわざ擬似要素を用いていますが、単純な2本線でいいなら普通にborder-style: doubleのボーダーが上下に表示されるようh1要素に記述するだけでできます。

CSS

h1 {
	position: relative;
	padding: 1em 0;
}
h1::before,
h1::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
h1::before {
	top: 0;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
}
h1::after {
	bottom: 0;
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #ccc;
}

目次へ

6. 左ボーダー

左ボーダー

シンプルにタイトル左にボーダーを引いたものです。

CSS

h1 {
	padding: .25em 0 .25em .75em;
	border-left: 6px solid #ccc;
}

目次へ

7. 左ボーダー × 下ボーダー

左ボーダー × 下ボーダー

先ほどのものに加えて、下にもボーダーを引いたものです。

CSS

h1 {
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #ccc;
	border-bottom: 1px solid #ccc;
}

目次へ

8. 左ボーダー × 下ボーダー(擬似要素使用)

左ボーダー × 下ボーダー(擬似要素使用)

もちろん上で使用したように指定するのでも同じような見た目にできるのですが、上の方法だと異なるカラーのボーダーを使用している時に境目が気になることがあります。
同じカラーを使用している場合はわからないのですが、カラーが異なるボーダーを組み合わせて使用する場合はこちらの方法で実装した方が見た目が綺麗です。

CSS

h1 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #3498db;
}
h1::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

目次へ

9. ボーダーで囲む

ボーダーで囲む

タイトル全体をボーダーで囲ったものです。

CSS

h1 {
	padding: .5em .75em;
	border: 1px solid #ccc;
}

目次へ

10. ボーダーで囲む × 角丸

ボーダーで囲む × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

CSS

h1 {
	padding: .5em .75em;
	border: 1px solid #ccc;
	border-radius: 4px;
}

目次へ

11. ボーダーで囲む × 手書き風

ボーダーで囲む × 手書き風

同じくボーダーで囲んだものに角丸指定をしたものなのですが、border-radiusの指定を少し変えることでこのような手書き風っぽい見た目にすることができます。

CSS

h1 {
	padding: 1em;
	border: 3px solid #ccc;
	border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

目次へ

12. ボーダーで囲む × アクセント

ボーダーで囲む × アクセント

タイトル全体をボーダーで囲ったものに、少しアクセントを入れたものです。
ここではcalc使って実装していますが、使えないブラウザでも同じように表示したい場合は、h1要素の中身をspanで括るなどして、少しCSSを変更すれば実装できます。

CSS

h1 {
	position: relative;
	padding: .75em 1em .75em 1.5em;
	border: 1px solid #ccc;
}
h1::after {
	position: absolute;
	top: .5em;
	left: .5em;
	content: '';
	width: 6px;
	height: -webkit-calc(100% - 1em);
	height: calc(100% - 1em);
	background-color: #3498db;
	border-radius: 4px;
}

目次へ

13. 背景色

背景色

シンプルにタイトル全体に背景色を指定したものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
}

目次へ

14. 背景色 × 角丸

背景色 × 角丸

先ほどのものに加えて、角丸になるよう指定したものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-radius: 6px;
}

目次へ

15. 背景色 × 下ボーダー

背景色 × 下ボーダー

こちらは背景色を指定したものに、下ボーダーを引いたものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-bottom: 1px solid #ccc;
}

目次へ

16. 背景色 × 上下にボーダー

背景色 × 上下にボーダー

こちらは背景色を指定したものに、上下でボーダーを引いたものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

目次へ

17. 背景色 × 左ボーダー

背景色 × 左ボーダー

背景色を指定したものに、左ボーダーを引いたものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border-left: 6px solid #ccc;
}

目次へ

18. 背景色 × 2本線で囲む

背景色 × 2本線で囲む

背景色を指定したものをボーダーで囲ったもので、ボーダーのスタイルには2本線を指定しています。

CSS

h1{
	padding: .5em .75em;
	background-color: #f6f6f6;
	border: 3px double #ccc;
}

目次へ

19. 補足やサブタイトル的なものを表示

補足やサブタイトル的なものを表示

例えば大きい見出しに薄い文字で英訳を表示させたり、ちょっと補足的な感じでタイトルと一緒に文章を表示させたいといった時に使えるタイプのものです。
HTMLは下記のようにh1要素内にspan要素を作り、その中に補足やサブタイトルとなるものを記述します。

HTML

<h1>
	<span>ここに補足やサブタイトルなど</span>
	ここにはタイトルや見出しとして表示したいテキストをいれる
</h1>

あとはCSSを下記のように記述することでキャプチャのようなタイトルを実装できます。

CSS

h1 {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
}
h1 span {
	display: block;
	margin-bottom: .2em;
	color: #aaa;
	font-size: .9em;
}

今回は見出し上にしていますが、見出し下に表示させたい時はspan要素の記述位置を変更して、CSSのmargin-bottommargin-topにするなどすれば簡単に変更できます。

目次へ

20. テキストとボーダーを重ねる #1

テキストとボーダーを重ねる #1

タイトルの両端にボーダーが引かれているようなデザインです。
一応複数行でも大きく崩れないようにはしていますが、1行で収まるような見出しの時に使った方が見た目が良いと思います。
実装にはHTMLとCSSを下記のように記述し、HTMLはspan要素を追記し、CSSではh1 spanに周りと同じカラーの背景色を指定する必要があります。

HTML

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

CSS

h1 {
	position: relative;
	text-align: center;
}
h1 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
}
h1::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background-color: #ccc;
}

目次へ

21. テキストとボーダーを重ねる #2

テキストとボーダーを重ねる #2

パッと見は先ほどのものと同じですが、こちらはテキスト部分にカラー指定をする必要がないので、背景を気にすることなく使用できるタイプのものです。
実装にはHTMLとCSSを下記のように記述し、こちらもHTMLにspan要素を追記する必要があります。

HTML

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

CSS

h1 {
	overflow: hidden;
	text-align: center;
}
h1 span {
	position: relative;
	display: inline-block;
	margin: 0 2.5em;
	padding: 0 1em;
	text-align: left;
}
h1 span::before,
h1 span::after {
	position: absolute;
	top: 50%;
	content: '';
	width: 400%;
	height: 1px;
	background-color: #ccc;
}
h1 span::before {
	right: 100%;
}
h1 span::after {
	left: 100%;
}

目次へ

22. テキストとボーダーを重ねる #3

テキストとボーダーを重ねる #3

こちらはボーダーを外側に向かって段々と消えていくようなものにしたもので、上2つと同様でHTMLにspan要素を追記する必要があります。

HTML

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

CSS

h1 {
	position: relative;
	text-align: center;
}
h1 span {
	position: relative;
	z-index: 2;
	display: inline-block;
	margin: 0 4em;
	padding: 0 1em;
	background-color: #fff;
	text-align: left;
}
h1::before {
	position: absolute;
	top: 50%;
	z-index: 1;
	content: '';
	display: block;
	width: 100%;
	height: 1px;
	background: #ccc;
	background: -webkit-linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
	background: linear-gradient(-45deg, transparent, #ccc 10%, #ccc 90%, transparent);
}

目次へ

「テキストとボーダーを重ねる」の実装方法について…

ここでは3通りの方法を紹介しましたが同じような見栄えにする方法は他にもあり、例えばグラデーション(linear-gradient)を使ったり、flexboxを使ったりといった方法もあります。
記述のシンプルさや汎用性の高さ、ブラウザサポートなど種類によって様々なメリット・デメリットがあるのでどれが一番良いというのが正直自分では決めかねるのですが、先述したようにいろいろ実装方法があるので結局場面によって使い分けるのが無難かなと思います。
ここで紹介したものを含め、その他の実装方法は下記が参考になります。

23. 下ボーダー(2カラー) #1

下ボーダー(2カラー) #1

たまに見かけることもあると思う、カラーの異なるボーダーを下に引いているデザインです。

CSS

h1 {
	position: relative;
	padding-bottom: .5em;
	border-bottom: 4px solid #ccc;
}
h1::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 4px;
	background-color: #3498db;
}

目次へ

24. 下ボーダー(2カラー) #2

下ボーダー(2カラー) #2

このサンプルだとちょっとわかりづらいかもしれませんが、タイトル下に引いたボーダーに少し立体感を出るようにしたものです。
サンプルソースをそのまま使う場合は、背景が少し暗めな時に利用してください。

CSS

h1 {
	position: relative;
	padding-bottom: .5em;
}
h1::after {
	position: absolute;
	bottom: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
}

目次へ

25. 左ボーダー(2カラー)

左ボーダー(2カラー)

こちらは左ボーダーをカラーの異なるもので組み合わせたものです。

CSS

h1 {
	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #ccc;
}
h1::before {
	position: absolute;
	left: -6px;
	bottom: 0;
	content: '';
	width: 6px;
	height: 50%;
	background-color: #3498db;
}
h1::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

目次へ

26. 吹き出し #1

吹き出し #1

吹き出しの見た目をCSSのみで再現したものです。
下記では記述していませんが、box-shadowを薄っすらかけたりしてもいいですね。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
}
h1::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #f0f0f0;
}

目次へ

27. 吹き出し #2

吹き出し #2

基本的な記述は先ほどと同じですが、box-shadowを追記して内側に少し影がかかるようにしたものです。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background-color: #f0f0f0;
	border-radius: 6px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .1) inset;
}
h1::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top: 15px solid #f0f0f0;
}

目次へ

28. 吹き出し #3

吹き出し #3

こちらは上の2つとは違って、枠線だけの吹き出しです。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 6px;
}
h1::before,
h1::after {
	position: absolute;
	top: 100%;
	left: 30px;
	content: '';
	height: 0;
	width: 0;
	border: 10px solid transparent;
}
h1::before {
	border-top: 15px solid #ccc;
}
h1::after {
	margin-top: -2px;
	border-top: 15px solid #fff;
}

目次へ

29. ボックス

ボックス

立体的な箱のようなデザインのタイトルです。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background-color: #e8e8e8;
}
h1::after {
	content: '';
	position: absolute;
	top: -20px;
	left: 0;
	width: -webkit-calc(100% - 20px);
	width: calc(100% - 20px);
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #f0f0f0;
}

目次へ

30. リボン #1

リボン #1

リボンの見た目をCSSのみで再現したものです。
サンプルではそのような見栄えにしていませんが、幅を調節するなどして枠からはみ出るような見た目にするとより良い感じに見えます。

CSS

h1 {
	position: relative;
	padding: .75em 1em;
	background-color: #f0f0f0;
}
h1::before,
h1::after {
	content: '';
	position: absolute;
	top: 100%;
	border-style: solid;
	border-color: transparent;
}
h1::before {
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #ccc;
}
h1::after {
	right: 0;
	border-style: solid;
	border-width: 15px 15px 0 0;
	border-top-color: #ccc;
}

目次へ

31. リボン #2

リボン #2

先ほどのものと基本的には同じで、右側にある折り返し位置を少し変更したものです。

CSS

h1 {
	position: relative;
	padding: .75em 1em;
	background-color: #f0f0f0;
}
h1::before,
h1::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent;
}
h1::before {
	top: 100%;
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #ccc;
}
h1::after {
	top: -15px;
	right: 0;
	border-style: solid;
	border-width: 0 15px 15px 0;
	border-bottom-color: #ccc;
}

目次へ

32. リボン #3

リボン #3

こちらも基本的な部分は変わらないのですが、HTMLにspan要素を追記し、CSSを少し変更することでステッチがあるようなリボンになります。
ここで紹介しているのはつまらない見た目ですが、border-radiusで丸みをつけたり、背景色はほんのりグラデーションつけたものとかにすると可愛い感じのデザインにもなります。

HTML

<h1><span>あのイーハトーヴォのすきとおった風</span></h1>

CSS

h1 {
	position: relative;
	padding: .3em;
	background-color: #f0f0f0;
}
h1 span {
	display: block;
	padding: .75em 1em;
	border: 1px dashed #ccc;
}
h1::before,
h1::after {
	content: '';
	position: absolute;
	border-style: solid;
	border-color: transparent;
}
h1::before {
	top: 100%;
	left: 0;
	border-width: 0 15px 15px 0;
	border-right-color: #ccc;
}
h1::after {
	top: -15px;
	right: 0;
	border-style: solid;
	border-width: 0 15px 15px 0;
	border-bottom-color: #ccc;
}

目次へ

33. リボン #4

リボン #4

折り返し部分を左だけにしたタイプのリボンです。
ただ、この実装方法は複数行向きではないので、1行しか入らないようなタイトルで使用してください。

※こんな感じの見た目で可変にもバッチリ対応しているような組み方をご存知の方がいたら是非教えてください!

CSS

h1 {
	position: relative;
	height: 50px;
	line-height: 50px;
	padding: 0 1em;
	background-color: #f0f0f0;
}
h1::before,
h1::after {
	content: '';
	position: absolute;
}
h1::before {
	top: 100%;
	left: 0;
	border-width: 0 15px 15px 0;
	border-style: solid;
	border-color: transparent;
	border-right-color: #ccc;
}
h1::after {
	top: 0;
	right: 0;
	z-index: 2;
	border-width: 25px 20px;
	border-style: solid;
	border-color: transparent;
	border-right-color: #fff;
}

目次へ

上で紹介したものはいずれも簡易的なものばかりで、やろうと思えば下記のようなデザインのリボンもCSSで実装することができます。

目次へ

34. ドッグイヤー #1

ドッグイヤー #1

紙の端を少し折り返したドッグイヤーのような見栄えをCSSのみで再現したものです。

CSS

h1 {
	position: relative;
	padding: 1em;
	background-color: #f6f6f6;
}
h1::after {
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	width: 0;
	border-width: 0 16px 16px 0;
	border-style: solid;
	border-color: #fff #fff #ddd #ddd;
	box-shadow: -1px 1px 2px rgba(0, 0, 0, .1);
}

目次へ

35. ドッグイヤー #2

ドッグイヤー #2

こちらもドッグイヤーなのですが、丸みをつけたりグラデーションを用いたりとより立体的な見た目にしたものです。

CSS

h1 {
	position: relative;
	padding: 1em 4em 1em 1em;
	-webkit-background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	background: linear-gradient(-155deg, rgba(0, 0, 0, 0) 1.5em, #f6f6f6 0%);
	border-radius: 6px;
}
h1::after {
	position: absolute;
	top: 0;
	right: 0;
	content: '';
	width: 1.65507em;
	height: 3.5493em;
	background: -webkit-linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
	background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .2));
	border-bottom-left-radius: 6px;
	box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
	-webkit-transform: translateY(-1.89424em) rotate(-40deg);
	transform: translateY(-1.89424em) rotate(-40deg);
	-webkit-transform-origin: bottom right;
	transform-origin: bottom right;
}

この実装方法は以下で公開されているもので、他にも2種類の実装方法があります。

目次へ

36. ページカール

ページカール

見出しが浮き上がっているように見えるページカールをCSSのみで再現したものです。
サンプルでは両端に影を付けていますが、どちらかの擬似要素を削除すれば片方だけ浮いているように見せることもできます。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background-color: #f6f6f6;
}
h1::before,
h1::after {
	position: absolute;
	bottom: 8px;
	z-index: -1;
	content: '';
	width: 30%;
	height: 50%;
	box-shadow: 0 10px 15px rgba(0, 0, 0, .2);
}
h1::before {
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
	left: .3em;
}
h1::after {
	-webkit-transform: rotate(3deg);
	transform: rotate(3deg);
	right: .3em;
}

目次へ

37. ボックスシャドウ #1

ボックスシャドウ #1

box-shadowを使うことで影をつけ、立体的な感じにしたものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

目次へ

38. ボックスシャドウ #2

ボックスシャドウ #2

立体的に見せるために内側に1pxの線を入れたりすることがありますが、それをbox-shadowinsetを使って再現したものです。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border: 1px solid #eee;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset;
}

目次へ

39. ボックスシャドウ #3

ボックスシャドウ #3

同じくbox-shadowを使って内側に線をいれたもので、上と左に白を、右と下に少し暗めの線を入れた感じにしています。

CSS

h1 {
	padding: .5em .75em;
	background-color: #f6f6f6;
	border: 1px solid #eee;
	box-shadow: 1px 1px 0 rgba(255, 255, 255, .5) inset, -1px -1px 0 rgba(100, 100, 100, .1) inset;
}

目次へ

40. 紙を切り取ったようなデザイン

紙を切り取ったようなデザイン

紙を途中で切り取ったようなデザインをCSSのみで再現したもので、別のコンテンツが始まるのがわかりやすくなりますね。

CSS

h1 {
	padding: .5em .75em;
	background: #f4f4f4;
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}
紙を切り取ったようなデザイン

ちなみに上のキャプチャのようにアイコンを付けたりしても面白いかと思います。
この見栄えであれば画像を使用しなくても、擬似要素を使って下記のように記述すれば実装できます。

CSS

h1 {
	position: relative;
	padding: .5em .75em;
	background: #f4f4f4;
	border-top: 1px dashed #ccc;
	border-bottom: 1px dashed #ccc;
	box-shadow: 0 7px 10px -5px rgba(0, 0, 0, .1) inset;
}
h1::after {
	position: absolute;
	bottom: -9px;
	right: 10%;
	content: '\002702';
	color: #aaa;
	font-size: 18px;
	line-height: 1;
}

目次へ

41. カウント表示させる

カウント表示させる

counter-incrementを使って見出し横にカウントが表示されるようにする方法です。

counter-resetcounter-incrementを指定する要素などは環境にあわせて変更してください。

CSS

body {
	counter-reset: titleNum;
}
section {
	counter-increment: titleNum;
}
h1 {
	position: relative;
	padding: 0 0 .5em 2em;
	border-bottom: 1px solid #ccc;
}
h1::before {
	position: absolute;
	top: 0;
	left: 0;
	content: counter(titleNum);
	width: 28px;
	height: 28px;
	line-height: 28px;
	background-color: #ccc;
	border-radius: 100%;
	color: #fff;
	font-size: .9em;
	text-align: center;
}

目次へ

42. マーカーのような下線

マーカーのような下線

マーカーで引いたようなテキストと被っている下線を再現したものです。
ここでは複数行のことや古いブラウザにも少しいじれば対応できたりすることなども考えて擬似要素を使用していますが、linear-gradient使うことで擬似要素なしで実装することもできます。

CSS

h1 {
	position: relative;
	padding: 0 .4em .1em;
}
h1::after {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 100%;
	height: 10px;
	background-color: #b6f0fc;
}

目次へ

43. グラデーション

グラデーション

背景をグラデーションにしたタイプのデザインです。

CSS

h1 {
	padding: .5em .75em;
	background: -webkit-linear-gradient(top, #69b4e6 0%, #3498db 100%);
	background: linear-gradient(to bottom, #69b4e6 0%, #3498db 100%);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

手っ取り早くグラデーション指定したい場合はジェネレータを使ったり、同じ見た目なのであれば以下のようなサイトも便利だと思います。

目次へ

44. ストライプ

ストライプ

こちらはrepeating-linear-gradientを用いて、CSSのみでストライプ背景を実装してみたものです。

CSS

h1 {
	padding: .5em .75em;
	background: -webkit-repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
	background: repeating-linear-gradient(45deg, #3498db, #3498db 5px, #69b4e6 5px, #69b4e6 10px);
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
}

目次へ

45. 2種類のラインを重ねる #1

2種類のラインを重ねる #1

こちらは2種類のラインを組み合わせたもので、まず::after擬似要素でストライプのラインを作成し、その上に::before擬似要素で作ったラインを重ねています。

CSS

h1 {
	position: relative;
	padding-bottom: .5em;
}
h1::before,
h1::after {
	position: absolute;
	bottom: -4px;
	left: 0;
	content: '';
	height: 4px;
}
h1::before {
	z-index: 2;
	width: 15%;
	background-color: #444;
}
h1::after {
	width: 100%;
	background: -webkit-repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
	background: repeating-linear-gradient(45deg, #fff, #fff 2px, #aaa 2px, #aaa 4px);
}

目次へ

46. 2種類のラインを重ねる #2

2種類のラインを重ねる #2

こちらも2種類のラインを組み合わせたもので、まずh1border-top: 1px solid #ccc;で1pxのラインを引き、その上に::after擬似要素で作成した少し太いラインを重ねたものになります。

CSS

h1 {
	position: relative;
	padding-top: .75em;
	border-top: 1px solid #ccc;
}
h1::after {
	position: absolute;
	top: -2px;
	left: 0;
	z-index: 2;
	content: '';
	width: 20%;
	height: 3px;
	background-color: #333;
}

目次へ

47. グラデーション × ボーダー

グラデーション × ボーダー

グラデーションとボーダーを組み合わせることで、コーポレートサイトなどで見かけるような感じのタイトルデザインにしたものです。

CSS

h1 {
	padding: .75em 1em;
	border: 1px solid #ccc;
	border-top: 3px solid #3498db;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}

目次へ

48. グラデーション × ボーダー × マーク

グラデーション × ボーダー × マーク

基本的な部分は先ほどのものと同様で、そこに擬似要素を使ってマークを付けてみたものです。
サンプルで使用しているのをbackground-colorを使って塗りつぶしの丸にしたり、border-radiusを取っ払って正方形のアイコンみたいなものにしたり、擬似要素の部分をいじればいろいろな見栄えにできると思います。

CSS

h1 {
	position: relative;
	padding: .75em 1em .75em 2em;
	border: 1px solid #ccc;
	border-top: 3px solid #3498db;
	background: -webkit-linear-gradient(top, #fff 0%, #f0f0f0 100%);
	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;
}
h1::after {
	position: absolute;
	top: 1em;
	left: .6em;
	z-index: 2;
	content: '';
	width: 10px;
	height: 10px;
	border: 3px solid #3498db;
	border-radius: 100%
}

目次へ

49. マーク #1

マーク #1

タイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
このサンプルではダイヤ型のアイコンっぽいものを擬似要素で作成しています。

CSS

h1 {
	position: relative;
	padding: 0 .5em .5em 1.7em;
	border-bottom: 1px solid #ccc;
}
h1::after {
	position: absolute;
	top: .4em;
	left: .4em;
	z-index: 2;
	content: '';
	width: 12px;
	height: 12px;
	background-color: #ccc;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

目次へ

50. マーク #2

マーク #2

こちらも同じくタイトル下にボーダーを引いたものに擬似要素を使ってマークを加えたものです。
::before::afterと2つの擬似要素を組み合わせれば、このような見た目のマークもCSSのみで再現することができます。

CSS

h1 {
	position: relative;
	padding: 0 .5em .5em 2em;
	border-bottom: 1px solid #ccc;
}
h1::before,
h1::after {
	position: absolute;
	content: '';
	border-radius: 100%
}
h1::before {
	top: .2em;
	left: .2em;
	z-index: 2;
	width: 18px;
	height: 18px;
	background: rgba(150, 150, 150, .5);
}
h1::after {
	top: .7em;
	left: .7em;
	width: 13px;
	height: 13px;
	background: rgba(210, 210, 210, .5);
}

目次へ

おまけ

おまけ

最後はおまけで、あるお方があるアイテムをモチーフにスタイリングしたタイトルです。
種類もしっかり3パターン用意されており、HTMLとCSSをそれぞれ下記のように記述します。

HTML

<h1 class="t_standard">Standard</h1>

<h1 class="t_soft">Soft</h1>

<h1 class="t_hard">Hard</h1>

CSS

.t_standard {
	padding: .6em 1em;
	background: #666;
	background: -webkit-linear-gradient(top, #f00 0%, #c00 100%);
	background: linear-gradient(to bottom, #f00 0%, #c00 100%);
	border-top: 1px solid #ccc;
	border-right: 10px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 30px double #ccc;
	border-radius: 7px;
	color: #ddd;
	font-weight: 600;
	font-size: 1.25em;
}

.t_soft {
	padding: .6em 1em;
	background: #fff;
	background: -webkit-linear-gradient(top, #eee 0%, #ccc 100%);
	background: linear-gradient(to bottom, #eee 0%, #ccc 100%);
	border-top: 1px solid #888;
	border-right: 10px solid #aaa;
	border-bottom: 1px solid #888;
	border-left: 30px double #aaa;
	border-radius: 7px;
	color: #f00;
	font-weight: 600;
	font-size: 1.25em;
}

.t_hard {
	padding: .6em 1em;
	background: #666;
	background: -webkit-linear-gradient(top, #666 0%, #252525 100%);
	background: linear-gradient(to bottom, #666 0%, #252525 100%);
	border-top: 1px solid #888;
	border-right: 10px solid #f00;
	border-bottom: 1px solid #888;
	border-left: 30px double #f00;
	border-radius: 7px;
	color: #ddd;
	font-weight: 600;
	font-size: 1.25em;
}

目次へ

Back to Top

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。