Item

第1階層

div#utilities内には2つのdl要素が存在し、それぞれdl.navi、dl.othersというクラスが付加されています。

重要度・参照頻度の高い情報をdl.navi内に、サイトと関わりの薄い広告やリンクをdl.others内に振り分けてください。

<div id="utilities">
 <dl class="navi">
 .
 </dl>
 <dl class="others">
 .
 </dl>
</div>

上記のソースをツリー図で表すと次のようになります。

第2階層

2つのdl要素内に項目が設置されています。基本的に、項目名であるdt要素と項目の内容であるdd要素が対になります。dl要素の子要素にはdtとdd要素しか置けないことに注意してください。

<div id="utilities">
 <dl class="navi">
  <dt>項目名1</dt>
  <dd>項目名1の内容</dd>
  <dt>項目名2</dt>
  <dd>項目名2の内容</dd>
 </dl>
 <dl class="others">
  <dt>項目名1</dt>
  <dd>項目名1の内容</dd>
  <dt>項目名2</dt>
  <dd>項目名2の内容</dd>
 </dl>
</div>

上記のソースをツリー図で表すと次のようになります。

1つの項目はdt, dd要素が対になってできていることを理解してください。

項目の編集

1つの項目はdt要素とdd要素で構成されていると解説しました。dt要素には項目のタイトル、dd要素には中身が入ります。ここでは、dd要素の中身について解説します。

dd要素には項目の内容を挿入するのですが、ここには直接テキストを入れることも、他のタグを入れることもできます。例えば次のような書き方があります。

<dt>ABOUT</dt>
<dd>
このサイトはSerene Bachのテンプレート配布サイトです。
</dd>

sb.Vicunaのスキンを利用しているならば、上記の文章を挿入する場合はp要素でマークアップすることをお勧めします。

<dt>ABOUT</dt>
<dd>
 <p>このサイトはSerene Bachのテンプレート配布サイトです。</p>
</dd>

これらはどちらも正しいXHTMLですが、sb.Vicunaで配布しているスキンは後者を前提として書かれており、文章はp要素でマークアップすると余白が調整されます。

<dt>Links</dt>
<dd>
 <ul>
  <li><a href="hoge.html">リンク</a></li>
  <li><a href="hoge.html">リンク</a></li>
  <li><a href="hoge.html">リンク</a></li>
  <li><a href="hoge.html">リンク</a></li>
  <li><a href="hoge.html">リンク</a></li>
  <li><a href="hoge.html">リンク</a></li>
 </ul>
</dd>

<dt>Links</dt>
<dd>
 <dl>
  <dt>Friends</dt>
  <dd>
   <ul>
    <li><a href="hoge.html">リンク</a></li>
    <li><a href="hoge.html">リンク</a></li>
    <li><a href="hoge.html">リンク</a></li>
   </ul>
  </dd>
  <dt>Favorite</dt>
  <dd>
   <ul>
    <li><a href="hoge.html">リンク</a></li>
    <li><a href="hoge.html">リンク</a></li>
   </ul>
  </dd>
  <dt>Respect</dt>
  <dd>
   <ul>
    <li><a href="hoge.html">リンク</a></li>
    <li><a href="hoge.html">リンク</a></li>
   </ul>
  </dd>
 </dl>
</dd>

項目の種類

各テンプレートのdiv#utilities内には、予めページに合った項目が書かれていますが、新たに追加したり削除して好みのナビゲーションを作ることが出来ます。

ここでは、項目のサンプルとなるソースを紹介します。コピーペーストでテンプレートソースに貼り付けてください。(貼り付ける場所を間違えないように)

• 文章・項目
• リンク集