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】関連記事

【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   この記事はこんな方におすすめ HTM ...

【2020年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】

2020年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。

【HTML/CSS】 縦方向・横方向で中央揃えしてみよう!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。   私は現役でフリーランスエンジニアとしてWebサービスや ...

[HTML5] タグ全部紹介します!

目次 はじめにHTML5タグ一覧まとめはじめに 今回はHTML5におけるHTMLタグをすべて公開し、解説していこうと思います。意外と結構多いんですが、わかりやすく簡単に解説していきます! 各タグを詳し ...

【HTML/CSS】コピペでOK!パンくずリストの作り方や基礎を解説

こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTML/CSSでサイトを制作するときなどに ...

【HTML/CSS】 "max-width"と"min-width" 使い方まとめ

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 HTML/CSSでレスポンシブデザインをするためには必ず習 ...

[HTML] 見出しタグ(h1~h6)を正しく扱う-保存版-

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTMLにおける見出しタグの使い方について解説します ...

[HTML] divとspanタグの違いは?誰にでもわかりやすく解説

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今回はHTMLの<div>タグと<spa ...

最近の投稿

「ワーケーション」とは?環境省が推している理由やメリットを解説

「ワーケーション」とは?2020年7月に、菅官房長官が「ワーケーション」の普及について表明してSNSやニュースで「ワーケーション」が話題になりました。環境省が推進している理由や導入メリット・デメリットを解説します。

レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

その会社は大丈夫?知っておきたいブラック企業の特徴

就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

Copyright© FUNA BLOG , 2020 All Rights Reserved.