TOP 色々なHTML ≫リストについて

リストを作ってみよう

リストというのは、いわゆる箇条書きのことです。
サイドメニューや、項目紹介なんかによく使用され、スタイルシートで調整して、マークを外したり画像でマークを付けたりすることもできます。
リストについて (スタイルシート編) はコチラ

マーク付きリストを作る <ul><li>〜</li></ul>

普通、箇条書きといえば頭に「・」マークを付けて表示しますよね。
それが、この<ul><li>〜</li></ul>タグです。
<ul>〜</ul>がリスト全体を示して、<li>〜</li>で1個の箇条書きを示しています。

【記述例】

<body>
<p>
<ul>
<li>
リスト項目1</li>
<li>
リスト項目2</li>
<li>
リスト項目3</li>
</ul>

</body>

【表示例】

  • リスト項目1
  • リスト項目1
  • リスト項目1


基本的には、リストは黒マル「・」で表示されますが、環境によっては他のもので代用される場合があります。
また、スタイルシートなどを利用すれば、「・」を色々なマークに変更したり、画像でリストマークを表示することもできます。

番号付きのリストを作る

上のリストタグの<ul>〜</ul>の部分を<ol>〜<ol>に変更すると、「・」の部分を「1.」「2.」・・・といった感じの番号付きリストに変更させることが出来ます。

【記述例】

<body>
<ol>
<li>
リスト項目1</li>
<li>
リスト項目2</li>
<li>
リスト項目3</li>
</ol>

</body>

【表示例】

  1. リスト項目1
  2. リスト項目1
  3. リスト項目1


この番号付きのリストもスタイルシートを使って「@」「A」「B」・・・とか「a」「b」「c」・・・などのリストマークに変更することが出来ます。

前ページに戻る 次ページへ進む 次ページへ進む
特集

HP作成ソフト徹底比較

ホームページビルダー・ドリームウィ―バー徹底比較

HP作成ソフトの代名詞であるホームページビルダーと、プロご用達の本格派、ドリームウィ―バーについて徹底比較してみました。

inserted by FC2 system