CYBER@GARDEN

『Web標準の教科書』各章

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

第5章 第4節(p.366-377)

[XHTML1.0]
<html xml:lang="ja" lang="ja">
[XHTML1.1]
<html xml:lang="ja">
[XHTML1.0]
<a href="./index.html" name="home" id="home">
[XHTML1.1]
<a href="./index.html" id="home">
[XHTML1.0 Transitional/Frameset]
<body background="images/bcg.gif">
[XHTML1.1]
body { background-image: url("images/bcg.gif") }
[XHTML1.0 Transitional/Frameset]
<body bgcolor="white">
[XHTML1.1]
body { background-color: white }
[XHTML1.0 Transitional/Frameset]
<body text="black">
[XHTML1.1]
body { color: black }
[XHTML1.0 Transitional/Frameset]
<body link="blue" vlink="purple" alink="red">
[XHTML1.1]
a:link    { color: blue }
a:visited { color: purple }
a:hover   { color: maroon }
a:active  { color: red }
[XHTML1.0 Transitional/Frameset]
<br clear="all" />
[XHTML1.1]
p { clear: both }
[XHTML1.0 Transitional/Frameset]
<caption align="bottom">
[XHTML1.1]
caption { caption-side: bottom }
[XHTML1.0 Transitional/Frameset]
<div align="center">
  <p>中央揃え</p>
</div>
[XHTML1.1]
p { text-align: center }
:
:
<p>中央揃え</p>
[XHTML1.1]
p { 
  margin-right: auto;
  marign-left: auto;
  }
:
:
<p>中央揃え</p>
[XHTML1.0 Transitional/Frameset]
<h3 align="center">中央揃え</h3>
[XHTML1.1]
h3 { text-align: center }
:
:
<h3>中央揃え</h3>
[XHTML1.1]
h3 { 
  margin-right: auto;
  marign-left: auto;
  }
:
:
<h3>中央揃え</h3>
[XHTML1.0 Transitional/Frameset]
<hr align="center" />
[XHTML1.1]
hr { 
  margin-right: auto;
  marign-left: auto;
  }
:
:
<hr />
[XHTML1.0 Transitional/Frameset]
<hr noshade="noshade" size="3" />
[XHTML1.1]
hr { border: 3px solid }
:
:
<hr />
[XHTML1.0 Transitional/Frameset]
<hr width="80%" />
[XHTML1.1]
hr { width: 80% }
:
:
<hr />
[XHTML1.0 Transitional/Frameset]
<img src="./images/logo.gif" alt="サイバーガーデン" align="middle" />
[XHTML1.1]
img { vertical-align: middle }
:
:
<img src="./images/logo.gif" alt="サイバーガーデン" />
[XHTML1.0 Transitional/Frameset]
<img src="./images/logo.gif" alt="サイバーガーデン" align="left" />
[XHTML1.1]
img { float: left }
:
:
<img src="./images/logo.gif" alt="サイバーガーデン" />
[XHTML1.0 Transitional/Frameset]
<img src="./images/logo.gif" alt="サイバーガーデン" border="2" />
[XHTML1.1]
img { border: 2px solid }
:
:
<img src="./images/logo.gif" alt="サイバーガーデン" />
[XHTML1.0 Transitional/Frameset]
<img src="./images/logo.gif" alt="サイバーガーデン" hspace="10"
vspace="5" />
[XHTML1.1]
img { margin: 10px 5px }
:
:
<img src="./images/logo.gif" alt="サイバーガーデン" />
[XHTML1.0 Transitional/Frameset]
<input type="text" value="" size="30" align="middle" />
[XHTML1.1]
input { vertical-align: middle }
:
:
<input type="text" value="" size="30" />
[XHTML1.0 Transitional/Frameset]
<input type="text" value="" size="30" align="left" />
[XHTML1.1]
input { float: left }
:
:
<input type="text" value="" size="30" />
[XHTML1.0 Transitional/Frameset]
<ul>
  <li type="disc">項目1</li>
  <li type="circle">項目2</li>
  <li type="square">項目3</li>
</ul>
[XHTML1.1]
li.di { list-style-type: disc }
li.ci { list-style-type: circle }
li.sq { list-style-type: square }
  :
  :
<ul>
  <li class="di">項目1</li>
  <li class="ci">項目2</li>
  <li class="sq">項目3</li>
</ul>
[XHTML1.0]
<map name="c002" id="c002">
[XHTML1.1]
<map id="c002">
[XHTML1.0 Transitional/Frameset]
<object data="./images/logo.gif" align="middle">サイバーガーデン
</object>
[XHTML1.1]
object { vertical-align: middle }
:
:
<object data="./images/logo.gif">サイバーガーデン</object>
[XHTML1.0 Transitional/Frameset]
<object data="./images/logo.gif" align="middle">サイバーガーデン
</object>
[XHTML1.1]
object { float: left }
:
:
<object data="./images/logo.gif">サイバーガーデン</object>
[XHTML1.0 Transitional/Frameset]
<object data="./images/logo.gif" border="2">サイバーガーデン</object>
[XHTML1.1]
object { border: 2px solid }
:
:
<object data="./images/logo.gif">サイバーガーデン</object>
[XHTML1.0 Transitional/Frameset]
<object data="./images/logo.gif" hspace="10" vspace="5">サイバーガー
デン</object>
[XHTML1.1]
object { margin: 10px 5px }
:
:
<object data="./images/logo.gif">サイバーガーデン</object>
[XHTML1.0 Transitional/Frameset]
<ol type="1">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ol>
[XHTML1.1]
ol { list-style-type: decimal }
[XHTML1.0 Transitional/Frameset]
<h3 align="center">中央揃え</h3>
[XHTML1.1]
p { text-align: center }
:
:
<p>中央揃え</p>
[XHTML1.1]
p { 
  margin-right: auto;
  marign-left: auto;
  }
:
:
<p>中央揃え</p>
[XHTML1.0 Transitional/Frameset]
<pre width="50">
[XHTML1.1]
pre { width: 50em }
[XHTML1.0 Transitional/Frameset]
<script language="JavaScript1.2">
[XHTML1.1]
<script type="text/javascript">
[XHTML1.0 Transitional/Frameset]
<table summary="Web用語の一覧表。1列目が用語。2列目が説明。"
align="right">
[XHTML1.1]
table { float: left }
:
:
<table summary="Web用語の一覧表。1列目が用語。2列目が説明。">
[XHTML1.0 Transitional/Frameset]
<table summary="Web用語の一覧表。1列目が用語。2列目が説明。"
bgcolor="gray">
[XHTML1.1]
table { background-color: gray }
:
:
<table summary="Web用語の一覧表。1列目が用語。2列目が説明。">
[XHTML1.0 Transitional/Frameset]
<td bgcolor="white">
[XHTML1.1]
td { background-color: white }
[XHTML1.0 Transitional/Frameset]
<td height="30">
[XHTML1.1]
td { height: 30px }
[XHTML1.0 Transitional/Frameset]
<td nowrap="nowrap">
[XHTML1.1]
td { white-space: nowrap }
[XHTML1.0 Transitional/Frameset]
<td width="20%">
[XHTML1.1]
td { width: 20% }
[XHTML1.0 Transitional/Frameset]
<tr bgcolor="silver">
[XHTML1.1]
tr { background-color: white }
[XHTML1.0 Transitional/Frameset]
<ul type="square">
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>
[XHTML1.1]
ul { list-style-type: square }