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>