【HTML/CSS】箇条書き（ul,ol,liタグ）使い方まとめ【コピペOKです】

こんにちは、リバティエンジニア[?]のFUNA（フナ）です。

現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回は、HTMLで箇条書きの作り方をご紹介しようと思います。

コピペでも簡単に作れるようになっていますので、是非参考にしてみてください。

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

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

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

ulとliでの箇条書き 

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

See the Pen ul,li by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

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

プレビューのように黒点の箇条書きを表示することができます。

olとliの箇条書き

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

ulタグのかわりにolタグを使うと先ほどの黒点ではなく、番号付きの箇条書きに変わります。

See the Pen ol,li by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

プレビューをみて分かる通り、番号付きの箇条書きになっています。

ulタグとolタグの違いについて

ulタグは黒点の箇条書きになって、olタグだと数字の箇条書きに変わります。

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

【HTML/CSS】箇条書きのデザインをカスタマイズする

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

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

背景色を変える

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

背景色を変えるにはulタグもしくはolタグに対してbackgroundプロパティで色を指定します。

色の指定はカラーネームやRGBコードで記述してください。

See the Pen ul,ol デザイン by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

文字色を変える

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

実は先ほども文字色を変えていたのですが、文字色を変えるにはcolorプロパティを指定していきます。

ちなみにliタグのCSSを指定するときは基本的に下記のような書き方をします。

ul li {

}

これは「ulタグの中のliタグ」という意味の指定になりますので覚えておきましょう。

See the Pen ul,olデザイン2 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

【HTML/CSS】複数の箇条書きulタグ、olタグを入れ子にする

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

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

See the Pen 複数リスト by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

まとめ

一言に箇条書きといっても、シンプルな黒点（・）の箇条書きや数字の箇条書きがあります。

入れ子にして目次チックにしてみたりと、工夫次第では様々なカスタマイズができますね。

背景色などを変えてデザイン的にもおしゃれにしたりすることができるので、基本をしっかり押さえていきましょう。

【HTML/CSS】関連記事