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アニメーションを簡単に実装!コピペ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でサイトを制作するときなどに ...

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.