箇条書きリストのタグ「ul・li要素」html5

「ul・li要素」は、複数の項目を箇条書きでリスト化するのに使用します。

Webサイトの「メニューバー」等に使用します。

箇条書きリストの項目の中に、更に細かい項目を「入れ子」にする事も出来ます。

「ul要素」には各項目の「順番」の意味合いはありませんので、例えば「ランキング」を表す場合は、「ol要素（順序リスト）」を使用します。

「ul・li要素」のhtmlコーディング例

ＨＴＭＬソース

<p>当サイトの主要メニューは以下の通りです。</p>
<ul>
<li>ＨＴＭＬ５</li>
<li>ＣＳＳ３</li>
<li>フォトショップ・エレメンツ</li>
<li>レスポンシブWebデザイン</li>
<li>モバイルフレンドリー</li>
<li>ＷＡＩ－ＡＲＩＡ実装方法</li>
<li>ＳＥＯ</li>
</ul>

ブラウザ表示

当サイトの主要メニューは以下の通りです。

  • ＨＴＭＬ５
  • ＣＳＳ３
  • フォトショップ・エレメンツ
  • レスポンシブWebデザイン
  • モバイルフレンドリー
  • ＷＡＩ－ＡＲＩＡ実装方法
  • ＳＥＯ

箇条書きリストを入れ子にする方法

「li要素」の中に「ul要素」を入れ子にする事が出来ます。

ＨＴＭＬソース

<p>当サイトの主要メニューは以下の通りです。</p>
<ul>
<li>ＨＴＭＬ５</li>
	<ul>
	<li>テーブル</li>
		<ul>
		<li>セルの結合</li>
		<li>タイトル</li>
			<ul>
			<li>説明文</li>
			<li>figure要素</li>
			</ul>
		<li>行グループ</li>
		<li>縦列の見出し</li>
		</ul>
	<li>日付・時間</li>
	</ul>
<li>ＣＳＳ３</li>
<li>フォトショップ・エレメンツ</li>
<li>レスポンシブWebデザイン</li>
<li>モバイルフレンドリー</li>
<li>ＷＡＩ－ＡＲＩＡ実装方法</li>
<li>ＳＥＯ</li>
</ul>

ブラウザ表示

当サイトの主要メニューは以下の通りです。

  • ＨＴＭＬ５
    • テーブル
      • セルの結合
      • タイトル
        • 説明文
        • figure要素
      • 行グループ
      • 縦列の見出し
    • 日付・時間
  • ＣＳＳ３
  • フォトショップ・エレメンツ
  • レスポンシブWebデザイン
  • モバイルフレンドリー
  • ＷＡＩ－ＡＲＩＡ実装方法
  • ＳＥＯ

黒丸（リストマーク）を消したり、各項目の間隔を調整する場合は、ＣＳＳで行います。

html箇条書きリストの黒丸を消すcss

ＨＴＭＬ５ に戻る

ホームページ作成方法 TOPに戻る