CYBER@GARDEN

『Web標準の教科書』各章

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

第3章 第7節(p.194-203)

div {
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  }
blockquote {
  width: 250px;
  height: 250px;
  margin: 30px;
  border: 2px dotted gray;
  }
p { margin: 15px; }
:
:
<div>
  <blockquote cite="http://www.w3.org/TR/WAI-WEBCONTENT">
    <p>テキストによるコンテンツは、コンピュータに読み上げさせるこ
    と、点字で表現すること、目で見ることができる。つまり、テキスト
    を使用することで、これら3種類の方法を用いてそれぞれ異なる感覚
    (聴覚・触覚・視覚)で利用できるようになり、さまざまな種類の感
    覚障害のあるユーザーに対して、情報をアクセシビリティの高い状態
    に保つことができる。</p>
  </blockquote>
</div>
div {
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  overflow: hidden;
  }
div {
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  overflow: scroll;
  }
div {
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  overflow: scroll;
  }
blockquote {
  width: 250px;
  height: 250px;
  margin: 30px;
  border: 2px dotted gray;
  overflow: scroll; 
  }
h3 {
  padding: 2px 0 2px 6px;
  border-bottom: 1px solid gray;
  border-left: 8px solid gray;
  }
dl {
  height: 240px;
  padding: 10px;
  border: 2px dotted gray;
  overflow: auto;
  }
dt { font-weight: bold }
:
:
<h3>用語集</h3>
<dl>
  <dt>MIDI</dt>
  <dd>
    <p>Musical Instrument Digital Interfaceの略。音楽データの世界共
    通規格であり、Web上で一般に使用される音声ファイル形式。旋律を音
    符で表現するデータタイプであるため、ファイルサイズが小さく、Web
    上での配信に適してるという特徴がある。拡張子は「.mid」または
    「.midi」。</p>
    <p>なお厳密には、世界共通規格のMIDIはGM(General MIDI)であり、
    さらに上位互換の音源規格として、ヤマハ社のXG、ローランド社のGS
    などがある。</p>
  </dd>
   :
   :
</dl>
div {
  overflow-x: auto;
  overflow-y: scroll;
  }
p { clip: rect(5px, 10px, 10px, 5px); }
p { clip: rect(5px, -5px, 10px, 5px); }
img {
  position: absolute;
  clip: rect(60px, 140px, 130px, 90px);
  }
:
:
<img src="./images/white_chair.jpg" alt="白い椅子" width="270"
height="300" />