HTMLで箇条書き- ul , ol , li タグの使い方まとめ –

HTML/CSS

HTMLタグ「ul」「ol」「li」で箇条書きの作り方

HTMLでは[ ul, ol, li ]の3つのタグを使うことで、箇条書き( リスト )を作ることができます。

まずはこのみっつのタグの基本的な使い方を一緒に見ていきましょう。

ulとliでの箇条書き 

まずは、[ ul ]と[ li ]での箇条書きの書き方を見ていきます。

IT博士
IT博士

さっそくサンプルコードを見ていきましょう！

<ul>
  <li> 1つめの項目 </li>
  <li> 2つめの項目 </li>
  <li> 3つめの項目 </li>
</ul>

書き方はこのようになります。

簡単に説明すると、<ul>タグで囲んだ範囲が箇条書きの対象になります。

上記のコードをブラウザに表示してみると、

  • 1つめの項目
  • 2つめの項目
  • 3つめの項目

このように”黒ちょぼ”の箇条書きを表示することができます。

olとliの箇条書き

次に、[ ol ]と[ li ]での箇条書きの書き方を見ていきます。

[ ul ]のかわりに[ ol ]を使うと先ほどの”黒ちょぼ”ではなく、次のように番号付きの箇条書きになります。

<ol>
  <li> 1つめの項目 </li>
  <li> 2つめの項目 </li>
  <li> 3つめの項目 </li>
</ol>

上記のコードをブラウザに表示してみると、

  1. 1つめの項目
  2. 2つめの項目
  3. 3つめの項目

このように先ほどの”黒ちょぼ”ではなく、次のように番号付きの表示をすることができます。

ulとolの違いについて

ここまで解説して、もうわかってきているとは思うのですが、[ ul ]を使った箇条書きと[ ol ]を使ったものは、”黒ちょぼ”か”数字”かの違いになります。

どちらもHTMLとCSSで取り扱い方法などははほとんど変わらないため、このふたつはセットで使い方をおぼえておきましょう！

 

箇条書きのスタイルをアレンジする

箇条書きはこのまま使ってもシンプルでかっこ良いのですが、この箇条書きをデザインしてカスタマイズすることができます。

ここでは箇条書きの見た目を変えるための方法を紹介します。

[ ul ]でも[ ol ]でもCSSで書いていたとしても書き方は変わらないので安心してください♪

背景色を変える

まずは、箇条書きボックスの背景色を変えてみましょう！

背景色を変えるには[ ul ]もしくは[ ol ]に対して”background”プロパティで色を指定します。
例えば青色を指定して背景色を変えてみます。

<ol>
  <li> HTMLとCSSで箇条書きを学ぶ </li>
  <li> HTMLとCSSの基本 </li>
  <li> HTMLとCSSの応用 </li>
</ol>

このようなHTMLで箇条書きを記述しているとします。
この箇条書きをCSSでデザインしていきます。

ol {
  background: blue;
}

こうすることで、箇条書き部分の背景色を変更することができます。

IT博士
IT博士

色の指定は今までと同じで、カラーネームやRGBコードで記述してください♪

文字色を変える

次に、文字色を変えてみようと思います。

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

<ol>
  <li> HTMLとCSSで箇条書きを学ぶ </li>
  <li> HTMLとCSSの基本 </li>
  <li> HTMLとCSSの応用 </li>
</ol>

このHTMLの箇条書きにCSSを適応させていきます。

ol {
  background: blue;
}
ol li {
  /* olの中にある li の文字色を変える */
  color: blue;
}

複数の箇条書きul、olを入れ子にして表示する

ulの箇条書きの中に別のulをいれることもできますし、ulの中にolを入れることもできます。

実際にサンプルコードを見てましょう。

<ul>
  <li>HTML</li>
  <li>CSSデザイン
    <ol>
      <li>文字色</li>
      <li>背景色</li>
      <li>フォント</li>
    </ol>
  </li>
  <li>javascript</li>
</ul>

このように入れ子にすることで、

  • HTML
  • CSSデザイン
    1. 文字色
    2. 背景色
    3. フォント
  • javascript

このような目次チックな箇条書きを再現することができます。

まとめ

今回は、HTML/CSSの箇条書きについて解説しました。

一言に箇条書きといっても、シンプルな”黒ちょぼ”の箇条書きや”数字”の箇条書きや入れ子にして目次チックにしてみたりと、様々な方法があり、背景色などを変えてデザイン的にもおしゃれにしたりすることができるので、基本をしっかり押さえていきましょう。

~はじめてのCSS~ プロパティについて
CSSのプロパティについて、そもそもCSSプロパティとは？というところから、実際のプロパティの記述方法などを初心者の方でもわかりやすく、なるべく専門用語は使わないように解説しました。
itthestudy.com

なにか質問があればお問い合わせフォームでお気軽にお問合せください。
可能な限りすぐにお返事します。
一流プログラマを目指して頑張りましょう！

コメント