システム開発ブログ

Webコンサルティング部

Webサイト構築・Web戦略

透過PNGを使用してテキストにグラデーションを重ねる

透過PNGを使用した小技を紹介します。

h1等の見出しにアクセントをつけたい場合、多くの場合画像を使用します。
ですが、SEOに配慮し、テキストのまま見出しを出したい等、要望があった場合、テキストの上に透過PNGを重ね、見出しにアクセントをつけることができます。

考え方としては、テキストの前にspan要素を記述し、そのspan要素の背景に透過PNGを指定し、テキストの上に重なるようにします。

以下がそのソースになります。

テキストTEXT

h1 {
	font-size: 48px;
	font-weight: bold;
	color: #003366;
	line-height: 1;
	height: 48px;
	width: 400px;
}
text_01.png

上記のソースに以下のCSSを追加します。
/* 絶対配置でテキストの上に重なるようにする */
.g-png span {
	display: block;
	position: absolute;
	background-image: url(img/gradation.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 48px;
	width: 400px;
	left: 0px;
	top: 0px;
}
text_02.png

以下が使用した透過PNGになります。
(分かりやすいよう、背景は黒にしてあります)

gradation.png


※IE6では透過PNGに対応しておりませんので、JavaScript等で対応して下さい。

システム周りのお悩みを解決します

まずは無料ダウンロード

この記事に関連する記事の一覧


システム開発ブログ

Twitterでilovex_officialをフォローしてください

カテゴリー

以前の部署別ブログ

ページのトップ