1. Home
  2. Webテンプレート
  3. メニュー
  4. サイトマップ2

サイトマップ2



サイトマップを作成するサンプルコードです。

横に3列並ぶタイプとなります。


表示例

※上記のサイトマップは、TAG indexの実際のサイト構成を表したものではありません。

  • このサンプルでは、サイトマップエリアの幅を100%に指定しています。(必要に応じて変更してください)
  • サイトの階層に合わせて、ul要素を入れ子にしています。
  • 2階層目のul要素にfloatを指定して、横に3列並べています。(垂直の区切り線は1列目と2列目の背景に設定されています)
  • 垂直区切り線の都合上、左列の高さが右列の高さを上回るように配置してください。
  • 階層により、マーカーの種類が変わります。1階層目と2階層目は垂直のラインを、3階層目は三角マークを、4階層目以降は小さい四角マークを表示させています。
  • 2階層目のインデント幅は、「2階層目のパディング」の左パディングで調整することができます(この値を変更する場合は、背景画像(マーカー)の表示位置も微調整する必要があります)。ただし、1階層目に左パディングが設定されているので、2階層目を左端に付けることはできません。
  • 3階層目以降のインデント幅は、「3階層目以降のマージン」の左マージンで調整することができます。
  • その他の余白の調整については、CSSコード内のコメントを参考に色々いじってみてください。(説明しきれないので…)
リストの階層について
  • 1階層目 … 「Home」の項目
  • 2階層目 … 「HTMLリファレンス」や「CSSリファレンス」等の項目
  • 3階層目 … 「ページ全般タグ」や「テキスト・フォントタグ」等の項目
  • 4階層目 … 「背景色と文字色」や「スクロールバーの色」等の項目
CSSの設定について
  • リストを入れ子にしているため、設定内容が少々ややっこしくなっています。
  • 全体の流れとしては、上位の階層向けのスタイルを先に設定し、その後で下位の階層向けのスタイルを設定(上書き)する、といった感じになります。

使用している画像

v_line1.gif v_line1.gif

v_line4.gif v_line4.gif

triangle5.gif triangle5.gif

square.gif square.gifsquare.gif 拡大)

v_separator.gif v_separator.gifsquare.gif 拡大)

triangle5.gifv_separator.gif の背景は透過されています。

画像へは直接リンクしないでください。ダウンロードしてから使用してください)

画像の制作について

参考画像

色違いのマーカー画像です。サイトの配色に合わせてお選びください。

v_line2.gif v_line2.gif

v_line3.gif v_line3.gif

v_line5.gif v_line5.gif

v_line6.gif v_line6.gif

v_line7.gif v_line7.gif

v_line8.gif v_line8.gif

v_line9.gif v_line9.gif

v_line10.gif v_line10.gif

triangle1.gif triangle1.gif

triangle2.gif triangle2.gif

triangle3.gif triangle3.gif

triangle4.gif triangle4.gif

triangle6.gif triangle6.gif

triangle7.gif triangle7.gif

triangle8.gif triangle8.gif

triangle9.gif triangle9.gif

triangle10.gif triangle10.gif

コード

CSSコード


/* --- サイトマップエリア --- */
ul.sitemap {
width: 100%; /* サイトマップエリアの幅 */
margin: 0;
padding: 0;
font-weight: bold; /* 一旦全ての文字を太字にする */
list-style-type: none;
font-size: 80%;
color: #2b2b2b;
}

/* --- 入れ子にされたリスト用 --- */
ul.sitemap ul {
margin: 0;
padding: 0;
list-style-type: none;
}

/* --- 全てのリスト項目 --- */
ul.sitemap li {
padding: 1px 0 0 10px; /* 1階層目のパディング(上右下左) */
background: url(v_line1.gif) no-repeat left top; /* 1階層目の背景 */
line-height: 120%;
}

/* --- 2階層目のコンテナ --- */
ul.sitemap div.contentNav {
width: 100%; /* コンテナの幅 */
margin-top: 20px; /* コンテナの上マージン */
}

/* --- セクション(2階層目のリストエリア) --- */
ul.sitemap ul.section {
width: 33.3%; /* セクションの幅 */
float: left;
}
ul.sitemap ul.separator {
background: url(v_separator.gif) repeat-y right top; /* セクション間の垂直区切り線 */
}

/* --- 2階層目以降のリスト項目 --- */
ul.sitemap ul.section li {
margin: 0 20px 20px 0; /* 2階層目のマージン(上右下左) */
padding: 1px 0 10px 15px; /* 2階層目のパディング(上右下左)上書き */
background: url(v_line4.gif) no-repeat 5px 0; /* 2階層目の背景 上書き */
border-bottom: 1px #c0c0c0 dotted; /* 2階層目の下境界線 */
}

