『Web標準の教科書』各章

第3章第6節（p.157-193）

<div>
あるテキスト
<p>パラグラフとして定義されているテキスト</p>
あるテキスト
</div>

<p>あるテキスト<em>強調したテキスト</em>あるテキスト</p>

dt { display: compact; font-weight: bold; }
dd { margin-left: 6em }
：
：
<dl>
  <dt>ブラウザ</dt>
  <dd>ユーザーエージェントの項を参照。</dd>
  <dt>オーサリングツール</dt>
  <dd>Web上で公開するコンテンツの制作に利用されるソフトウエア。</dd>
</dl>

h3 { display: run-in }
：
：
<h3>アクセシビリティについて</h3>
<p>ここからは、アクセシビリティの重要ポイントについて説明する。</p>

div#gnavi li { display: inline; list-style: none; }
p.lnavi a    { display: block }
img          { display: none }

h1 {
  color: silver;
  font-size: 70px;
  text-align: center;
  }
h2 {
  position: relative;
  top: -125px;
  padding: 10px;
  color: white;
  background-color: gray;
  text-align: center;
  }
 ：
 ：
<h1>About<br />CSS</h1>
<h2>CSSに関する詳細説明</h2>
<h3>はじめに</h3>
<p>CSS（Cascading Style Sheet、スタイルシート）は、Webページの「表
現」をコントロールするための言語です。</p>

h1 {
  color: silver;
  font-size: 50px;
  }
h2 {
  position: absolute;
  top: 40px;
  left: 200px;
  width: 180px;
  margin: 0;
  padding: 10px;
  color: white;
  background-color: gray;
  text-align: center;
  }
 ：
 ：
<h1>About<br />CSS</h1>
<h2>CSSに関する詳細説明</h2>
<h3>はじめに</h3>
<p>CSS（Cascading Style Sheet、スタイルシート）は、Webページの「表
現」をコントロールするための言語です。</p>

p { margin: 15px }
img {
  float: left;
  margin: 15px;
  }
 ：
 ：
<p><img src="./images/grid.gif" alt="グリッドシステムのイメージ図"
width="160" height="120" />グリッドシステムは、ページの縦横に格子状
の線を引いたと仮定し、それらの線にそってコンテンツを配置する伝統的
なレイアウト手法である。意識しているかどうかに関わらず、大半のサイ
トがこのレイアウト手法に基づいて内容を配置しているといってよいだろ
う。コンテンツの規則的な配置が可能であり、ユーザーの視点が安定しや
すい整然としたレイアウトが実現できる。</p>

p {
  margin: 15px;
  padding: 10px;
  border: 3px solid gray;
  background-color: silver;
  }
img {
  float: left;
  margin: 15px;
  }
 ：
 ：
<p><img src="./images/grid.gif" alt="グリッドシステムのイメージ図"
width="160" height="120" />グリッドシステムは、ページの縦横に格子状
の線を引いたと仮定し、それらの線にそってコンテンツを配置する伝統的
なレイアウト手法である。</p>
<p>意識しているかどうかに関わらず、大半のサイトがこのレイアウト手法
に基づいて内容を配置しているといってよいだろう。コンテンツの規則的
な配置が可能であり、ユーザーの視点が安定しやすい整然としたレイアウ
トが実現できる。</p>

p {
  margin: 15px;
  padding: 10px;
  border: 3px solid gray;
  background-color: silver;
  }
img {
  float: left;
  margin: 15px;
  }
p.clr { clear: both }
 ：
 ：
<p><img src="./images/grid.gif" alt="グリッドシステムのイメージ図"
width="160" height="120" />グリッドシステムは、ページの縦横に格子状
の線を引いたと仮定し、それらの線にそってコンテンツを配置する伝統的
なレイアウト手法である。</p>
<p class="clr">意識しているかどうかに関わらず、大半のサイトがこのレ
イアウト手法に基づいて内容を配置しているといってよいだろう。コンテ
ンツの規則的な配置が可能であり、ユーザーの視点が安定しやすい整然と
したレイアウトが実現できる。</p>

p#z01 {
  z-index: 1;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 150px;
  height: 150px;
  padding: 10px;
  color: white;
  background: black;
  }
p#z02 {
  z-index: 2;
  position: absolute;
  top: 60px;
  left: 60px;
  width: 150px;
  height: 150px;
  padding: 10px;
  color: white;
  background: gray;
  }
p#z03 {
  z-index: 3;
  position: absolute;
  top: 110px;
  left: 110px;
  width: 150px;
  height: 150px;
  padding: 10px;
  color: black;
  background: silver;
  }
 ：
 ：
