フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログCHIIWEB BLOG

【css】シンプルな見出しのデザインをまとめました

シンプルな見出しのデザイン

こんにちは。今回はあるとちょっと便利な「見出しだけ」のデザインをまとめてみました。

この記事を書いている人

Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
もっと詳しくみる

サイトのデザインをするときに、見出しだけを見たい時ってありませんか?
そう思って集めてみました。

cssも添付しますのでコピーして使ってください^^。

htmlは追記がない場合共通です。↓

<h2>CONCEPT</h2>
	<p>テキストテキストテキストテキスト</p>
web designer

CONCEPT

超シンプルな見出し アルファベットだけ
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 30px;
}

CONCEPT

アルファベット+ボーダーを使った見出し
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	line-height: 1;
	margin-bottom: 30px;
}
h2::after {
	content: '';
	display: block;
	width: 85px;
	height: 5px;
	background: #000;
	margin-top: 30px;
}

CONCEPT

上にボーダー+アルファベット
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
}
h2::before {
	content: '';
	display: block;
	width: 85px;
	height: 5px;
	background: #000;
}

CONCEPT

アルファベット+真ん中ボーダー
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
	display: inline-block;
}
h2::before {
	content: '';
	display: block;
	width: 85px;
	height: 5px;
	background: #000;
	margin: 0 auto 30px;
}

CONCEPT
コンセプト

アルファベット+日本語+ボーダー
I never look at this picture without thinking of those happy days.

<h2>CONCEPT<br>
 <span>コンセプト</span>
</h2>
 <p>アルファベット+日本語+ボーダー<br>I never look at this picture without thinking of those happy days.</p>
h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
	padding-bottom: 20px;
	margin-bottom: 20px;
	display: inline-block;
}
h2 span {
	font-size: 11px;
	background: white;
	display: inline-block;
	width: fit-content;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -4px;
	padding: 0 4px;
	margin: 4px auto 0;
}
h2::after {
	content: '';
	width: 100%;
	height: 1px;
	background: #000;
	display: block;
	margin: auto;
	position: absolute;
	bottom: 0;
	z-index: -1;
}

PROFILE

手書き風アルファベット+アルファベット
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
	padding-left: 140px;
	margin-top: 90px;
}
h2::before {
	content: "About me";
	display: inline-block;
	font-family: mrsheffield-pro, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 300%;
	color: #9ba6b0;
	transform: rotate(-13deg);
	letter-spacing: 12px;
	position: absolute;
	left: 0;
	top: -50px;
	z-index:-1;
}

mrsheffield-proはAdobe fontです。

Adobe fontは契約者の自サイトでのみWebフォントとして利用できますプロフィールイラスト

NEWS

アルファベット+ナナメボーダー
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	text-align: left;
	position: relative;
	line-height: 1;
	overflow: hidden;
	padding: 40px;
}
h2 {
	content: "";
	display: inline-block;
	width: 4px;
	height: 140%;
	background: #9ba6b0;
	transform: rotate(20deg);
	position: absolute;
	top: -20px;
	left: 35px;
	z-index: -1;
}

NEWS

ちび三角形+アルファベット
I never look at this picture without thinking of those happy days.

h2.type8::before {
	content: "";
	display: inline-block;
	border: 6px solid transparent;
	border-left: 6px solid #000;
	padding: 0;
	margin: 0;
	top: -4px;
	position: relative;
}

NEWS 新着情報

アルファベット+/+日本語
I never look at this picture without thinking of those happy days.

<h2>NEWS
 <span>新着情報</span>
</h2>
<p>アルファベット+/+日本語<br>I never look at this picture without thinking of those happy days.</p>
h2 {
	font-size: 30px;
	font-weight: bold;
	display: flex;
	align-items: center;
}
h2 span {
	font-size: 11px;
	font-weight: normal;
}
h2 span::before {
	content: "/";
	font-size: 20px;
	margin: 0 14px;
}

NEWS

アルファベット+2本ボーダー
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 3px 0;
}
h2::before,
h2::after {
	content: '';
	width: 100%;
	height: 1px;
	background: #000;
	position: absolute;
	bottom: 0;
	left: 0;
}
h2::after {
	bottom: -3px;
}

CONCEPT

ナナメボーダー+アルファベット
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	position: relative;
	display: inline-block;
	padding: 20px;
	letter-spacing: 6px;
}
h2::before {
	content: "";
	width: 1px;
	height: calc(100% + 40px);
	transform: rotate(34deg);
	display: block;
	position: absolute;
	background: #6f7d80;
	left: 0;
	right: 0;
	top: -20px;
	margin: auto;
	z-index: -1;
}

CONCEPT

縦ボーダー+アルファベット
I never look at this picture without thinking of those happy days.

h2 {
	font-size: 30px;
	font-weight: bold;
	display: inline-block;
}
h2::before {
	content: "";
	width: 2px;
	height: 40px;
	background: black;
	margin: 0 auto 10px;
	display: block;
}

ここで紹介いたコードは”一例”です。

他にもコーディングのパターンはあります。

見出しデザインまとめ

まとめシリーズは自分も役に立つなと思っているので、ちょこちょこ集めてまたUPしますねheart

\キャンペーン中です/

今までわたしが使ってきた複数の
レンタルサーバーの中で、一番おすすめのエックスサーバー。
使いやすくて問題なくサイト運営ができています。

自分のサイトやブログを運営するなら、
エックスサーバーで、ドメインも簡単に取得できます♡

\Instagramでもwebデザイン情報発信中/


コメントを残す

CAPTCHA


コメントは承認後に表示されます。

ドメインとサーバーはエックスサーバーで一括管理が便利♪

ドメイン取得↓

サーバー契約↓

関連記事