ホーム » ブログ » 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>


♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
1人
このエントリーをはてなブックマークに追加


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

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


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

アーカイブ @zanmai.net
check