/ Webｺﾝｻﾙﾃｨﾝｸﾞ部　  Tweet シェア

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

川本 (2010年6月28日 21:39)
Webｺﾝｻﾙﾃｨﾝｸﾞ部 / Webサイト構築・Web戦略

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

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

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

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

テキストTEXT

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

上記のソースに以下の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;
}

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

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

「システム開発ブログ」へのコメントやご意見等ありましたら、ファンページまでお願いします。 Facebook のファンページ

[PR]
Movable Typeを使用したWebサイト構築

Movable Typeを使用したWebサイト構築

システム開発・一括受託開発。見積依頼受付中

システム開発専用サイト

システム開発の流れ・手順、実績など。アイロベックスのシステム開発を紹介。

VB .NETを主言語としたWebアプリケーションの開発

要件分析から保守まで、お客様の現場での問題解決だけでなく、IT経営の援護者としてトータルソリューションサービスを提供しています。

MovableType を使ったウェブサイト構築

魅力あるウェブサイトデザイン、構成はもとよりMovableTypeを使用したウェブサイトの作成、JAVA、CGIによる注文フォームの作成等、ビジネスを強力にサポートします。

Windowsフォルダーアクセス権限確認ツール

フォルダーアクセス権限を一目で確認。使用版を無償でご利用いただけます。

Webとリアルをつなぐコンテンツマネージメントシステム

Webサイト・モバイルサイト・チラシ（PDF）・カタログ（InDesign）を、簡単かつ正確に作成できます。

「システム開発ブログ」の更新情報をTwitterで。

Twitter公式アカウントに認定されています

「システム開発ブログ」の更新情報をTwitterで。ぜひ、フォローをお願いします。