『Web標準の教科書』各章

第3章第10節（p.232-250）

p { text-indent: 1em }
：
：
<p>Webは情報の作り手と受け手の間で直接的なコミュニケーションが成立
しやすいメディアです。一方、本やテレビなど他のメディアでは、極めて
限定的な状況でしか直接的なコミュニケーションは成立しません。</p>
<p>また、Webは基本的に誰でもアクセスできるオープンなスペースであり、
掲示板などを利用して多人数が同時に情報発信・情報交換することができ
ます。</p>
<p>このように考えると、Webは非常に双方向性（interactivity）が高いメ
ディアだといえます。</p>

p {
  margin-left: 2em;
  text-indent: -2em;
  }

div { text-align: center }
p   { width: 200px }

div { text-align: center }
p {
  width: 200px
  margin-right: auto;
  margin-left: auto;
  }

div { text-align: center }
p {
  width: 200px
  margin-right: 0;
  margin-left: auto;
  }

p { text-decoration: underline }
：
：
<p>
  Time flies like an arrow.<br />
  <span>光陰矢のごとし</span>
</p>

span { text-decoration: underline }
：
：
<p>
　Time flies like an arrow.<br />
  <span>光陰矢のごとし</span>
</p>

p {
  color: black;
  text-decoration: underline;
  }
span { color: silver }
：
：
<p>
　Time flies like an arrow.<br />
  <span>光陰矢のごとし</span>
</p>

p {
  color: black;
  text-decoration: underline;
  }
span {
  color: silver
  text-decoration: overline;
  }

p {
  color: black;
  text-decoration: underline;
  }
span {
  color: silver
  text-decoration: underline;
  }

div { text-decoration: underline }
：
：
<div>
  <p>
    Time flies like an arrow.<br />
    <span>光陰矢のごとし</span>
  </p>
</div>

div { text-decoration: underline }
em  { dixplay: block }
：
：
<div>
  <p>
    <span>
      Time flies like an arrow.
      <em>光陰矢のごとし</em>
    <span>
  </p>
</div>

p { text-decoration: underline }
span { font-size: x-large }
：
：
<p>
  Time flies like <span>an arrow</span>.<br />
  光陰<span>矢</span>のごとし<sup>※1</sup>
</p>

h2 { text-shadow: 0.2em 0.2em }
：
：
<h2>テキスト関連プロパティ</h2>

h2 { text-shadow: 3px 3px 5px red }
：
：
<h2>テキスト関連プロパティ</h2>

h2 { text-shadow: 3px 3px red, yellow -3px 3px 2px }
：
：
<h2>テキスト関連プロパティ</h2>

h2 {
  color: white;
  background: white; 
  text-shadow: black 0px 0px 5px;
  }
：
：
<h2>テキスト関連プロパティ</h2>

p.text1 {
  position: relative;
  z-index: 2;
  color: black;
  }
p.text2 {
  position: relative;
  top: -2em;
  left: 0.2em;
  z-index: 1;
  color: gray;
  }
：
：
<p class="text1">text-shadowプロパティはほとんどのブラウザでサポー
トされていない。</p>
<p class="text2">text-shadowプロパティはほとんどのブラウザでサポー
トされていない。</p>

p.drop {
  width: 100%;
  filter: DropShadow(color=gray, offx=3, offy=3, positive=1);
  }
：
：
<p class="drop">text-shadowプロパティはほとんどのブラウザでサポート
されていない。</p>

p.glow {
  width: 100%;
  color: white;
  filter: Glow(color=black, strength=3);
  }
：
：
<p class="glow">text-shadowプロパティはほとんどのブラウザでサポート
されていない。</p>

<p>white-spaceプロパティは、
要素内に含まれる空白文字の処理方法を
指定するために利用する。</p>

第3章 第10節（p.232-250）

Chapters

第3章第10節（p.232-250）