メニューのXHTML ３パターン

Type1. 定義リスト DL

Menu全てをdiv要素で包み、その子供に2つのdl要素があります。左のdlを#navigation、右のdlを#othersとする事で、1つのMenuを2カラムにでも3カラムにでも出来るようにする為です。

イイトコロ

全体的にシンプルなマークアップで済ませられる所がイイトコロ。3カラムのためにサイドバーを2つに分ける必要が無いのなら、dlを頂点とした1つのセットでMenuを構成する事も出来ます。そしたら更にシンプル度アップ。

イヤナトコロ

dtには項目のタイトルが入るのですが、このdtとddがXHTMLでグループに出来ないため、CSSで1setとして表現するような扱いに苦労します。

• Download [dl Menu] Template Source
• Download [dl Menu] Template Source(dl要素1個で済ませるバージョン)

Type2. 入れ子ul

MAQUE Movable Type テンプレートのデフォルトのMenu構成です。

Type1と同じように、2カラム3カラムが出来るようにdiv要素を2つの要素 (ul要素)で分けています。

イイトコロ

これも全体的にシンプルなマークアップで済ませられる所がイイトコロ。また、各項目はli要素の中に納まっている為、CSSでの装飾にも柔軟性があります。3カラムのためにサイドバーを2つに分ける必要が無いのなら、ulを頂点とした1つのセットでMenuを構成する事も出来ます。そしたら更にシンプル度アップ。

イヤナトコロ

ulとliが入れ子構造を持っていますので、CSSでの記述が少々ややこしくなります。

<ul id="utilities">

 <li>Entries
  <ul>
   <li>Entry1</li>
   <li>Entry2</li>
   <li>Entry3</li>
  </ul>
 </li>
  
  <li>Categories
   <ul>
    <li>Category1</li>
    <li>Category2</li>
    <li>Category3</li>
   </ul>
  </li>
  
</ul>

まず、上のソースを見て下さい。これは入れ子のulで構成したメニューですが、EntriesとCategoriesをそれぞれ枠線で囲いたいと思って ul#utilities li {border: 1px solid black;}と書くと、中にある2階層目のli要素(3つのentryと3つのcategory)にまで枠線が引かれることになります。この中のli要素に枠線を消すためには、ul#utilities li li{border: none;}と書き足さなければなりません。

CSSで子孫セレクターを理解していないと、「なんでこっちにまでマージンついてるの！あーんもう」ってなってしまいます。

MAQUE Movable Typeを使っている人で、特に専用スキンを使うつもりも無く自分でスタイルを作る人は、他のメニュー構成に変更したほうがいいかもしれない。けど、これはこれで勉強になるし、シンプルだしカスタマイズ性も高いんだけどナ

ま、子供セレクタで ul#utilities >li {border: 1px sold red;}と書けるようになる時代を待ちましょう。(子供セレクタ : IE6は使えない。-_-;)

• Download [ul入れ子 Menu] Template Source
• Download [ul入れ子 Menu] Template Source(ul要素1個で済ませるバージョン)

Type3. divでグルーピング

これも他と同じように、div要素の子供に2つのdivを作り、2カラム,3カラムが出来るようにしてあります。

div要素をグループ化の為に使用していますので、divの数は多くても、所謂div中となりませんので安心して下さい。

イイトコロ

各項目がdiv要素で纏められており、項目のタイトルはh3、タイトルに連なるリストはulとして独立していますので、CSSでの装飾の柔軟性が高いです。これで実現できないメニューの見栄えがあったら、見栄えのデザインほうを見直したほうが良いといえるぐらい自由に装飾出来ます。

イヤナトコロ

div要素で細かく構造化しているだけあって、ここで紹介した他の2つよりはソースが長くなってしまいます。

• Download [div補強 Menu] Template Source
• Download [div補強 Menu] Template Source(div2個に分けないバージョン)

ちゅうい。

Downloadできるtxtファイルは、メニュー部分のソースしか書かれていません。また、表示したい項目によってソースを調整する必要があります。