こんにちは、リバティエンジニア[?]の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アニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。
-
【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ HTM ...
-
【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】
2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。
-
【HTML/CSS】 縦・横方向で中央揃え(中央寄せ)してみよう!【コピペOK】
今回はHTML/CSSで要素を縦と横方向で中央揃え(中央寄せ)する方法について、簡単にコピペで実装できるようにいくつかのパターンを紹介していこうと思います。上手く中央寄せできない場合などにぜひ参考にしてください。
-
HTML5のタグを全部まとめて一覧でご紹介!【詳細リンク付き】
今回は、HTML5のHTMLタグをすべて公開し、解説していこうと思います。各タグを詳しく解説するページも順次作っていきますので、できたものからリンクで飛べるようまとめておきます!
-
【HTML/CSS】コピペでOK!パンくずリストの作り方や基礎を解説
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTML/CSSでサイトを制作するときなどに ...