CYBER@GARDEN

『Web標準の教科書』各章

home > 『Web標準の教科書』読者サポートページ > 第6章 第14節

第6章 第14節（p.453-458） 

div#logo {
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #699 url(/images/logo.gif) no-repeat top left;
  }
：
：
<div id="logo" title="サイバーガーデン"></div>

div#logo {
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #699 url(/images/logo.gif) no-repeat top left;
  }
div#logo p { display: none; }
：
：
<div id="logo" title="サイバーガーデン>
  <p>サイバーガーデン</p>
</div>

h1 {
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #699 url(/images/logo.gif) no-repeat top left;
  }
h1 span { display: none; }
：
：
<h1 title="サイバーガーデン">
  <span>サイバーガーデン</span>
</h1>

div#logo {
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #699 url(/images/logo.gif) no-repeat top left;
  text-indent: -9999px;
  }
div#logo p {
  margin: 0;
  padding: 0;
  }
：
：
<div id="logo" title="サイバーガーデン">
  <p>サイバーガーデン</p>
</div>

：
：
div#logo a {
  display: block;
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  }
：
：
<div id="logo" title="サイバーガーデン">
  <p><a href="/">サイバーガーデン</a></p>
</div>

：
：
div#logo a {
  display: block;
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  }
div#logo a:hover {
  background: #8bb url(/images/logo_hover.gif) no-repeat left top;
  }
：
：
<div id="logo" title="サイバーガーデン">
  <p><a href="/">サイバーガーデン</a></p>
</div>

h1 {
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  background: #699 url(/images/logo.gif) no-repeat top left;
  text-indent: -9999px;
  }
h1 a {
  display: block;
  width: 480px;
  height: 50px;
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  }
h1 a:hover {
  background: #8bb url(/images/logo_hover.gif) no-repeat left top;
  }
：
：
<h1 title="サイバーガーデン">
  <a href="/">サイバーガーデン</a>
</h1>