木村秀一のホームページ

今回は、ホームページ作成のHTMLタグで書かれた文字やリンクを、リスト表示させるリストタグについて説明します。

リストタグもホームページ作成では、わりとよく使用するHTMLタグですから、覚えておくと何かと便利です。

リストタグを使うと、複数の項目を簡単にリスト表示させることができます。

リストタグは、複数の項目を列挙するHTMLタグですから、たとえ列挙する単語の長さが違っていても、見た目の書き出しをそろえてくれます。

リストタグは、知っておくとなかなか便利なタグなので、一つ一つ説明していきますね。

このウェブページでも以下のように、リストタグとページ内リンクを組み合わせて、文章中の各項目のタイトルを列挙しています。

1. マーク付きリストの作成
2. 番号付きリストの作成
3. 定義型リストの作成
4. 入れこ構造について

マーク付きリストの作成

HTMLでのリスト作成で、ulタグを使用すると、マーク付きリストを作成できます。

type属性を指定しない場合は、黒丸の付いたリストになります。

type属性については、後述します。

リストタグを使って、ホームページ上でリスト表示させるためには、ulタグで囲まれた部分に、liタグを使って表示するリストを記述します。

例えば、以下のように記述します。

<ul>
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ul>

ホームページ作成で、最も使用されているリストタグのパターンです。

一般的なブラウザでは、リストの上下は1行分のスペースを空けて改行が行われ、左側はインデントされて表示されます。

「</li>」は、省略することも可能ですが、省略しない方がよいでしょう。

リストのマークを変更することもできます。

ホームページ作成でリスト表示させるulタグ、またはliタグに、typeを追加すると、リストのマークを変更することができます。

リストに使用できるマークには、以下のようなものがあります。

「disc」を指定すると、黒丸が付きます。

何も指定しない場合は、黒丸となります。

「circle」を指定すると、白丸が付きます。

「square」を指定すると、四角が付きます。

続いて、マークの変更方法についてです。

ulタグにtypeを追加すると、リスト全体のマークを変更することができます。

例えば、リスト全体のマークを変更する場合は、以下のように記述します。

<ul type="circle">
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ul>

リスト全体ではなく、リストの各項目ごとにマークを変更したい場合は、liタグにtypeを追加します。

例えば、項目ごとに変更したい場合は、以下のように記述します。

<ul>
<li type="disc">CGI</li>
<li type="circle">JavaScript</li>
<li type="square">HTML</li>
</ul>

しかし、type属性は、HTML4.01では非推奨とされていますので、あまりお勧めはできません。

番号付きリストの作成

前述したulタグではなく、olタグを使用すると、マークではなく、番号付きのリストを作成できます。

olタグで囲まれた部分に、liタグを使って表示するリストを記述します。

liタグが使用されている順に、番号が割り当てられます。

例えば、以下のように記述します。

<ol>
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「1」が割り当てられます。

「JavaScript」には、「2」が割り当てられます。

「HTML」には、「3」が割り当てられます。

一般的なブラウザでは、リストの上下は1行分のスペースを空けて改行が行われ、左側はインデントされて表示されます。

type属性を指定しない場合は、数字（アラビア数字）が付いたリストになります。

数字の種類を変更することもできます。

olタグ、またはliタグに、typeを追加すると、数字の種類を変更することができます。

変更できる種類には、以下のものがあります。

「1」を指定すると、アラビア数字となります。

何も指定のない場合は、アラビア数字となります。

「A」を指定すると、大文字のアルファベットとなります。

「a」を指定すると、小文字のアルファベットとなります。

「I」を指定すると、大文字のローマ数字となります。

「i」を指定すると、小文字のローマ数字となります。

続いて、変更方法についてです。

リスト全体の種類を変更する場合は、olタグに対して、typeを追加します。

例えば、以下のように記述します。

<ol type="A">
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「A」が割り当てられます。

「JavaScript」には、「B」が割り当てられます。

「HTML」には、「C」が割り当てられます。

リストの項目ごとに変更したい場合は、liタグに対してtypeを追加します。

<ol>
<li type="a">CGI</li>
<li type="I">JavaScript</li>
<li type="A">HTML</li>
</ol>

ただし、type属性は、HTML4.01では非推奨とされていますので、お勧めはできません。

次に、olタグの応用技について、もうひとつ紹介します。

olタグに、startを追加すると、開始番号を変更することができます。

例えば、以下のように記述します。

<ol start="5">
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「5」が割り当てられます。

「JavaScript」には、「6」が割り当てられます。

「HTML」には、「7」が割り当てられます。

さらに、type属性と組み合わせて使用することもできます。

<ol type="A" start="5">
<li>CGI</li>
<li>JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「E」が割り当てられます。

「JavaScript」には、「F」が割り当てられます。

「HTML」には、「G」が割り当てられます。

ただしこの方法も、HTML4.01では非推奨とされていますので、注意が必要です。

