CYBER@GARDEN

『Web標準の教科書』各章

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

第2章 第8節(p.69-82)

<h4>Web上で一般に利用される画像形式</h4>

<ul>
  <li>GIF(.gif)</li>
  <li>JPEG(.jpg/.jpeg)</li>
  <li>PNG(.png)</li>
</ul>
<h4>ディスプレイサイズ設定の上位3位</h4>

<ol>
  <li>1,028×768ピクセル</li>
  <li>1,280×1,024ピクセル</li>
  <li>800×600ピクセル</li>
</ol>
<p>一般的な視覚系ブラウザは、</p>

<ul>
  <li>Internet Explorer</li>
  <li>Netscape</li>
  <li>Mozilla</li>
  <li>Opera</li>
  <li>Safari</li>
</ul>

<p>の5つである。</p>
<p>一般的な視覚系ブラウザは、次の5つである。</p>

<ul>
  <li>Internet Explorer</li>
  <li>Netscape</li>
  <li>Mozilla</li>
  <li>Opera</li>
  <li>Safari</li>
</ul>
<ul>
  <li>Internet Explorer
    <ul>
      <li>4.x</li>
      <li>5.x</li>
      <li>6.x</li>
    </ul>
  </li>
    :
    :
</ul>
<dl>
  <dt>MIDI</dt>
  <dd>
    <p>Musical Instrument Digital Interfaceの略。音楽データの世界共
    通規格であり、Web上で一般に使用される音声ファイル形式。旋律を音
    符で表現するデータタイプであるため、ファイルサイズが小さく、Web
    上での配信に適してるという特徴がある。拡張子は「.mid」または
    「.midi」。</p>
    <p>なお厳密には、世界共通規格のMIDIはGM(General MIDI)であり、
    さらに上位互換の音源規格として、ヤマハ社のXG、ローランド社のGS
    などがある。</p>
  </dd>
  <dt>MP3</dt>
  <dd>
    <p>MPEG Audio Layer-3の略。映像データの圧縮方式であるMPEG-1のう
    ち、音声データの圧縮技術のみを適用して作成される音声ファイル形
    式。拡張子は「.mp3」。</p>
    <p>CD並の音質を保ったまま、無圧縮の WAVEファイルと比べてファイ
    ルサイズを約1/11まで圧縮できる(下位技術であるMP1は約1/4、MP2は
    約1/7程度の圧縮率)。</p>
  </dd>
</dl>
<dl>
  <dt>2005年2月15日</dt>
  <dd>Webデザイン講座に<a href="./design/color_samples.html">カラー
  サンプル</a>を追加。</dd>
  <dt>2005年2月10日</dt>
  <dd>Webコンテンツ講座に<a href="./contents/copyright.html">コンテ
  ンツと著作権</a>を追加。</dd>
</dl>
<dl>
  <dt>Webデザインリファレンス</dt>
  <dd>HTML/XHTML辞典</dd>
  <dd>CSS辞典</dt>
  <dd>Web文字/記号辞典</dd>
  <dd>Webカラー辞典</dd>
  <dd>Webメディア辞典</dd>
</dl>
<table>
  <tr>
    <th>ブラウザ名</th><th>割合</th>
  </tr>
  <tr>
    <td>Internet Explorer</td><td>94.10%</td>
  </tr>
  <tr>
    <td>Netscape</td><td>3.61%</td>
  </tr>
  <tr>
    <td>Opera</td><td>1.13%</td>
  </tr>
  <tr>
    <td>Mozilla</td><td>0.79%</td>
  </tr>
  <tr>
    <td>その他</td><td>0.37%</td>
  </tr>
</table>
<table summary="ブラウザの利用者割合に関する独自調査。
2004年第2四半期が対象。1列目がブラウザ名、2列目が割合。">
  <tr>
    <th abbr="ブラウザ">ブラウザ</th>
    <th abbr="割合">割合</th>
  </tr>
    :
    :
<table summary="ブラウザの利用者割合に関する独自調査。
2004年第2四半期が対象。1列目がブラウザ名、2列目が割合。">
  <caption>ブラウザの利用者割合</caption>
  <tr>
    <th abbr="ブラウザ">ブラウザ</th>
    <th abbr="割合">割合</th>
  </tr>
   :
   :
table   { caption-side: right }
caption { text-align: right }
<table summary="ブラウザの利用者割合に関する独自調査。
2004年第2四半期が対象。1列目がブラウザ名、2列目が割合。"
border="1" cellspacing="2" cellpadding="4">
   :
   :
table {
  width: 100%;
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-spacing: 0;
  }
