順序の無いリストの記述 (ULタグ) - HTML

HTMLで項目リストを作成するコードを紹介します。

概要

HTMLで項目のリストを作成するには、ULタグ、LIタグを利用します。

書式

下記の書式となります。
  <ul>
    <li>項目</li>
    <li>項目</li>
    ......
    <li>項目</li>
  </ul>

コード

下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
  <div>リストのデモです</div>
  <ul>
    <li>項目A</li>
    <li>項目B</li>
    <li>項目C</li>
    <li>項目D</li>
    <li>項目E</li>
    <li>項目F</li>
  </ul> 
</body>
</html>

実行結果

上記のHTMLファイルをWebブラウザで表示します。
下図の画面が表示されます。


項目ごとに改行され、各項目の先頭に「・」の見出しマークがついています。HTMLで項目リストを表現できました。

項目の先頭の記号を変える場合
  • 項目の先頭の記号をドットから変える場合はこちらの記事を参照してください。
  • 項目の先頭の記号に画像を使用する場合はこちらの記事を参照してください。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
掲載日: 2012-09-02
改訂日: 2024-09-21
iPentec all rights reserverd.