HTML/CSS

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

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

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

 

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

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

 

この記事はこんな方におすすめ

  • HTMLで箇条書きを作りたい
  • 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タグだと数字の箇条書きに変わります。

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

 

ulタグとolタグの違い

ulタグは黒点(・)での箇条書きで、olタグは数字の箇条書き

 

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

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

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

 

ポイント

ulタグでもolタグでも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】関連記事

【CSS】たった1行のコピペで簡単!object fitで画像をトリミングする方法

CSSで画像をトリミングしたい時にたったの1行で実装できる方法を解説します。「object-fit」についてどのような時に使うのか、その使い方や応用の仕方を覚えてみてください。

【コピペOK】CSSでcounterを利用して自動ナンバリングする方法

今回はCSSの「counter」をコピペでも簡単に実装できる方法・ソースコードをご紹介します。このcounterを利用することで、CSSだけで自動でナンバリングを実装することができます。意外と知られていないのですが、「1 2 3 4」の基本のものや「第1章 第2章 第3章 第4章」と書き出しをつけたりすることができて、幅広く応用できます。

【コピペOK】CSSだけで背景を斜めに区切る方法【レスポンシブ対応】

今回は、HTML/CSSで背景を斜めに区切ってデザインする方法を、コピペでも簡単に実装する方法を解説します。ランディングページやコーポレートサイトなどの作成時に背景を斜めに区切ってレイアウトされているサイトを良く見かけますが、実装の仕方は簡単なので、ぜひ覚えておきましょう。

【コピペでOK】HTMLで直接ファイルをダウンロードできるように設定する方法

今回は、HTMLでファイルのダウンロードを設定する方法について解説します。方法としては、aタグにdownload属性を入れるだけで、ファイルをダウンロードするリンクを作成することができます。ここでは、具体的な書き方と動作を確認していこうと思います。

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。

【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!

今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。

【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介

HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。

【HTML/CSS】コピペでOK!チェックマークを簡単に実装する方法

【HTML/CSS】cssで簡単にチェックマークを実装する方法を解説します。コピペで簡単に作ることができるので、実際に自分で作ってみてさらなるカスタマイズなどを行ってみてください。


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.