[ CSS ] テキストを画像に置き換えるサンプル

ブログのタイトルなんかでよく見かける「CSS でテキストを画像に置き換える」テクニック。

動作サンプル

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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><a href="#">サンプルのブログ</a></h1>
</body>
</html>