Home > P.205

P.205

  • Last Modified: 2011年8月13日 11:13

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

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

解説 (1)

絶対配置するボックスの基点は 1 つですが、複数のボックスを絶対配置するとき、それぞれの祖先ボックスを基点に設定することができます。 次の XHTML 文書をもとに、複数の基点を利用したレイアウト方法をみてみましょう。

4 つの div.section 内に、それぞれ、 h2 要素、 p 要素、そして記事のカテゴリーを示す p.category を順に記述します。

XHTML

<div class="section">
  <h2>Static</h2>
  <p>ボックスを通常配置します。ブロックボックスは<!-- 省略 --></p>
  <p>包含ブロックは、祖先ボックスの中から<!-- 省略 --></p>
  <p class="category">Category - Position</p>
</div>
<div class="section">
  <h2>Relative</h2>
  <p>ボックスを相対配置します。通常フローに従って<!-- 省略 --></p>
  <p class="category">Category - Position</p>
</div>
<div class="section">
  <h2>Absolute</h2>
  <p>ボックスを絶対配置します。positionの値にstatic以外の<!-- 省略 --></p>
  <p class="category">Category - Position</p>
</div>
<div class="section">
  <h2>Fixed</h2>
  <p>ボックスを固定配置します。absoluteと同様の配置方法<!-- 省略 --></p>
  <p class="category">Category - Position</p>
</div>

Download(1)

解説 (2)

まず、 position プロパティの指定をせずに、すべての要素を static な状態に指定して表示を確認してみましょう。

CSS

body {
  margin: 1em 20px;
  background-color: #ddd;
  font-family: "Trebuchet MS", sans-serif;
}

div.section {
  margin: 0.6em 16px;
  padding-bottom: 0.5em;
  background-color: #fff;
}

h2 {
  margin: 0;
  padding: 0.3em 16px;
  font-size: 80%;
  color: #fff;
  background-color: #666;
  font-weight: normal;
}

p {
  color: #666;
  margin: 0.8em 16px;
  font-size: 80%;
}

p.category {
  color: #01b0f0;
}

Download(2)

Comments:0

Comment Form

コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。

Trackbacks:0

TrackBack URL for this entry
http://lh3.jp/files/system/mtos/mt-tb.cgi/90
Listed below are links to weblogs that reference
P.205 from lh3.jp

Home > P.205

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top