WEB作成の豆知識

• 本文へ移動
• このサイトについて
• WEB作成講座
• HTML講座
• CSS講座
• CSSレイアウト
  • 基礎知識
  • 初級編
  • 中級編
  • 上級編
    • レイアウトを把握する
    • ヘッダー部
    • 検索フォーム
    • Yahoo! サービス
    • ビジネスセンター, プレミアム
    • Yahoo! カテゴリ
    • 個人ツール
    • トピックス, 特集・・・
    • 国内の都市, 世界のYahoo!
    • フッター部
    • 組み立てる
    • まとめ
• 豆知識
• 掲示板
• リンク集

CSSレイアウト

複雑な応用型レイアウト

categories（Yahoo! カテゴリ）

Yahoo! のカテゴリリストを作成してみましょう。

まずは色分けをして見ましょう。Yahoo! カテゴリは２カラム構成になっていることが分かります。

では、基本のHTMLから。Yahoo! サービス とほとんど同じです。dl,ulの２種類のリスト要素を使用して書いていきます。

ソースコードは以下のようになります。ZIPファイル内のservices1.htmlもご覧ください。

<h2>カテゴリ</h2>
<dl>
  <dt><a href="#">カテゴリ１</a></dt>
    <dd>
      <ul>
        <li><a href="#">アイテム１</a></li>
        <li><a href="#">アイテム２</a></li>
        <li><a href="#">アイテム３</a></li>
      </ul>
    </dd>
  <dt><a href="#">カテゴリ２</a></dt>
    <dd>
      <ul>
        <li><a href="#">アイテム１</a></li>
        <li><a href="#">アイテム２</a></li>
        <li><a href="#">アイテム３</a></li>
      </ul>
    </dd>
</dl>
<dl>
  <dt><a href="#">カテゴリ３</a></dt>
    <dd>
      <ul>
        <li><a href="#">アイテム１</a></li>
        <li><a href="#">アイテム２</a></li>
        <li><a href="#">アイテム３</a></li>
      </ul>
    </dd>
  <dt><a href="#">カテゴリ４</a></dt>
    <dd>
      <ul>
        <li><a href="#">アイテム１</a></li>
        <li><a href="#">アイテム２</a></li>
        <li><a href="#">アイテム３</a></li>
      </ul>
    </dd>
</dl>
<ul>
  <li><a href="#">アイテム１</a></li>
  <li><a href="#">アイテム２</a></li>
</ul>

Yahoo! カテゴリの解説に使用するHTML, CSSをまとめました。ZIPで圧縮してあります。Yahoo! カテゴリ

次は、CSSでレイアウトを行う際に必要になる タグ, class, id の追加を行います。body, base, left-column, right-columnなどの共通のdiv要素も追加しておきます。

  <div id="base">
    <div id="left-column">
      <div id="categories">
        <h2>カテゴリ</h2>
        <dl id="left-categories">
          <dt><a href="#">カテゴリ１</a></dt>
            <dd>
              <ul>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム２</a></li>
                <li><a href="#">アイテム３</a></li>
              </ul>
            </dd>
          <dt><a href="#">カテゴリ２</a></dt>
            <dd>
              <ul>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム２</a></li>
                <li><a href="#">アイテム３</a></li>
              </ul>
            </dd>
        </dl>
        <dl id="right-categories">
          <dt><a href="#">カテゴリ３</a></dt>
            <dd>
              <ul>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム２</a></li>
                <li><a href="#">アイテム３</a></li>
              </ul>
            </dd>
          <dt><a href="#">カテゴリ４</a></dt>
            <dd>
              <ul>
                <li><a href="#">アイテム１</a></li>
                <li><a href="#">アイテム２</a></li>
                <li><a href="#">アイテム３</a></li>
              </ul>
            </dd>
        </dl>
        <ul id="new-thisweek">
          <li><a href="#">アイテム１</a></li>
          <li><a href="#">アイテム２</a></li>
        </ul>
      </div>
    </div>
    <div id="right-column">
    </div>
  </div>

では、CSSを書いていきましょう。まずはカテゴリを左右２つのカラムに表示させてみましょう。new-thisweekにはclear: leftを指定して、回り込みを解除しておきましょう。また、センタリングもしておきましょう。

ソースコードは次のようになります。ZIPファイル内のcategories2.cssもご覧ください。

