サンプルコード ———————————————————————-
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>サンプルのブログ</title>
<style type="text/css"><!--
body {
margin: 0;
padding: 0;
}
h1 {
background-image: url("logo.png");
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #CCCCCC;
margin: 0;
padding: 15px;
font-size: 12px;
}
h1 a:link, h1 a:visited, h1 a:active, h1 a:hover {
display: block;
width: 180px;
height: 24px;
text-indent: -9999px;
text-decoration: none;
}
--></style>
</head>
<body>
<h1 id="i-0"><a href="#">サンプルのブログ</a></h1>
</body>
実際の動作サンプル ———————————————————————-
– サンプル
このテクニックの長所と短所 ———————————————————————-
– テキストは見えないだけなので、音声ブラウザに対応。 – CSS を無効にしたときは、テキストが表示される。 – 画像を非表示にしたときは、何も表示されない。 – 隠しテキストになってしまうため検索エンジンの評価は下がるかも？