ホームページ作成講座重複リスト

重複リストのサンプル

箇条書きの中に箇条書き

まず、箇条書きの中に箇条書きを作ってみましょう。

temp.htmlを開いて、listフォルダに中に「lesson4.html」というファイル名で保存して下さい。 そしてbody内に以下のように記述してみましょう。

<ul>
 <li>文章作成タグ
  <ul>
   <li>見出しタグ</li>
   <li>セクションタグ</li>
   <li>段落タグ</li>
   <li>改行タグ</li>
   <li>引用文タグ</li>
  </ul>
 </li>
 <li>リンクタグ</li>
 <li>画像タグ</li>
 <li>テーブルタグ</li>
 <li>リストタグ
  <ul>
   <li>箇条書きタグ</li>
   <li>番号リストタグ</li>
   <li>定義リストタグ</li>
  </ul>
 </li>
</ul>

ブラウザで確認すると、下のようになります。

入れ子になっているulタグのマークは、親リストのマークとは違うものが表示されていると思います。

番号リストの重複リスト

番号リストの中に箇条書きや下位の番号リストが存在する例を見てみましょう。 何かの操作を解説しているサイトで、下のようなリストを見たことがあるかも知れません。

<ol>
 <li>エクスプローラーを開きます。</li>
 <li>○○フォルダを開きます。
  <ul>
   <li>Windows8の場合は○○→○○と辿ります。</li>
   <li>Windows7の場合は△△→○○と辿ります。</li>
  </ul>
 </li>
 <li>××ファイルを開き以下のように書き替えます。
  <ol>
   <li>4行目をabcdにします。</li>
   <li>21行目をefghにします。</li>
   <li>17～20行目を削除します。</li>
  </ol>
 </li>
 <li>上書き保存します。</li>
</ol>

ブラウザで確認すると下のようになります。

このように、ulタグとolタグを重ねて用いることが可能です。 項目に順番という要素が必要かどうか考えて、ulタグかolタグを選択していきましょう。

また、入れ子にするulタグ，olタグは<li>～</li>の間に入れるということも覚えておきましょう。