home > 『Web標準の教科書』読者サポートページ > 第3章 第4節
第3章 第4節（p.124-144）
body {
color: black;
background-color: white;
}
* {
color: black;
background-color: white;
}
p.note { color: red }
：
：
<p class="note">Webコンテンツ・アクセシビリティ・ガイドライン1.0に
よれば、img要素には必ずalt属性をつけるべきとされている。</p>
<p class="note">Webコンテンツ・アクセシビリティ・ガイドライン1.0に
よれば、table要素には必ずsummary属性をつけるべきとされている。</p>
.note { color: red }
：
：
<p class="note">Webコンテンツ・アクセシビリティ・ガイドライン1.0に
よれば、img要素には必ずalt属性をつけるべきとされている。また、表関
連要素には以下の属性をつけるべきとされている。</p>
<ul class="note">
<li>table要素のsummary属性</li>
<li>th要素のabbr属性</li>
</ul>
p.note { color: red }
p.emph { text-decoration: underline }
：
：
<p class="note emph">Webコンテンツ・アクセシビリティ・ガイドライン
1.0によれば、img要素には必ずalt属性をつけるべきとされている。</p>
<p class="note emph">Webコンテンツ・アクセシビリティ・ガイドライン
1.0によれば、table要素には必ずsummary属性をつけるべきとされている。
</p>
p.note.emph { color: red; text-decoration: underline; }
：
：
<p class="note emph">Webコンテンツ・アクセシビリティ・ガイドライン
1.0（WCAG 1.0）によれば、img要素には必ずalt属性をつけるべきとされて
いる。</p>
div#gnavi { font-size: small }
：
：
<div id="gnavi">
<ul>
<li><a href="./references/">リファレンス</a></li>
<li><a href="./tips/">ティップス</a></li>
<li><a href="./reported/">レポート</a></li>
<li><a href="./selected/">厳選ツール</a></li>
</ul>
</div>
a[name="c01"] { color: maroon }
a#c01 { color: purple }
：
：
<a href="./chapter1.html" name="c01" id="c01">第1章 Web作成の前に</a>
a[name="c01"] { color: maroon !important }
a#c01 { color: purple }
：
：
<a href="./chapter1.html" name="c01" id="c01">第1章 Web作成の前に</a>
span.red { color: red }
：
：
<p>XHTMLでは<span class="red">構造</span>を指定し、CSSでは
<span class="red">表現</span>を指定する。</p>
h3[id] { color: olive }
：
：
<h3 id="r508">米国リハビリテーション法508条について</h3>
h3[id="r508"] { color: olive }
：
：
<h3 id="r508">米国リハビリテーション法508条について</h3>
p[class~="note"] { color: red }
：
：
<p class="w3c wcag note">Webコンテンツ・アクセシビリティ・ガイドラ
イン1.0（WCAG 1.0）によれば、img要素には必ずalt属性をつけるべきとさ
れている。</p>
*[lang|="en"] { font-family: Verdana, Arial, sans-serif }
：
：
<p>
<span lang="en-US">Time flies like an arrow.</span><br />
<span lang="ja">光陰矢のごとし</span>
</p>
<p>
<span lang="fr">La vie en rose.</span><br />
<span lang="ja">バラ色の人生</span>
</p>
*[xml:lang|="en"] { font-family: Verdana, Arial, sans-serif }
div.note p { color: red }
：
：
<div class="note">
<p>Webコンテンツ・アクセシビリティ・ガイドライン1.0（<abbr
title="Web Content Accessibility Guidelines 1.0">WCAG 1.0
</abbr>）によれば、img要素には必ずalt属性をつけるべきとされて
いる。</p>
</div>
div.note p abbr { text-decoration: underline }
div * p { color: blue ]
blockquote.wcag > p { font-size: small }
：
：
<blockquote class="wcag" cite="http://www.w3.org/TR/WAI-WEBCONTENT">
<p>テキストによるコンテンツは、コンピュータに読み上げさせること、
点字で表現すること、目で見ることができる。つまり、テキストを使用す
ることで、これら3種類の方法を用いてそれぞれ異なる感覚（聴覚・触覚
・視覚）で利用できるようになり、さまざまな種類の感覚障害のあるユー
ザーに対して、情報をアクセシビリティの高い状態に保つことができる。
</p>
</blockquote>
blockquote.wcag > p > abbr { text-decoration: underline }
blockquote.wcag > ul p { font-size: small }
h1 + h2 { color: green }
：
：
<h1>アクセシビリティ概論</h1>
<h2>Webコンテンツ・アクセシビリティ・ガイドライン1.0</h>
h1 + h2 + h3 { color: green }
h1.chapter + h2.section + h3.subsection { color: green }
th, td { font-size: small }
div#title dl { display: none }
div#title p { display: none }
div#title dl, div#title p { display: none }
object[type^="image/"] { border: 1px solid gray }
a[href$=".html"] { background-color: red }
p[title*="hello"] { background-color: yellow }
h1 ~ pre { border: 1px solid blue }
div > p:first-child { text-indent: 0 }
：
：
<p>注意文の前のパラグラフ。</p>
<div class="note">
<p>注意文の最初のパラグラフ。</p>
</div>
div > p:first-child { text-indent: 0 }
：
：
<p>注意文の前のパラグラフ。</p>
<div class="note">
<h3>注意</h3>
<p>注意文の最初のパラグラフ。</p>
</div>
p:first-child em { font-weight: bold }
：
：
<div class="note">
<p>注意文の<em>最初</em>のパラグラフ。</p>
<p>注意文の<em>2番目</em>のパラグラフ。</p>
</div>
:link { color: blue }
a:link { color: blue }
a[href]:link { color: blue }
:visited { color: purple }
a:visited { color: purple }
a[href]:visited { color: purple }
a.external:link { color: blue }
a.external:visited { color: purple }
：
：
<a class="external" href="http://www.cybergarden.net/">サイバーガー
デン</a>
div#gnavi a:link { color: blue }
div#gnavi a:visited { color: purple }
：
：
<div id="gnavi">
<ul>
<li><a href="./references/">リファレンス</a></li>
<li><a href="./tips/">ティップス</a></li>
<li><a href="./reported/">レポート</a></li>
<li><a href="./selected/">厳選ツール</a></li>
</ul>
</div>
a:link { color: blue }
a:visited { color: purple }
a:hover { color: yellow }
a:active { color: red }
a:focus { background: yellow }
a:focus:hover { background: fuchsia }
:focus { outline: 2px dotted red }
*:lang(en) { font-family: Verdana, Arial, sans-serif }
：
：
<p>
<span lang="en-US">Time flies like an arrow.</span><br />
<span lang="ja">光陰矢のごとし</span>
</p>
<p>
<span lang="fr">La vie en rose.</span><br />
<span lang="ja">バラ色の人生</span>
</p>
:lang(en) q { quotes: "\0022" "\0022" "\0027" "\0027" }
:lang(ja) q { quotes: "\300C" "\300D" "\300E" "\300F" }
q:before { content: open-quote }
q:after { content: close-quote }
：
：
<p lang="en-US">He said <q>I was called <q>chicken<q> by her</q>
with little sorrow yesterday.</p>
<p lang="ja">彼は昨日、<q>彼女から<q>卑怯者</q>といわれてしまったよ
</q>とこぼしていた。</p>
p:first-line { font-weight: bold }
：
：
<p>ユーザーエージェント（user agent）とは、Webコンテンツを収集・表
示するソフトウエアである。ユーザーエージェントには、ブラウザ、特定
のメディアに対応したプラグイン、支援技術などが含まれる。</p>
p:first-letter {
float: left;
font-weight: bold;
font-size: 200%;
}
：
：
<p>ユーザーエージェント（user agent）とは、Webコンテンツを収集・表
示するソフトウエアである。ユーザーエージェントには、ブラウザ、特定
のメディアに対応したプラグイン、支援技術などが含まれる。</p>
p:first-letter {
float: left;
font-weight: bold;
font-size: 200%;
}
：
：
<p>"ユーザーエージェント"（user agent）とは、Webコンテンツを収集・
表示するソフトウエアである。ユーザーエージェントには、ブラウザ、特
定のメディアに対応したプラグイン、支援技術などが含まれる。</p>
p { color: black }
p:first-line { color: blue }
p:first-letter { color: red }
p.note:before { content: "Note! " }
：
：
<p class="note">ユーザーエージェント（user agent）とは、Webコンテ
ンツを収集・表示するソフトウエアである。ユーザーエージェントには、
ブラウザ、特定のメディアに対応したプラグイン、支援技術などが含まれ
る。</p>
p.note:before { content: "Note! " }
p.note:first-letter { color: red }
p.note:before { content: "Note! " }
p.note { border: 1px solid blue }
q { font-style: italic }
q:before {
content: "Note! ";
color: green;
}
body:after {
content: "終了";
display: block;
margin-top: 20px;
text-align: center;
}