ブログカスタマイズの雑談BLOG

リストタグは、例えばグローバルナビゲーションメニューや、アコーディオンメニュー、ツリーメニューなどの「メニュー」表示をする時に使います。あとは、記事内で箇条書きにしたい時なんかにも使ったりします。



このブログでリストタグに触れているのは4つかな？
グローバルメニューとアコーディオンメニュー（ツリーメニュー）を実装した時ですね。
とりあえずリストタグを使った記事を紹介しておきます。





あ、よく考えたら、Seesaaブログのカテゴリページやブログ検索結果ページ等の上部に置いている「記事リスト」にもリストタグを使っていました。
全部紹介する必要も無いし、どうでもいいんですけどね（笑）



上記のうち、リストタグの記述方法について説明しているのは2つ目の「グローバルナビゲーションの編集方法」の記事ですが、これはSeesaaブログにグローバルナビを設定するために書いた記事なので、Seesaaブログを使っていない人には不向きな内容だったと思います。
なので、今回は一般的な説明というか、どのブログやサイトでも関係なくリストタグを使いたい場合の記述方法を説明したいと思います。



まあね、リストタグは色んな場面で出てくるので、コード記述のやり方を知っておいて損は無いと思うんですよ。
それに詳しくは知りませんが、リストタグを使用した方がSEO的にも良いらしいので、何かしらまとめて表示しなければいけない時なんかはリストタグを利用した方が良いと思います。




階層の呼び方について
たぶん「リストタグ部分をコピペして使おう！」とか思う時って、いわゆる「メニュー」を作る時だと思うんですよね。メニューに階層を作る、って場面でしょうか。
階層を作る時にどこで混乱するのかというと、いわゆる「入れ子（ネスト）」をする時です。
なので、この記事ではリストタグを「入れ子（ネスト）」にする時のHTMLの記述方法を中心に説明します。



「入れ子」って何？って言われてしまうと困ってしまうんですが、要するにリスト表示の階層をどんどん下げて、たくさんリスト表示をすることです。（意味、わかりますかね？ｗ）
‥‥フィーリングでご理解いただけると助かりますｗ



「入れ子」にするためには階層が必要ですから、この記事では、リストの第1階層を「親メニュー」、第2階層を「子メニュー」、第3階層を「孫メニュー」、第4階層を「ひ孫メニュー」と呼ぶことにします。
本当は「親メニュー」ではなく「親リスト」のように「リスト」と呼ぶべきですが、以前の記事では「メニュー」で説明しているし、その時の説明用画像を再利用したいので、ここでは「メニュー」という表記でいきます。

リスト表示のコード記述（基本形）【第1階層】

まずは、リスト表示のコード記述について、基本的な形を説明します。
リストタグには「<ul>」「<ol>」「<li>」があります。
（定義型リストの「<dl><dt><dd>」は無視します。気になる方はご自分でお調べください）



「<ul>」と「<ol>」は似ていて、「<ul>」はマーカー付きリストで、「<ol>」は番号付きリストです。
リストの先頭にマーク（●や■）を付けるのか、番号（1、2、3〜）を付けるのかの違いであって、使い方に差はありませんので、ここでは「<ul>」を使って説明します。
番号付きリストにしたい方は「<ul>」を「<ol>」に入れ替えればいいです。
「<ul>」も「<ol>」も、表示したいコンテンツには「<li>」を使います。



HTML上にタグを記述する場合、「開始タグ」と「終了タグ」で表示したいコンテンツを挟まなければならない、ということは御存知だと思います。



例えば段落「pタグ」を使って「あああああ」と表示させたいのであれば、



と、HTMLに記述します。
この場合の「<p>」が開始タグ、「</p>」が終了タグです。
終了タグは、開始タグに「/」を付けて表示します。



リストタグを使う場合も「開始タグ」と「終了タグ」でコンテンツを挟みます。
「ul」の開始タグは「<ul>」、終了タグは「</ul>」です。
「li」の開始タグは「<li>」、終了タグは「</li>」です。

リスト表示の基本形

リストタグを使う場合、表示したいコンテンツを「li」タグで挟みます。
「ul」タグは「どんな形のリストなのか」を指示するタグなので、「li」で挟んだコンテンツを、「ul」で挟みます。
つまり、HTML上でリスト表示を記述する場合、リスト表示したい項目に「<li>」タグをつけて「<ul>〜</ul>」または「<ol>〜</ol>」の間に記述するわけです。



リスト表示のコード記述（基本形）


これがリスト表示の基本形です。
「li」タグで挟んでいるコンテンツはただの文字でもいいし、上の例のようにリンクを設定した文字でもいいです。何が入っても大丈夫です。
（上の例は文字にリンクを設定しているので、「○○○○」という文字を「a」タグで挟んでいます）



このように、リスト表示させる場合は、まずは「li」タグを使って表示させたいコンテンツを挟み、それらを「ul」タグで挟めばいいわけで、このルールは入れ子にする場合も変わりません。

リスト表示のコード記述（入れ子）【第2階層】

リスト表示の基本形は上記で説明した通りです。
基本形通りに設定した「親メニュー」はこのような記述になります。


親メニューのリスト（第1階層）


