- Last Modified: 2008年11月27日 23:11
このページは、株式会社技術評論社より刊行されている実践 Web Standards Design に記載しているソースコードのサンプルを呈示しています。 書籍該当部分と照合しやすいように前後の解説文も掲載していますが、あくまで照合用のため、適宜前後を省いたり内容を省略したりしています。 書籍を読みながら実際にサンプルを表示する際の補助資料として活用してください。
また、 XHTML ソースと CSS ソース、関連画像を含めた全サンプルの ZIP アーカイブ (3,104,743 Bytes) もダウンロードできます。 （ ZIP アーカイブには解説文は含まれていません。）
解説 (1)
ここで、各記事の末尾に書かれている p.category をタイトルの横に配置したいと考えます。 p.category を絶対配置させることになりますが、ルート要素を基点とした位置指定ではタイトルの横に配置させることはできても、 1 つの基点では 4 つの p.category を同じ位置にしか配置させることができません。 そこで、 p.category はそれぞれの親ボックスである div.section を基点とするように設定します。
CSS(1)
div.section {
margin: 0.6em 16px;
padding-bottom: 0.5em;
position: relative; /* 基点に設定 */
background-color: #fff;
}解説 (2)
次に、 p.category に position: absolute を指定し、基点となった div.section のボックスからの距離を top 、 right プロパティで指定します。
CSS(2)
p.category {
margin: 0;
padding: 0.3em 16px;
border-left: 2px solid #fff;
position: absolute; /* 絶対配置 */
top: 0; /* 基点からの上方向の距離 */
right: 0; /* 基点からの右方向の距離 */
color: #fff;
background-color: #01b0f0;
}