#left-categories {
  width: 49.9%;
  float: left;
}
#right-categories {
  width: 49.9%;
  float: right;
}
#new-thisweek {
  clear: left;
  text-align: center;
}

次は、li要素を横に並べていきましょう。servicesのときと同じように、display: inlineを指定すれば横へ並んでくれます。

#categories li {
  display: inline;
}

後は細かいところを調整していくだけです。

• h2の調整（文字の大きさ、背景色・・・）
• dtの文字を太字にする
• その他微調整。。。（余白、間隔など）

追加のCSSは以下のようになります。cagegories3.cssもご覧ください。

#categories h2 {
  font-size: 100%;
  background: #ffe8ba;
  color: #000;
  border-bottom: 1px solid #ccc;
  padding: 5px 10px;
  margin-bottom: 6px;
}
#categories dt {
  font-weight: bold;
}
#categories ul {
  margin: 0.6em 0.1em;
}

ずいぶんとYahoo! カテゴリらしくなってきました。本物と見比べて足りないのは・・・

• アイテムとアイテムの間の「 , 」（カンマ）
• 最後のアイテムはカンマではなく「 ... 」（ドット×３）が付く
• new-thisweekのアイテムとアイテムの間は「 - 」（ハイフン）
• 「サイトの推薦」というリンク

こんな感じでしょうか。これらを実現するのに必要な タグ, class などを追加します。ZIPファイル内のcategories4.htmlもご覧ください。

<div id="base">
  <div id="left-column">
    <div id="categories">
      <h2>カテゴリ <a href="#">サイトの推薦</a></h2>
      <dl id="left-categories">
        <dt><a href="#">カテゴリ１</a></dt>
          <dd>
            <ul>
              <li><a href="#">アイテム１</a></li>
              <li><a href="#">アイテム２</a></li>
              <li class="last-item"><a href="#">アイテム３</a></li>
            </ul>
          </dd>
        <dt><a href="#">カテゴリ２</a></dt>
          <dd>
            <ul>
              <li><a href="#">アイテム１</a></li>
              <li><a href="#">アイテム２</a></li>
              <li class="last-item"><a href="#">アイテム３</a></li>
            </ul>
          </dd>
      </dl>
      <dl id="right-categories">
        <dt><a href="#">カテゴリ３</a></dt>
          <dd>
            <ul>
              <li><a href="#">アイテム１</a></li>
              <li><a href="#">アイテム２</a></li>
              <li class="last-item"><a href="#">アイテム３</a></li>
            </ul>
          </dd>
        <dt><a href="#">カテゴリ４</a></dt>
          <dd>
            <ul>
              <li><a href="#">アイテム１</a></li>
              <li><a href="#">アイテム２</a></li>
              <li class="last-item"><a href="#">アイテム３</a></li>
            </ul>
          </dd>
      </dl>
      <ul id="new-thisweek">
        <li><a href="#">アイテム１</a></li>
        <li class="last-item"><a href="#">アイテム２</a></li>
      </ul>
    </div>
  </div>
  <div id="right-column">
  </div>
</div>

追加のCSSは以下のようになります。ZIPファイル内のcategories4.cssもご覧ください。

#categories h2 {
  position: relative;
}
#categories h2 a {
  position: absolute;
  margin-right: 5px;
  font-weight: normal;
  right: 0;
}
#right-categories li,
#left-categories li {
  display: inline;
  padding-right: 2px;
  margin-right: 3px;
  background: url("images/comma.png") no-repeat scroll right bottom;
}
#categories .last-item {
  padding-right: 8px;
  margin-right: 0;
  background: url("images/dots.png") no-repeat right bottom;
}
#new-thisweek li {
  display: inline;
  margin-right: 3px;
  padding-right: 9px;
  line-height: 150%;
  background: url("images/hyphen.png") no-repeat right center;
}
#new-thisweek .last-item {
  margin: 0;
  background: none;
}

「サイトの推薦」というリンクは、h2要素を基準要素としてabsoluteを用いた絶対位置指定で右の方に表示させています。

「 , 」「 ... 」「 - 」ですが、これらは全て背景画像として表示させています。

ZIPファイル内のcategories5.htmlとcategories5.cssが、カテゴリの完成コードになります。変更点は、文字列を Yahoo! カテゴリに合わせたことです。CSSの方はcategories4.cssと全く同じものです。

---

• 前のページ
• ▲
• 次のページ

Valid XHTML 1.1 Valid CSS 2.0

email@web-mame.net