Home > P.304

P.304

Last Modified: 2008年11月29日 20:01

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

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

Home
- works
  - 2008
    - 実践 Web Standards Design サポートページ
      - sample
        
        6 章
        
        P.304
前： P.301
次： P.308

解説

コンテンツメニューの各項目は、絶対配置を利用してグリッドから外した配置になっています。各項目に記述したclassを用いてそれぞれを絶対配置させて表現します。

CSS

div#contentsMenu li.about a,
div#contentsMenu li.artworks a,
div#contentsMenu li.links a,
div#contentsMenu li.board a,
div#otherContents li.junk a {
  position: absolute; /* 項目内のa要素を絶対配置 */
  width: 72px; /* ボタンの幅 */
  height: 72px; /* ボタンの高さ */
  text-indent: -9999px; /* テキストを画面外へ飛ばす */
  overflow: hidden; /* クリックおよびフォーカス時に、画面外に飛ばしたテキスト部分までアウトラインを表示してしまわないようにする */
}

div#contentsMenu li.about a {
  top: 40px; /* 基点からの上方向の距離 */
  left: 12px; /* 基点からの左方向の距離 */
  background: url(img/button01.gif) no-repeat;
}

div#contentsMenu li.about a:hover {
  background-position: 0 -72px; /* オンマウス時に背景画像の位置を変える */
}

div#contentsMenu li.about a:active {
  background-position: 0 -144px; /* アクティブ時に背景画像の位置を変える */
}

div#contentsMenu li.artworks a {
  top: 12px; /* 基点からの上方向の距離 */
  left: 90px; /* 基点からの左方向の距離 */
  width: 118px; /* サイズを上書き */
  height: 118px; /* サイズを上書き */
  background: url(img/button02.gif) no-repeat;
}

div#contentsMenu li.artworks a:hover {
  background-position: 0 -118px; /* オンマウス時に背景画像の位置を変える */

}

div#contentsMenu li.artworks a:active {
  background-position: 0 -236px; /* アクティブ時に背景画像の位置を変える */
}

div#contentsMenu li.links a {
  top: 111px; /* 基点からの上方向の距離 */
  left: 46px; /* 基点からの左方向の距離 */
  background: url(img/button03.gif) no-repeat;
}

div#contentsMenu li.links a:hover {
  background-position: 0 -72px; /* オンマウス時に背景画像の位置を変える */
}

div#contentsMenu li.links a:active {
  background-position: 0 -144px; /* アクティブ時に背景画像の位置を変える */
}

div#contentsMenu li.board a {
  top: 135px; /* 基点からの上方向の距離 */
  left: 121px; /* 基点からの左方向の距離 */
  background: url(img/button04.gif) no-repeat;
}

div#contentsMenu li.board a:hover {
  background-position: 0 -72px; /* オンマウス時に背景画像の位置を変える */
}

div#contentsMenu li.board a:active {
  background-position: 0 -144px; /* アクティブ時に背景画像の位置を変える */
}

div#otherContents li.junk a {
  top: 13px;
  left: 12px;
  background: url(img/button05.gif) no-repeat;
}

div#otherContents li.junk a:hover {
  background-position: 0 -72px;
}

div#otherContents li.junk a:active {
  background-position: 0 -144px;
}