CYBER@GARDEN

『Web標準の教科書』各章

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

第6章 第8節(p.414-420)

em[lang="ja"] { font-style: normal; }
em[lang="en"] { font-style: oblique; }
strong { font-weight: bold; }
:
:
<p>さて、<em xml:lang="ja" lang="ja">アクセシビリティ</em>
(<em xml:lang="en" lang="en">accessibility</em>)を考える上で
特に重要なのが、<strong>Webコンテンツ・アクセシビリティ・ガイドライ
ン1.0(WCAG 1.0)</strong>である。</p>
em.ja { font-style: normal; }
em.en { font-style: oblique; }
strong { font-weight: bold; }
:
:
<p>さて、<em class="ja">アクセシビリティ</em>(<em class="en">
accessibility</em>)を考える上で特に重要なのが、<strong>Webコン
テンツ・アクセシビリティ・ガイドライン1.0(WCAG 1.0)</strong>で
ある。</p>
abbr, acronym { border-bottom: 1px dotted; }
:
:
<p>href属性では<abbr title="Uniform Resource Identifier">URI</abbr>
を指定する。リンク先が特定のアプリケーションに依存する場合は、あわ
せてtype属性で<acronym title="Multipurpose Internet Mail Extension">
MIME</acronym>タイプを指定しておくとよい。</p>
abbr, acronym, span.abbr { border-bottom: 1px dotted; }
:
:
<p>href属性では<abbr title="Uniform Resource Identifier"><span
class="abbr">URI</span></abbr>を指定する。リンク先が特定のアプリケ
ーションに依存する場合は、あわせてtype属性で<acronym
title="Multipurpose Internet Mail Extension">MIME</acronym>タイプを
指定しておくとよい。</p>
pre {
  padding: 8px;
  border: 1px solid #9cc;
  background-color: #dee;
  }
code { font-family: "Courier New", monospace; }
:
:
<pre><code>
function addressBar(go) {
  if (go.url.value != "") {
    location.href = go.url.value
  } else {
    confirm("URLが入力されていません")
  }
}
</code></pre>
pre {
  padding: 8px;
  border: 2px solid #9cc;
  background: white url(/images/pre_bcg.gif) no-repeat top right;
  }
code { font-family: "Courier New", monospace; }
:
:
p:first-letter {
  float: left;
  background-color: #699;
  color: white;
  font-weight: bold;
  font-size: 200%;
  }
:
:
<p>XHTMLは、...</p>
<p>なお、...</p>
span.dropcaps {
  float: left;
  margin-right: 5px;
  margin-bottom: 5px;
  padding: 3px;
  border: 1px solid gray;
  background-color: #699;
  color: white;
  font-weight: bold;
  font-size: 200%;
  }
:
:
<p><span class="dropcaps">X</span>HTMLは、...</p>
<p><span class="dropcaps">な</span>お、...</p>
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 3px dotted #9cc;
  color: #699;
  font-size: large;
  text-transform: uppercase;
  }
:
:
<h2>Structural Markup Guide</h2>
h2 {
  margin-top: 15px;
  margin-bottom: 15px;
  border-bottom: 3px dotted #9cc;
  color: #699;
  font-size: large;
  font-variant: small-caps;
  }
:
:
<h2>Structural Markup Guide</h2>