下書き

<ul>、<ol>、<li>の3つのタグを使うと、箇条書き（リスト）を作ることができます。
まずはこれらのタグの基本的な使い方を説明していきます。

【書き方について】


<ul>
<li>項目1:吉田朱里</li>
<li>項目2:矢吹奈子</li>
<li>項目3:渡辺麻友</li>
</ul>

⬆︎箇条書きの1つ1つの文はliタグではさみます。
複数のliタグの前後はulタグではさみます。

liタグは何回使ってもOKです。
箇条書きの項目数分だけ増やすことも可能です。

これを実際にHTMLコードを書いてブラウザで表示してみます。

【HTML】


<ul>
  <li>項目1:吉田朱里</li>
  <li>項目2:矢吹奈子</li>
  <li>項目3:渡辺麻友</li>
</ul>

【ブラウザ表示例】


項目1:吉田朱里
項目2:矢吹奈子
項目3:渡辺麻友

⬆︎このようにulとliを使うと、各項目の先頭が黒丸になります。
※黒丸のデザインは変えることができます。

<ol><li>のセットの場合

【HTML】


<ol>
  <li>項目1:吉田朱里</li>
  <li>項目2:矢吹奈子</li>
  <li>項目3:渡辺麻友</li>
</ol>

【ブラウザ表示例】


項目1:吉田朱里
項目2:矢吹奈子
項目3:渡辺麻友

⬆︎ulのかわりにolを使うと以下のように番号付の箇条書きになります。

このまま箇条書きを使っても良いのですが、少し寂しいのでレイアウトを変えてみます。
ulでもolでもCSSの書き方は変わりません。

まずは箇条書きのボックスを線で囲ってみます。
線で囲うにはulもしくはolに対してborderプロパティを指定します。
例として、2pxの赤色の線で囲ってみましょう。

【HTML】


<ol>
  <li>項目1:吉田朱里</li>
  <li>項目2:矢吹奈子</li>
  <li>項目3:渡辺麻友</li>
</ol>

【CSS】


 ol {
  border: 2px blue solid; 
  /*2px 赤色 １本線を指定*/
  }

【ブラウザ表示例】


項目吉田朱里
項目矢吹奈子
項目渡辺麻友

⬆︎箇条書きが赤色の1本線で囲まれました。

最後に・・・

このように<ul><ol><li>を使うことでリストを作成でき見やすく変えることが可能になります。
CSSでレイアウトもいろいろ変えられるので是非つかってみてください。