<ul>タグ <ol>タグ <li>タグとは

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

<ul>タグについて

<ul>タグは英語で「unordered list」の略で、順序のないリストを表示する際に使用します。 リスト項目は、<li>タグで指定します。
<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。
順序のあるリストを作成する際には<ol>タグを使用してください。

<li>タグについて

<li>タグは英語で「unordered list」の略で、リストの項目を記述する際に使用します。

<ol>タグについて

<ol>タグは英語で「ordered list」の略で、順リスト項目は、<li>タグで指定します。

<ul><li>のセットの使い方について

【書き方について】

<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. 項目1:吉田朱里
  2. 項目2:矢吹奈子
  3. 項目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. 項目吉田朱里
  2. 項目矢吹奈子
  3. 項目渡辺麻友

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

リストのテキストの色を変えてみる

テキストの色を変えるときはcolorプロパティをliタグに対して指定します。
ちなみにliタグのCSSを指定するときは基本的にul li　{〜}というような書き方をします。
これは「ulタグの中のliタグ」という意味の指定です。

【HTML】

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


【CSS】

 ol li {color: #43acff;
  /*olの中のliの文字色を変える*/
}

【ブラウザ表示例】

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

⬆︎テキストの色が変わりさらに見やすくなりました。

最後に・・・

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

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, ,