CSSだけで見出し部分(hタグ)のデザインを装飾出来るデザインサンプルです。ソースコードをCSSにコピペするだけで簡単に実装できます。シンプルで使えそうなものをセレクトしました。

 

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

<h1>言葉には羽根がある THE WORDS HAVE WINGS.</h1>

ここでは見出し<h1>としていますが、CSSの記述をh2にすれば、HTMLのh2の部分が装飾されます。以下のCSSのタグをオリジナルタグにすることもできます。

 

(オリジナルタグの例)

CSSのh1の部分をaaaと書き換えて、HTMLで装飾を反映したいテキストを<aaa>テキスト</aaa>として囲います。

WordPressの場合

固定ページや投稿ページから「テキスト」で<h>タグの内側に記述します。

 

 

 

吹き出しA

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

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;
}

 

 

 

 

吹き出しB

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

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;
}

 

 

 

吹き出しC

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

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;
}

 

 

 

下ボーダー

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

 

下ボーダー(先頭の文字が大きくなる)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

 

左ボーダー

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

左ボーダー(下ボーダー)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

ボーダーで囲む

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

ボーダーで囲む(角丸)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

ボーダーで囲む(手書きっぽい感じ)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

背景色

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

背景色(角丸)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

 

背景色(左ボーダー)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

 

 

サブタイトルを表示出来るもの

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

HTML

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

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にすることなどで実装できます。

 

 

 

折り目(小)

【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);
}

 

 

 

折り目(大)

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

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;
}

 

 

 

ボックスに影をつける

【CSSサンプル】見出しタイトルデザインをコピペで装飾する方法

CSS

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

 

このように、CSSのみでも色々デザインを変更することができます。

良かったら皆さんのオススメのデザインも教えてくださいね^^

 

 

 

いいね、シェア、フォロー歓迎!2020テーマは「自然から学び自然と共に生きる」