thead { border-bottom: 2px dotted #666666 }
tfoot { border-top: 2px dotted #666666 }
th, td {
  border-right: 1px solid #000000;
  border-bottom: 2px solid #000000;
  padding: 5px;
  }
<table summary="ブラウザの利用者割合に関する独自調査。
2004年第2四半期が対象。1列目がブラウザ名、2列目が割合。">
  <caption>ブラウザの利用者割合</caption>
  <thead>
    <tr>
      <th abbr="ブラウザ">ブラウザ</th>
      <th abbr="割合">割合</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>合計</td><td>100%</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Internet Explorer</td><td>94.10%</td>
    </tr>
     :
     :
  </tbody>
</table>
<table summary="ブラウザの利用者割合に関する独自調査。
2004年第2四半期が対象。1列目がブラウザ名、2列目が割合。">
  <caption>ブラウザの利用者割合</caption>
  <colgroup span="2">
    <col class="brouwsers" />
    <col class="versions" />
  </colgroup>
  <col class="percentage" />
  <thead>
    <tr>
      <th abbr="ブラウザ">ブラウザ</th>
      <th abbr="バージョン">バージョン</th>
      <th abbr="割合">割合</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td colspan="2">合計</td><td>100%</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Internet Explorer</td><td>6.x</td><td>83.24%</td>
    </tr>
    <tr>
      <td>Internet Explorer</td><td>5.x</td><td>10.76%</td>
    </tr>
    <tr>
      <td>Internet Explorer</td><td>4.x</td><td>0.10%</td>
    </tr>
    <tr>
      <td colspan="2">小計</td><td>93.10%</td>
    </tr>
     :
     :
  </tbody>
</table>
  :
  :
<tbody>
  <tr>
    <td rowspan="3">Internet Explorer</td><td>6.x</td><td>83.24%</td>
  </tr>
  <tr>
    <td>5.x</td><td>10.76%</td>
  </tr>
  <tr>
    <td>4.x</td><td>0.10%</td>
  </tr>
  <tr>
    <td colspan="2">小計</td><td>93.10%</td>
  </tr>
   :
   :
</tbody>
   :
   :
  :
  :
<tbody>
  <tr>
    <td rowspan="3" valign="top">Internet Explorer</td>
    <td>6.x</td><td char="." charoff="10">83.24%</td>
  </tr>
  <tr>
    <td>5.x</td><td char="." charoff="10">10.76%</td>
  </tr>
  <tr>
    <td>4.x</td><td char="." charoff="10">0.10%</td>
  </tr>
  <tr>
    <td colspan="2">小計</td>
    <td char="." charoff="10">93.10%</td>
  </tr>
   :
   :
</tbody>
   :
   :
th { text-align: center; vertical-align: middle; }
td { text-align: left; vertical-align: top; }
   :
   :
<thead>
  <tr>
    <th id="brs" abbr="ブラウザ">ブラウザ</th>
    <th id="ver" abbr="バージョン">バージョン</th>
    <th id="pct" abbr="割合">割合</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td headers="brs ver" colspan="2">合計</td>
    <td headers="pct">100%</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td headers="brs" rowspan="3">Internet Explorer</td>
    <td headers="ver">6.x</td>
    <td headers="pct">83.24%</td>
  </tr>
  <tr>
    <td headers="ver">5.x</td>
    <td headers="ver">10.76%</td>
  </tr>
  <tr>
    <td headers="ver">4.x</td>
    <td headers="pct">0.10%</td>
  </tr>
  <tr>
    <td headers="brs ver" colspan="2">小計</td>
    <td headers="pct">93.10%</td>
  </tr>
   :
   :
</tbody>
   :
   :
   :
   :
<thead>
  <tr>
    <th scope="col" abbr="ブラウザ">ブラウザ</th>
    <th scope="col" abbr="バージョン">バージョン</th>
    <th scope="col" abbr="割合">割合</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td colspan="2">合計</td><td>100%</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td rowspan="3">Internet Explorer</td><td>6.x</td><td>83.24%</td>
  </tr>
  <tr>
    <td>5.x</td><td>10.76%</td>
  </tr>
  <tr>
    <td>4.x</td><td>0.10%</td>
  </tr>
  <tr>
    <td colspan="2">小計</td><td>93.10%</td>
  </tr>
   :
   :
</tbody>
   :
   :
   :
   :
<thead>
  <tr>
    <th id="brs" axis="視覚系" abbr="ブラウザ">ブラウザ</th>
    <th id="ver" axis="視覚系" abbr="バージョン">バージョン</th>
    <th id="pct" abbr="割合">割合</th>
  </tr>
</thead>
<tfoot>
  <tr>
    <td headers="brs ver" colspan="2">合計</td>
    <td headers="pct">100%</td>
  </tr>
</tfoot>
<tbody>
  <tr>
    <td headers="brs" rowspan="3">Internet Explorer</td>
    <td headers="ver">6.x</td>
    <td headers="pct">83.24%</td>
  </tr>
  <tr>
    <td headers="ver">5.x</td>
    <td headers="ver">10.76%</td>
  </tr>
  <tr>
    <td headers="ver">4.x</td>
    <td headers="pct">0.10%</td>
  </tr>
  <tr>
    <td headers="brs ver" colspan="2">小計</td>
    <td headers="pct">93.10%</td>
  </tr>
   :
   :
</tbody>
   :
   :