こんな使い方もできる！HTMLのリストを作るタグの使い方

ビジネスで使われる書類では、重要なことをリストで表現すると印象に残りやすいことから評価が高まります。これは、Webページにもあてはまることです。さらに、HTMLのリストを作るタグは、印象的なデザインにも応用できます。このようなHTMLでリストを作るためのタグの使い方について解説します。

HTMLでリストを作るには

HTMLに用意されているリストを作るタグは3種類あり、そのうちの2つ、ulタグとolタグでどんなリストを作るかを定義し、もう1つのliタグでリストの要素を定義します。次から、この3つのタグの基本について解説します。

liタグの使い方

liタグは、リストの要素を定義するタグで、後から解説するulタグまたはolタグの中で使われるタグです。そして、要素となる文字や画像などを、<li>と</li>で囲うことで、リストとして表示します。なお、liは、英語のlist itemの略です。

liタグの使用例

<li>リスト１</li>

ulタグの使い方

ulタグは、順序のないリストを作る際に使われるタグであり、<ul>から</ul>までがリストです。そして、この中に、先ほど説明したliタグを記述します。なお、ulは、英語のunordered listの略です。

また、ulタグで作る順序の無いリストとは、リストの先頭に記号が付いたリストの形式で、その記号をリストマーカーと呼びます。そして、HTMLのバージョン5では、リストマーカーに使われる記号を、スタイルシートのlist-style-typeプロパティで指定します。

ulタグを使った例（マーカーなし簡単なリスト）

<ul style="list-style-type: none">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

olタグの使い方

olタグは、順序のあるリストを作る際に使われるタグであり、<ol>から</ol>までがリストです。そして、先ほどのulタグと同じく、この中にliタグを記述します。なお、olは、英語のordered listの略です。

また、olタグで作る順序のあるリストとは、先ほどの順序の無いリストと違い、リストの先頭に数字などの順序を表す記号が付いたリストです。そして、HTMLのバージョン5では、ulタグと同じくリストマーカーに使われる記号を、スタイルシートのlist-style-typeプロパティで指定します。

olタグを使った例（マーカーに数字を使った簡単なリスト）

<ol style="list-style-type: decimal">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ol>

リストを使った書き方の例

読み易いビジネス文書を書く基本は、リストをうまく活用することです。そして、これはWebページにもあてはまります。そのようなリストを使った例を、そのHTMLといっしょに紹介します。

リストを使うコツは揃えること

リストを使って読み易い報告書を書くコツは、文字を揃えることです。具体的には、要点をまとめた同じくらいの長さの文章を、揃えて並べてみましょう。そして、その文章の左端に記号を付けることで、そこに読む人の目印になることで、読み易い文章が書けます。

また、HTMLでリストを作るタグには、左端に記号を付ける方法と、数字を付ける方法とがあります。一般的には、並べるだけなら記号を、また順序に意味がある場合は数字を使います。

記号を使ったリストの例

<ul style="list-style-type: dot">
  <li>集合時刻：午前9時</li>
  <li>集合場所：校門前</li>
  <li>注意事項：動きやすい服装</li>
</ul>

数字を使ったリストの例

<ol style="list-style-type: decimal">
  <li>受付で登録用紙をもらう</li>
  <li>登録用紙に必要事項を記入する</li>
  <li>登録用紙を窓口に提出してパンフレットをもらう</li>
  <li>パンフレットでスケジュールをチェック</li>
  <li>気になるブースへLet's Go</li>
</ol>

横に並べて表示する

HTMLのリストを作るタグの機能は、文章を縦に並べるだけではありません。Webページでは、文字を横に並べたてメニューを作ったり、縮小した画像を並べてギャラリーを作ったりもします。

なお、こういった使い方をするためには、スタイルシートで横に並べるための設定をします。なお、この設定については、後で詳しく解説します。

記号に画像アイコンを使う

ulタグで表示する記号にWebページのデザインに合わせたアイコンを使うことが可能です。その場合は、スタイルシートでアイコンの画像を指定します。

アイコンを使うためのスタイルシートの例

<style>
ul {list-style-image: url(img/icon_check.png);}
</style>

この例では、アイコンの画像として「img/icon_check.png」を指定しています。

HTMLのリストの応用例

先ほど簡単に紹介したように、HTMLのリストを作るタグを利用し、メニューを作ったり画像を並べてギャラリーにすることも可能です。次から、そのようなHTMLのリストの応用例を紹介します。

メニューを作る

通常、HTMLのリストは縦に揃えて並べますが、スタイルシートに設定すれば横に揃えることも可能です。そして、この横にそろえたリストは、Webページで使われるメニューの作成によく使われます。

まず、リストを横に揃えるには、li要素を右側に回り込ませます。そのためには、スタイルシートで「float:left;」を設定します。また、背景の色を変えたり、文字の色を変えることで、メニューらしく修飾してください。そして、li要素の中でリンク先となるWenサイトやHTML内のジャンプタグを設定すれば、メニューのできあがりです。

メニューの例

<style>
li.menuli {
  float:left;
  list-style-type:none;
  width: 100pt;
  background-color: lightgray;
}
</style>

<nav>
<ul id="menu">
<li class="menuli"><a href="#">ホーム</a></li>
<li class="menuli"><a href="menu.html">メニュー</a></li>
<li class="menuli"><a href="particular.html">こだわり<a></li>
<li class="menuli"><a href="shop.html">店舗案内<a></li>
</ul>
</nav>

画像を並べて表示する

先ほど紹介したメニューのように、HTMLのリストは横に揃えて並べることも可能です。そして、このリストの使い方は、文字の代わりに画像を並べるのにも使われます。また、これを活用すれば、お気に入りの画像のサムネイルを並べたギャラリーのような美しいWebページも作ることが可能です。

なお、スタイルシートで「float:left;」を設定する場合、li要素で指定する画像のサイズが揃っていないと、画面が崩れてしまいます。Webページのレイアウト構成を考慮し、使う画像のサイズをきちんと決めてから、それに合わせて画像を用意しましょう。

リストを使って画像を縦に並べる例

<style>
li.gallery {
  list-style-type:none;
  float:left;
}
</style>

<ul style="list-style-type: none">
  <li class="gallery"><a href="./img/G001.html"><img src="./img/G001_thumb.jpg"></a></li>
  <li class="gallery"><a href="./img/G002.html"><img src="./img/G002_thumb.jpg"></a></li>
  <li class="gallery"><a href="./img/G003.html"><img src="./img/G003_thumb.jpg"></a></li>
</ul>

まとめ

HTMLでリストを作るための3つのタグ、liタグ、ulタグ、olタグは、見やすいWebページを作るのに使えるばかりか、メニューやギャラリーなどにも応用できる便利なタグです。ぜひ、使い方をマスターして、HTML作成に活用してください。