初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS 文字を隠し文字にする

HTMLでマークアップしている際に

<h1></h1>

にロゴの画像を使用したい場合があるかと思います。
画像だけ貼って文字を入力しないと文書構造的にも
あまりよくありません。
画像も文字も入力すると下記の画像のようになってしまいます。

f:id:bellsmarket:20150405190504p:plain:w500
そんな時に文字を入力して隠してしまえば、画像も文字も両方とも
入れることができます。

CSSで文字を消す方法が三つありますのでそれぞれ記述します。

<body>
<h1><span>猫の画像です。</span></h1>
</body>
</html> 
h1 {
	background:url(img/cat01.jpg) no-repeat left top;
	width:400px;
	height:300px;
	text-indent:-9999px;
}
h1 {
	background:url(img/cat01.jpg) no-repeat left top;
	width:400px;
	height:300px;
	text-indent:100%;
	white-space: nowrap;
	overflow: hidden;
}
h1 {
	background:url(img/cat01.jpg) no-repeat left top;
	width:400px;
	height:300px;

}
h1 span {
	visibility: hidden;
}

どれを使用しても文字を消せます。
1番目の方法は検索エンジン的にあまり使用しないほうが良いので
2番目の方法を採用すると良いでしょう。

topへ戻る