/* --- 3階層目以降のリストエリア --- */
ul.sitemap ul.section ul {
margin: 7px 0 0 8px; /* 3階層目以降のマージン(上右下左) */
font-weight: normal; /* 3階層目以降の文字をノーマルの太さに戻す */
}

/* --- 3階層目以降のリスト項目 --- */
ul.sitemap ul.section ul li {
margin: 0 0 6px 0; /* 3階層目以降のマージン(上右下左)上書き */
padding: 0 0 0 12px; /* 3階層目のパディング(上右下左)上書き */
background: url(triangle5.gif) no-repeat 0 0.2em; /* 3階層目の背景 上書き */
border-bottom: none; /* 3階層目以降の下境界線 上書き */
}

/* --- 4階層目以降のリスト項目 --- */
ul.sitemap ul.section ul li li {
padding: 0 0 0 9px; /* 4階層目以降のパディング(上右下左)上書き */
background: url(square.gif) no-repeat 0 0.4em; /* 4階層目以降の背景 上書き */
}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

HTMLコード


<ul class="sitemap">
<li><a href="#">Home</a>

    <div class="contentNav clearFix">

    <ul class="section separator">
    <li><a href="#">HTMLリファレンス</a>

        <ul>
        <li><a href="#">ページ全般タグ</a></li>
        <li><a href="#">テキスト・フォントタグ</a></li>
        <li><a href="#">リンクタグ</a></li>
        <li><a href="#">リストタグ</a></li>
        <li><a href="#">イメージタグ</a></li>
        <li><a href="#">テーブルタグ</a></li>
        <li><a href="#">フレームタグ</a></li>
        <li><a href="#">フォームタグ</a></li>
        </ul>

    </li>
    <li><a href="#">CSSリファレンス</a>

        <ul>
        <li><a href="#">ページ全般</a></li>
        <li><a href="#">ボックス</a></li>
        <li><a href="#">テキスト・フォント</a></li>
        <li><a href="#">リンク</a></li>
        <li><a href="#">リスト</a></li>
        <li><a href="#">イメージ</a></li>
        <li><a href="#">テーブル</a></li>
        <li><a href="#">フレーム</a></li>
        <li><a href="#">フォーム</a></li>
        </ul>

    </li>
    <li><a href="#">JavaScript</a>

        <ul>
        <li><a href="#">ページ全般</a></li>
        <li><a href="#">時間</a></li>
        <li><a href="#">メッセージ</a></li>
        <li><a href="#">ウィンドウ</a></li>
        <li><a href="#">リンク</a></li>
        </ul>

    </li>
    </ul>

    <ul class="section separator">
    <li><a href="#">カラーチャート</a>

        <ul>
        <li><a href="#">カラーネーム 147色</a></li>
        <li><a href="#">標準 16色</a></li>
        <li><a href="#">Web Safeカラー 216色</a></li>
        <li>色の組み合わせチェック

            <ul>
            <li><a href="#">背景色と文字色</a></li>
            <li><a href="#">スクロールバーの色</a></li>
            <li><a href="#">ボックスの色</a></li>
            </ul>

        </li>
        <li><a href="#">色の検索</a></li>
        </ul>

    </li>
    <li><a href="#">Webツール</a>

        <ul>
        <li><a href="#">URLエンコード・デコードフォーム</a></li>
        <li><a href="#">メールアドレス変換フォーム</a></li>
        <li><a href="#">テーブルタグ作成ツール</a></li>
        </ul>

    </li>
    <li><a href="#">Webテンプレート</a>

        <ul>
        <li><a href="#">レイアウト</a></li>
        <li><a href="#">ボックス</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">テキスト</a></li>
        </ul>

    </li>
    <li><a href="#">掲示板</a>

        <ul>
        <li><a href="#">HTML質問板</a></li>
        <li><a href="#">CSS質問板</a></li>
        <li><a href="#">JavaScript質問板</a></li>
        </ul>

    </li>
    </ul>

    <ul class="section">
    <li>ご案内

        <ul>
        <li><a href="#">当サイトについて</a></li>
        <li><a href="#">ご利用条件</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">お問い合わせ</a></li>
        </ul>

    </li>
    </ul>

    </div>

</li>
</ul>

備考

  • floatの解除には「clearfix」という手法を使用しています。
  • 設定できる階層数に制限はありませんが、見やすさを考えて4階層程度までにしておくことをおすすめします。

メニュー

ページの先頭へ