<p id="z01">重なり順序 1</p>
<p id="z02">重なり順序 2</p>
<p id="z03">重なり順序 3</p>

p#text01 {
  direction: ltr;
  unicode-bidi: normal;
  }
p#text02 {
  direction: rtl;
  unicode-bidi: bidi-override;
  }
：
：
<p id="text01">
Now, I live in Tokyo. When I was Young, I lived in Seattle. <br />
私は今、東京に住んでいる。昔はシアトルに住んでいた。
</p>
<p id="text02">
Now, I live in Tokyo. When I was Young, I lived in Seattle. <br />
私は今、東京に住んでいる。昔はシアトルに住んでいた。
</p>

p { margin: 15px }
p.note {
  float: right;
  width: 165px;
  padding: 15px;
  border: 2px dotted gray;
  }
：
：
<p>ユーザビリティを考えて、ページレイアウトはディスプレイサイズに依
存しない「リキッドレイアウト」が望ましいといえる。</p>

<p class="note">ディスプレイサイズに依存しない可変的なレイアウトを
リキッドレイアウト（liquid layout）、固定的なレイアウトをフィックス
ドレイアウト（fixed layout）という。</p>
：
：

p { margin: 15px }
img.abs {
  float: left;
  margin: 15px;
  width: 320px;
  height: 240px;
  }
：
：
<p><img class="abs" src="./images/grid.gif" alt="グリッドシステムの
イメージ図" width="160" height="120" />グリッドシステムは、ページの
縦横に格子状の線を引いたと仮定し、それらの線にそってコンテンツを配
置する伝統的なレイアウト手法である。</p>

p { margin: 15px }
img.rel {
  float: left;
  margin: 15px;
  width: 50%;
  height: 30%;
  }
：
：
<p><img class="rel" src="./images/grid.gif" alt="グリッドシステムの
イメージ図" width="160" height="120" />グリッドシステムは、ページの
縦横に格子状の線を引いたと仮定し、それらの線にそってコンテンツを配
置する伝統的なレイアウト手法である。</p>

p { margin: 15px }
p.note {
  float: right;
  width: 165px;
  min-width: 100px;
  max-width: 200px;
  padding: 15px;
  border: 2px dotted gray;
  }
：
：
<p>ユーザビリティを考えて、ページレイアウトはディスプレイサイズに依
存しない「リキッドレイアウト」が望ましいといえる。</p>

<p class="note">ディスプレイサイズに依存しない可変的なレイアウトを
リキッドレイアウト（liquid layout）、固定的なレイアウトをフィックス
ドレイアウト（fixed layout）という。</p>
：
：

p {
  font-size: 1.0em;
  line-height: 2.0em;
  }
：
：
<p>「フリーレイアウト」とは、キャンバスに絵を描くようにレイアウトす
る手法である。</p>

p {
  font-size: 12pt;
  line-height: 24pt;
  }
：
：
<p><img src="./images/free.gif" alt="フリーレイアウトのイメージ図"
width="160" height="120" />「フリーレイアウト」とは、キャンバスに絵
を描くようにレイアウトする手法である。</p>

p {
  border: 2px dotted gray;
  font-size: xx-large;
  }
span         { font-size: x-small }
#baseline    { vertical-align: baseline }
#middle      { vertical-align: middle }
#sub         { vertical-align: sub }
#super       { vertical-align: super }
#text-top    { vertical-align: text-top }
#text-bottom { vertical-align: text-bottom }
#top         { vertical-align: top }
#bottom      { vertical-align: bottom }
：
：
<p>Parent Inline Box
<span id="baseline">baseline</span>
<span id="middle">middle</span>
<span id="sub">sub</span>
<span id="super">super</span>
<span id="text-top">text-top</span>
<span id="text-bottom">text-bottom</span>
<span id="top">top</span>
<span id="bottom">bottom</span>
</p>

table {
  border-top: 1px solid gray;
  border-left: 1px solid gray;
  border-spacing: 0;
  }
td {
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  font-size: x-small;
  }
.first       { font-size: xx-large }
#baseline    { vertical-align: baseline }
#middle      { vertical-align: middle }
#top         { vertical-align: top }
#bottom      { vertical-align: bottom }
：
：
<table>
  <tr>
    <td class="first">First Cell</td>
    <td id="baseline">baseline</td>
    <td id="middle">middle</td>
    <td id="top">top</td>
    <td id="bottom">bottom</td>
  </tr>
<table>

第3章 第6節（p.157-193）

Chapters

第3章第6節（p.157-193）