CSSで(小)見出しのデザイン例まとめ_技術三昧ブログ

ホーム » ブログ » CSSで(小)見出しのデザイン例まとめ

@2017/04/19

ホームページ開発にてタイトル・見出しなどに対して、どのようにデザインすればいいでしょうか。また、画像利用か画像なしてCSSのみでデザインするかを悩んでいる方は少なくありません。本記事ではCSSのみでタイトルや小見出しのデザインサンプルを公開します。
下記のデモページを見てください。
気になる方は、下記のコードをコピペのみで利用できるので、ぜひお試してください。
デモページ（h1,h2,h3,h4,h5,h6のデザイン例)


<style type="text/css">
@CHARSET "utf-8";
:root {
	--base-color: white;
	--font-color: #158b2b;/* 文字の色 */
	--font-color-on: white;/* 文字の色（背景色あり、マウスオーバーなど)  */
	--border-color: #a6ddb0;/* 枠線の色 */
	--border-color-on: #a6ddb0;/* 枠線の色（背景色あり、マウスオーバーなど) */
	--bg-color: #179C17;/* 背景色の色 */
	--bg-color-on: #a6ddb0;/* 背景色の色(マウスオーバーなど) */
}
h1,h2,h3,h4,h5,h6 {
	font-size: 1rem;
}

h1.hashi {
	position: relative;
	color: #158b2b;
	color: var(--font-color);
	font-size: 20px;
	padding: 10px 0;
	text-align: center;
	margin: 1.5em 0;
}
h1.hashi:before {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	width: 150px;
	height: 58px;
	border-radius: 50%;
	border: 5px solid #a6ddb0;
	border: 5px solid var(--border-color);
	border-left-color: transparent;
	border-right-color: transparent;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

h2.tip {
    position: relative;
    background: #179C17;
    background: var(--bg-color);    
    font-size: 1.5em;
    letter-spacing: .03em;
    color: #fff!important;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0.1em;
    margin: 0 auto 1.5rem;
    text-align: center;
    line-height: 1.8em;
}
h2.tip:after {
    position: absolute;
    bottom: -1rem;
    left: 50%;
    z-index: 90;
    margin-left: -1rem;
    border-top: 1rem solid #179C17;
    border-left: 1rem solid transparent;
    border-right: 1rem solid transparent;
    border-bottom: 1rem;
    content: "";
}

h3.bgDesp{
	position: relative;
	padding: 0.1em 0.5em;
	font-size: 1.4rem;	
	background: -moz-linear-gradient(to right, rgb(255, 186, 115), transparent);
	background: -moz-linear-gradient(to right, var(--bg-color), transparent);
	background: -webkit-linear-gradient(to right, rgb(255, 186, 115), transparent);
	background: -webkit-linear-gradient(to right, var(--bg-color), transparent);
	background: linear-gradient(to right, rgb(255, 186, 115), transparent);
	background: linear-gradient(to right, var(--bg-color), transparent);
	color: #545454;
	color: var(--font-color-on);
}

h4.headerBg {
	color: var(--font-color);
    font-size: 1.2rem;
    line-height: 2rem;
    margin: 3.5rem 0 1.2rem 0;
    padding: 0.5rem 0.3rem 0.5rem 1rem;
    border-left: 1rem solid #179C17;
    border-bottom: 2px solid #179C17;
    font-weight: bold;
}

h5.lineDsp{
	font-size: 1.2rem;
	position: relative;
	padding: 0.25em 0;
	color: var(--font-color);
}
h5.lineDsp:after {
	content: "";
	display: block;
	height: 4px;
	background: -moz-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: -moz-linear-gradient(to right, var(--bg-color), transparent);
	background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: -webkit-linear-gradient(to right, var(--bg-color), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right,  var(--bg-color), transparent);
}

h6.en {
	font-size: 1.1rem;
	position: relative;
	color: #333333;
	color: var(--font-color);
	text-shadow: 0 0 2px white;
}
h6.en:before {
	content: "";
	position: absolute;
	background: #9de5ff;
	background: var(--bg-color);
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	top: 50%;
	left: -0.85rem;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: -1;
}
h6.en:first-letter {
	font-size: 1.5rem;
	color: var(--font-color-on);
}
</style>
<meta charset="utf-8">
<body style="padding-left: 1rem;">
<h1 class="hashi">H1：橋のようなタイトル</h1>
<br>

<h2 class="tip">H2：吹き出し小見出し</h2>
<br>

<h3 class="bgDesp">H3：消えていく背景色</h3>
<br>

<h4 class="headerBg">H4：頭に強調色付く小見出し</h4>
<br>

<h5 class="lineDsp">H5：消えていく下線</h5>
<br>

<h6 class="en">H　6：頭に円のような背景色</h6>
</body>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

10人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/270.html

閉じる

CSSで(小)見出しのデザイン例まとめ_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！