もうひとつHTMLリストタグの小技として、リストの順番を変更することもできます。

liタグに、valueを追加すると、リストの番号を途中で変更することができます。

liタグに、valueを追加して、新規の番号を指定します。

そうすると、それ以下のリストはその番号からの連番になります。

例えば、以下のように記述します。

<ol>
<li>CGI</li>
<li value="6">JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「1」が割り当てられます。

「JavaScript」には、「6」が割り当てられます。

「HTML」には、「7」が割り当てられます。

さらに、type属性と組み合わせて使用することもできます。

<ol type="A">
<li>CGI</li>
<li value="6">JavaScript</li>
<li>HTML</li>
</ol>

この場合は…

「CGI」には、「A」が割り当てられます。

「JavaScript」には、「F」が割り当てられます。

「HTML」には、「G」が割り当てられます。

ただし、この属性は、HTML4.01では非推奨とされていますので、使用用途は考えて使いましょう。

定義型リストの作成

リストタグの中でも、定義型リストについてお話します。

定義型リストとは、何らかの項目名だけでなく、説明文を付加できるリストタグのことです。

定義型リストとは、項目名だけをリストしただけでは物足りないので、説明文も掲載する場合に使用するリストの項目名プラス、説明文といったイメージのリストタグです。

前述したリストタグ、<ul>や<ol>タグは、ただ項目名を列挙するだけでしたが、定義型リストを使用すると、各項目に対して説明文を掲載できます。

それでは、ホームページ作成で、定義型リストの使用方法について説明します。

定義型のリストを作るHTMLタグは、dlタグに囲まれた部分で、dtタグとddタグを組み合わせて指定します。

一般的なブラウザでは、定義部分（<dt> ～ </dt>）と説明部分（<dd> ～ </dd>）の間に改行が入り、説明部分の左側はインデントされて表示されます。

インデントとは、わかりやすく言うと、文書作成時に使用する字下げのことです。

では、定義型リストの使用例を記述します。

<dl>
<dt>HTMLとは？</dt>
<dd>HTMLとは、「Hyper Text Markup Language」の略です。</dd>
<dt>CGIとは？</dt>
<dd>CGIとは、「Common Gateway Interface」の略です。</dd>
</dl>

dtタグに囲まれた部分に、定義する内容を記述します。

ddタグに囲まれた部分に、その説明を記述します。

「</dt>」と「</dd>」は、省略することが可能ですが、省略しない方がよいでしょう。

次に、定義型リストの応用技について説明します。

前述した定義型リストでは、定義部分（<dt> ～ </dt>）と、説明部分（<dd> ～ </dd>）の間に改行が入ります。

しかし、dlタグに、compactを追加すると、改行されない定義型リストを作れます。

例えば、以下のように記述します。

<dl compact>
<dt>HTMLとは？</dt>
<dd>HTMLとは、「Hyper Text Markup Language」の略です。</dd>
<dt>CGIとは？</dt>
<dd>CGIとは、「Common Gateway Interface」の略です。</dd>
</dl>

ただし、対応しているブラウザであっても、定義の内容が長い場合は改行が入ってしまうので注意が必要です。

この属性は、HTML4.01では非推奨とされていますので、あまりお勧めはできません。

入れこ構造について

ここまで各種リストタグについて紹介してきましたが、それらを入れこ（ネスト）構造にすると間違えやすくなるのでここで正しいやり方を紹介しておきます。

このサイトでは使っていませんが、主に前述しましたulタグとliタグを使ってサイトメニューや、ブログのカテゴリ表示をするのに使われています。

ネスト構造を採用するとリストを作る際、各項目の中にさらに別のリストを作れるので、より詳細な分類わけが表現できることになります。

リストの中にリストがあることを表現できることから、使っている人は結構いるのではないでしょうか。

MovableType(通称MT)のテンプレートにも書かれているので知らずに使っているという人の方が多いような気がしますが…

でも、あれはMTテンプレート専用のタグを知っていないと、ulタグとliタグの入れこ構造を間違って使ってしまう可能性があるので注意が必要です。

それでは、ulタグとliタグでネストしたリストを作ってみましょう。

以下は、CGIの中にPerlとPHPが存在することを表しています。

<ul>
<li>CGI</li>
<ul>
<li>Perl</li>
<li>PHP</li>
</ul>
</ul>

でも、これは間違いです。

何がどう違うのかというと…

• ul要素の内容はli要素に限られる
• li要素はul要素の直接の子要素でなければならない

と、決められているからです。

なので、正しく書き直すと以下のようになります。

<ul>
<li>CGI
<ul>
<li>Perl</li>
<li>PHP</li>
</ul>
</li>
</ul>

上記のようにリストタグを入れこにする場合は、liタグの中に子にあたるulタグとliタグを定義するようにします。

このような構造を見ると、HTMLもプログラムなんだと実感しますね。

<戻る>