このリスト記述を見たらわかるように、「親メニュー」つまり「第1階層」には「親メニューA」「親メニューB」「親メニューC」の3つを設定しています。



では次に、「親メニューA」の中に「子メニュー」3つを入れたいと思います。
「子メニュー」は第2階層です。
こうやって第1階層の下に第2階層を入れ込むことを「入れ子」と言います。
第3階層、第4階層のようにいくつでも下階層を増やしていくことができるし、階層を増やしていくことを「入れ子（ネスト）」と言うわけです。たぶんｗ



「子メニュー」とか「第2階層」と言うと何だか難しく感じるかもしれませんが、リスト表示の基本形は変わりません。親だろうが子だろうがリスト表示なので、リスト表示の基本形と全く同じ表記になります。
「親メニューA」に「子メニュー」を3つ入れたいので、「子メニューA1〜A3」というコンテンツ名にします。


子メニューのリスト


この「子メニュー」の基本形のコードを、「親メニュー」のコードの中に記述することで、リストに「第2階層」が出来ます。
記述の際に気を付けなければいけないのは、「親メニュー」の終了タグ「</li>」の位置です。
「親メニューの中に子メニューが入っている」という記述内容にしなければいけませんので、「親メニュー」の終了タグは「子メニュー」の記述の後ろに配置します。「子メニュー」を挟み込むイメージですね。



親メニューに子メニューを入れたコード（第2階層まで）

具体的な記述の手順

まずは「親メニュー」のコード記述です。




「親メニューA」の中に「子メニュー」を入れたいので、「親メニューA」の行の下に空行を作ります。




作った空行部分に「子メニューA1〜A3」のリストを記述します。（「<ul>〜</ul>」まで全部です）




「親メニューA」の終了タグ「</li>」を、「子メニュー」リストの終了タグ「</ul>」の下に移動させます。

リスト表示のコード記述（入れ子）【第3階層】

「孫メニュー」（第3階層）を設定する場合も、「子メニュー」と同じように考えます。


親でも子でも孫でも、リスト表示の基本形は崩しません。
「子メニューA1」に入れ込むので、孫メニューのコンテンツ名は「孫メニューA1の1」「A1の2」「A1の3」にします。


孫メニューのリスト


第2階層である「子メニュー」のリスト記述は、第1階層である「親メニュー」の中に挟み込みましたので、「孫メニュー」のリスト記述も同じように「子メニュー」の中に挟み込みます。


でも、「子メニュー」の時と同じく、終了タグ「</li>」の位置に気を付けてください。

「子メニュー」の中に「孫メニュー」のコードを入れ込むので、第2階層である「子メニュー」の終了タグ「</li>」は、第3階層である「孫メニュー」のリスト記述の後ろに配置します。



親メニューに子・孫メニューを入れたコード（第3階層まで）

具体的な記述の手順

まずは「子メニュー」まで記述したコードです。




「子メニューA1」の中に「孫メニュー」を入れたいので、「子メニューA1」行の下に空行を作ります。




作った空行に「孫メニューA1の1〜A1の3」のリストを記述します。（「<ul>〜</ul>」まで全部です）




「子メニューA1」の終了タグ「</li>」を、「孫メニュー」リストの終了タグ「</ul>」の下に移動させます。

リスト表示のコード記述（入れ子）【第4階層】

「ひ孫メニュー」（第4階層）を設定する場合も、今までと同じです。
とりあえず「ひ孫メニュー」を「孫メニューA1の1」に入れ込みたいので、ひ孫メニューのコンテンツ名は「ひ孫メニューA1の1の1」〜「A1の1の3」にします。
なんだかもう、表記だけでもややこしくなってきました（笑）


ひ孫メニューのリスト


これまでと同じく、終了タグ「</li>」の位置に気を付けてください。


「孫メニュー」の中に「ひ孫メニュー」のコードを入れ込むので、第3階層である「孫メニュー」の終了タグ「</li>」は、第4階層である「ひ孫メニュー」のリスト記述の後ろに配置することになります。



親メニューに子・孫・ひ孫メニューを入れたコード（第4階層まで）

具体的な記述の手順

「孫メニュー」まで記述したコードです。




「孫メニューA1の1」の中に「ひ孫メニュー」を入れたいので、「孫メニューA1の1」行の下に空行を作ります。




作った空行に「ひ孫メニューA1の1の1〜A1の1の3」のリストを記述します。（「<ul>〜</ul>」まで全部です）




「孫メニューA1の1」の終了タグ「</li>」を、「ひ孫メニュー」リストの終了タグ「</ul>」の下に移動させます。






こんな感じで、どんどん階層を増やしていくことができます。
上記は「親メニューA」にだけ階層を付けていきましたが、もちろん「親メニューB」にも「C」にも階層を付けることができます。



とにかく、リストタグを使ってリスト表示をする場合、階層を増やしたいのであれば、直上のリストタグ「</li>」の位置に注意すれば大丈夫です。


増やしたい部分に空行を作り、空行部分に「<ul>」から「</ul>」までのリスト表示を入れ込んだら、直上のリストの終了タグ「</li>」を、入れ込んだリスト表示の終了タグ「</ul>」の下に移動させる。
このルールを守れば、どんだけでも入れ子が可能です。