箇条書きol,ul,liタグの使い方を簡単にわかりやすく説明

HTML初心者
『箇条書きってなにか特別な書き方があるの？
普通に書けばいいんでしょ？』

こんにちは、AWAKOJIです。
今日も薬剤師しながらプログラミングの勉強をしています。

ブログを書いていて、話の内容をまとめたいとき箇条書きにする場合があります。
そんなときは、迷わずHTMLの<ol>、<ul>、<li>タグを活用するようにしましょう。

この記事では、箇条書きをするときに使用する<ol>、<ul>、<li>について解説します。

この記事は5分ほどで読めるのでぜひご覧ください。
まず簡単に理解できるように下手ですが漫画を書きました。

漫画～箇条書きするなら<ol>、<ul>、<li>を活用せよ

以上、箇条書きをするときに使用する<ol>、<ul>、<li>について簡単に漫画で説明しました。

このタグを使用すれば、ブログ記事がしっかりまとめられていると認識されSEOに有利です。

ここからは文章で、<ol>、<ul>、<li>について解説します。基本から応用編までまとめたのでぜひご覧ください。

HTML箇条書き<ol>、<ul>、<li>の基本構造

箇条書きをするときに使うHTMLタグは<ol>、<ul>、<li>になります。
使うときは、①<ol>と<li>、②<ul>と<li>がセットです。

基本構造をご覧ください。

まず①<ol>と<li>です。

次に、②<ul>と<li>です。

違いをわかっていただけたと思います。

①は、<ol>で全体をはさみ、箇条書きの項目をそれぞれ<li>ではさみます。
項目に番号がついてブラウザに表示されます。

②は、<ul>で全体をはさみ、箇条書きの項目をそれぞれ<li>ではさみます。
項目に番号はつかずにブラウザに表示されます。

<ol>はordered list(順番になっているリスト)
<ul>はunorderded list(順番になっていないリスト)
<li>はlist item(項目)
という意味です。

普通に書いちゃダメなの？

ブラウザに表示された結果を見ると、別に<ol><ul><li>を使わずとも同じものを書けそうですよね？

• おはよう
• こんにちは
• こんばんは

・おはよう
・こんにちは
・こんばんは

下のAとBは何が違うと思いますか？

上のブラウザ表示は、<ul>と<li>を使っていますが、
下のブラウザ表示は使わずに書いています。

見た目は一緒ですよね？

それでも、箇条書きを書くときは<ol><ul><li>を使うようにすべきです。

なぜなら、人間にとって同じでも、コンピュータにとっては違うためです。

コンピュータはBを見たとき、ただの文字の羅列だと認識します。
一方、Aを見たとき、文字が箇条書きになっていると認識します。

その結果、Aの方が、内容が整理されていると判断され、googleなどの検索で、Aが上位に入るわけです。

<ol>、<ul>、<li>タグ応用編

ここからは応用編です。

<ol>、<ul>、<li>を使っていろんな箇条書きができるようになりましょう！

箇条書きの中に箇条書き

ul箇条書きの中にol箇条書きを書きます。

次に、ul箇条書きの中にol箇条書きを書きます。

ul箇条書きの中にul箇条書きやol箇条書き、
ol箇条書きの中にul箇条書きやol箇条書きを書くことができます。

ただ、注意すべきなのはあくまでulタグやolタグの直下には、liタグを置くことです。
箇条書きの中に箇条書きを書く場合は、liタグの中に、ulタグやolタグを入れるようにしましょう。

数字ではなくアルファベット

olタグで項目の前に表示されるのは数字です。
数字以外のものを表示する方法があります。

例えば、<ol>を<ol type=”a”>とすると小文字のアルファベットを表示させることができます。

このほかにも下記のものを表示できます。

• <ol type=”A”>で大文字のアルファベット
• <ol type=”i”>で小文字のローマ数字(ⅰ.ⅱ.ⅲ.)
• <ol type=”Ⅰ”>で大文字のローマ数字(Ⅰ.Ⅱ.Ⅲ.)

逆数字にする

olタグを使えば、1からの数字でカウントアップされます。

これを大きい数字からカウントダウンされるように示してみましょう。

<ol>を<ol reversed>とすれば、カウントダウンされます。

途中から数字

<ol>を使って表示される数字が途中からになるようにしてみます。

<ol>を<ol start=”2”>とすれば、２から表示されます。

途中からの数字でカウントダウンは以下の通りです。

<ol>を<ol reversed start=”5”>とすれば、５からの数字でカウントダウンされます。

ちなみにカウントダウンの場合、1の次は0,-1,-2となっていきます。

数字を飛ばしたい場合

数字を飛ばしたい場合は以下の通りです。

<li>を<li value=”3”>とすることで2の表示を飛ばすことができました。

先頭記号を変える

ulタグのときに先頭に表示される記号を別の記号に変えたいときはCSSを書く必要があります。

HTMLの表示は、基本通りです。

黒丸だったのが、円になりました。

circle以外にもいろいろがあります。

list-style-typeプロパティの値をnoneとすれば、なくせます。

list-style-typeプロパティの値をsquareとすれば、四角にできます。

好きな画像を使いたい場合はlist-style-imageプロパティを使います。

 

list-style-positionプロパティの値をinsideにするか、outsideにするかで、先頭の記号の位置を少し変えることができます。

微妙な違いですが、insideなら少し内側、outsideなら少し外側にずらすことができます。

初期値はoutsideになっています。
つまり特に設定しなくても外側になっているということです。

まとめ

この記事をまとめます。

• 箇条書きをする場合、ol,liタグかul,liタグを使用した方がよい
• 数字の箇条書きならol,liタグを使う
• ただの箇条書きならul,liタグを使う
• 箇条書きの中に箇条書きを書くことができる
• 数字をアルファベットに変えることができる(ol type=”a”)
• ulの記号を変えることができる(listy-style-type)
• 画像にすることもできる(list-style-image)
• 位置を変えることもできる(list-style-position)

箇条書き一つとっても、HTML＆CSSは奥が深いですね。
あまりこだわり過ぎて、箇条書きの表示に時間がとられるもの問題です。

とにかくユーザに見やすい表示を心がけましょう！

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか？

• ググるのが面倒
• エラーの対応に1日消費
• 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の２つ。

• TechAcademy
  web系、アプリ系いずれもOK
  完全オンラインでプログラミングを学習したい方
• テックキャンプ
  web系、アプリ系いずれもOK
  教室またはオンラインで学習したい方

この２つには以下のような特典もあります。

TechAcademy

• 1週間の無料体験
• １コース申し込むと、もう１コースプレゼント

テックアカデミー

• 1週間以内に申告あれば全額返金
• 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20～30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

• ランサーズ：1件10万くらい
• 中小企業：1件30万くらい
• 大手企業：桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。