Home > P.140

P.140

Last Modified: 2008年11月24日 17:03

このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。

また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。（ ZIP アーカイブには解説文は含まれていません。）

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        4 章
        
        P.140
前： P.139
次： P.141

解説 (1)

float プロパティは画像以外のさまざまな要素に指定できますが、置換要素以外の要素への適用には同時に width プロパティで幅を明示しなければなりません。このことを踏まえ、画像と同様に table 要素を文章の横に配置させてみましょう。

XHTML

<table summary="訪問者の解像度調査">
	<caption>表1.解像度ランキング</caption>
	<tr><th>Rank</th><th>Screen</th><th>Count</th></tr>
	<tr><td>1</td><td>1024 × 768</td><td>9232</td></tr>
	<tr><td>2</td><td>1280 × 1024</td><td>6855</td></tr>
	<tr><td>3</td><td>1600 × 1200</td><td>882</td></tr>
</table>
<p>レイアウトを製作するときには、ウェブサイトの情報が正しく伝えられるよう、閲覧者の環境を考えてデザインします。</p>
<p>表.1は、先月に私のサイトを訪問した人の画面解像度の上位3です。1024x768の設定がもっとも多く、次に1280x1024の設定が3000の差で2位につけている。3位は1600x1200の高解像度ですが、その数は2位からだいぶはなれており、1位と2位がほとんどを占めていることがわかります。</p>

Download(1)

4-1-2.html

解説 (2)

table 要素に width と float: right を指定します。

CSS

p {
  margin: 0.5em 16px;
  line-height: 1.5;
  color: #333;
  font-size: 80%;
}

table {
  margin: 0.5em 8px;
  border: 1px solid #999;
  float: right;
  width: 55%;
  background-color: #eee;
  font-size: 80%;
}

caption {
  margin: 0 8px;
  padding: 0.2em 0;
  color: #fff;
  background-color: #909687;
}

th,
td {
  border: 1px solid #ddd;
  background-color: #fff;
}