liとは何？タグを理解してHTMLを使いこなそう！

HTMLを活用していると、「liタグ」をよく目にするのではないでしょうか。本記事では、liタグの基礎から活用方法までを解説します。

HTMLを活用しているとよく目にする「liタグ」ですが、あまり使い方がわかっていない方も多いのではないでしょうか？

本記事では、liタグの基礎知識から活用方法まで解説します。

また記事の最後には、liタグを含めたHTMLの学習に使えるコンテンツを紹介しますので、これからHTMLの勉強がしたい方はぜひ参考にしてください。

liタグとは？

liタグの「li」とは「リストアイテム」の略であり、画面にリストを表示させるためのタグです。ilタグ単品ではなくほかのタグと組み合わせることで、より見やすくできます。具体的にどういったタグなのかを、詳しく解説します。

HTMLで使用するタグ

liタグは、HTMLで使用するタグです。そもそもliタグは箇条書きのリストの中身を示すだけのものなので、単独で使用しても意味がありません。HTMLとあわせて使用することで、どのような箇条書きタイプになるのかを決められます。

具体的には、ヘッダーのメニューを作りたいと思ったときには横並びにできる、スマートフォンのメニューを作るために縦並びにできるなど、多くの活用方法があるタグです。

リスト表示をする際には必ずといっていいほど使うタグなので、詳しい使い方から応用の仕方まで、幅広く覚えましょう。

単品ではなくそのほかのタグと組み合わせて使う

liタグはHTMLで使用するタグの中でも、単品ではなくほかのタグと組み合わせて使用するためのものです。

たとえば、olタグ（ordered list（順序のあるリスト））やulタグ（Unordered List（順序のないリスト））と組み合わせることによって、適切に使用できます。

リストに関するそれぞれのタグは、どのような項目をリスト化するのかによって使い分けるのがおすすめです。

また、liタグはリストの中身を表示するためのタグです。ほかのタグと組み合わせて使用することで、箇条書きの頭に黒丸や○・数字などをつけられます。ほかにもさまざまな表現の仕方があるので、「どのタグをつけることでどういった効果があるのか」を詳しく学ぶ必要があるでしょう。

ulタグと組み合わせて使ってみよう

liタグはulタグと組み合わせて使うことで、順番のないリストを作成できます。使う前に以下のサンプルコードを参考にしてみてください。

<ul>
  <li>ケーキ</li>
  <li>チョコレート</li>
  <li>まんじゅう</li>
</ul>

上記のようにコードを書くと、以下のような結果が表示されます。

• ケーキ
• チョコレート
• まんじゅう

このように、リスト形式で表示されます。注意したいポイントは、ulタグ、もしくはliタグはどちらも単独で使うものではないことです。これらのタグはあくまでも組み合わせて使うことでリストとしての役割を果たします。

先頭を白丸に変える場合

リストの先頭を白丸に変える場合は、上記のコードにプラスして、白丸を表す「circle」を活用する必要があります。「circle」を使用したサンプルコードは以下の通りです。

<ul>
  <li type="circle">ケーキ</li>
  <li type="circle">チョコレート</li>
  <li type="circle">まんじゅう</li>
</ul>

上記を出力すると、以下のような結果が表示されます。

〇ケーキ
〇チョコレート
〇まんじゅう

先頭を四角に変える場合

リストの先頭を丸ではなく、四角に変えることも可能です。その場合は、circleではなく「sqare」を使用します。「sqare」を使用したリストのサンプルコードは、以下の通りです。

<ul>
  <li type="sqare">ケーキ</li>
  <li type="sqare">チョコレート</li>
  <li type="sqare">まんじゅう</li>
</ul>

先頭を黒丸に変える場合は、sqareの部分を「disc」に変えるだけなので、typeを一つ覚えれば変更や修正が容易になります。

黒点を消す方法

場合によっては、リストの先頭に表示される「黒点」を消す表現を求められることがあるでしょう。

黒い丸を入れるにはコードに「type=”disc”」を追加する必要がありますが「type=”disc”」を入れなくてもデフォルトで黒い点がつきます。もしこの黒い点が必要ないときは、以下のサンプルコードのように記述します。

<ul style="list-style: none;">
  <li>ケーキ</li>
  <li>チョコレート</li>
  <li>まんじゅう</li>
</ul>

「style=”list-style: none;”」をulの隣に置くことで、先頭の黒い点を消せます。

olタグと組み合わせて使ってみよう

liタグと組み合わせて使うことができるのは、ulタグだけではありません。リストの中身に順番をつけたいときには、olタグを使用します。olタグを使うときのサンプルコードは、以下の通りです。

<ol>
  <li type="1">ケーキ</li>
  <li type="1">チョコレート</li>
  <li type="1">まんじゅう</li>
</ol>

一見すると、すべて数字が「1」になっていて意味がないのでは、と思うかもしれませんが、実際に出力してみると以下のような結果が表示されます。

1.ケーキ
2.チョコレート
3.まんじゅう

開始する数字を変更したい場合

前章で記述したサンプルコードのtype=”1″の部分を記述しない場合でも、デフォルトで以下のように出力されます。

1.ケーキ
2.チョコレート
3.まんじゅう

ただし、1から始まる連続した数字ではなく、任意の数字から開始したい場合は、type=”1″を省略して、value=”（任意の数字）”を入れます。たとえばリストの2番目に「3」を表示させるサンプルコードは、以下の通りです。

<ol>
    <li>ケーキ</li>
    <li value="3">チョコレート</li>
    <li>まんじゅう</li>
</ol>

上記のようなコードを書くことで、以下のように出力されます。

1.ケーキ
3.チョコレート
4.まんじゅう

先頭をローマ字にしたい場合

リストの先頭の数字をローマ字にしたい場合は、type=”1″の「1」の部分を適宜アルファベットに置き換えます。サンプルコードは、以下の通りです。

<ol>
    <li type="A">ケーキ</li>
    <li type="A">チョコレート</li>
    <li type="A">まんじゅう</li>
</ol>

出力をすると、頭の数字が以下のように「A」「B」「C」となります。

A.ケーキ
B.チョコレート
C.まんじゅう

大文字で表示させたい場合は「type」に設定するアルファベットを大文字にし、小文字で表示させたい場合は、「type」に設定するアルファベットを小文字にします。

箇条書きを装飾してみよう

箇条書きの作り方を理解したら、次は応用を試してみてください。箇条書きを装飾すると見た目もよくなり、見やすくなります。

ここからは、箇条書きの装飾の仕方を解説します。

周囲を線で囲う方法

リストの周囲を線で囲うには、CSSコードで「border」を使用して装飾します。サンプルコードは以下の通りです。

ul, ol {
  background: #fcfcfc;
  padding: 0.5em 0.5em 0.5em 2em;
  border: solid 2px gray;
}

上記のコードを見てみると、｛｝内の一番上の行で背景色（#fcfcfc;）を指定しています。次の行で、ボックス内の余白、最後の行に線の種類や太さを表す部分が入っています。この場合は、グレイの枠線で囲った箇条書きが出力されるでしょう。枠の色を変えたい場合は、3行目のgrayの部分を変更してください。

emとは、そのときに使用しているフォントのサイズを「1」とした場合の単位のことです。上記のサンプルコードの場合は、リストの余白を以下のように上から時計回りに指定したことになります。

• 上の余白を0.5em
• 右の余白を0.5em
• 下の余白を0.5em
• 左の余白を2em

背景色を変更する方法

背景色を変更するサンプルコードは以下の通りです。

ul, ol {
  background: #fcfcfc;
  padding: 0.5em 0.5em 0.5em 2em;
  border: solid 2px gray;
}

このコードの｛｝内の一番上、background: #fcfcfc;のコロンの横に指定するカラーコードを変更すると、背景色の変更が可能です。#f3fbffに変更すると背景色が水色に変わります。カラーコードを変更して試してみてください。

文字色を変更する方法

文字の色を変更するのも、背景を変えるのと似た方法で可能です。サンプルコードは以下の通りです。

ol li {
  color: black;
}

上記のように、colorのコロン横の記述を変更するだけで、文字の色を変えられます。
blackと記述すると、文字の色が黒になります。そのほかの部分では、文字の色だけでなくフォントも変更できますので、試してみてください。

liタグをさらに使いこなそう

liタグを使って、さらに細かい作業が可能です。たとえば箇条書きの途中で改行する方法や、ulタグとolタグを同時に使う方法などもあります。うまく活用し、より見やすい画面を作成しましょう。

箇条書きの途中で改行する方法

箇条書きの途中で改行するには、<br>を使用します。
を使った改行のサンプルコードは以下の通りです。

<ul>
  <li>ケーキは<br>ホールで<br>買おう</li>
  <li>チョコレート</li>
  <li>まんじゅう</li>
</ul>

上記のコードを出力すると、以下のような結果が表示されます。

• ケーキは
  ホールで
  買おう
• チョコレート
• まんじゅう

改行を使いすぎると見にくくなるので、注意が必要です。

ulタグとolタグを同時に使う方法

ulタグとolタグを同時に使うには、「入れ子」にします。サンプルコードは以下の通りです。

<ul>
  <li>ケーキ</li>
  <li>チョコレート
    <ol>
        <li>ビター</li>
        <li>ミルク</li>
        <li>ホワイト</li>
    </ol>
  </li>
  <li>まんじゅう</li>
</ul>

出力すると、以下のような結果が表示されます。

・ケーキ
・チョコレート
1.ビター
2.ミルク
3.ホワイト
・まんじゅう

ulタグとolタグは逆にすることも可能です。

liタグやHTMLを学ぶおすすめ学習コンテンツ

liタグやHTMLを学ぶには、さまざまな学習コンテンツがあります。プログラマーでなくてもHTMLを使うことがあるため、学習しておくのがおすすめです。ここでは、効率的にliタグやHTMLを学ぶためのコンテンツを、詳しく解説します。

Progate

Progate

「Progate」は、イラスト中心のスライドで学習できるコンテンツです。実際にブラウザ上でコードを書いて実行しながら学習できるため、プログラミングを実践的に学びやすい学習コンテンツといえます。

初歩的なレッスンであれば無料で学べますが、公開されているすべてのレッスンを見るには、月々1,078円（税込）の会費が必要です。まとまった学習時間が取れない方のために、アプリでも学習できる点がメリットといえるでしょう。

ドットインストール

ドットインストール

「ドットインストール」は、わずか3分程度の動画でHTMLやCSSを学ぶことができるプログラミング学習サイトです。スマートフォンからの視聴も可能なため、電車の移動中しか時間が取れない方でも、無理なく学習を進められます。

解説が音声で流れるため、画面を見ながらコードを打ち込みやすいことが特徴です。ただし、それほど詳しい解説がないため、動画を一時停止しながら確認しつつ学習を進める方法をおすすめします。

SkillHub

SkillHub

わかりやすい動画を見ながら学習できるのが「SkillHub」です。ビデオの一部はYouTubeでも公開されているため、お試しで見られます。

13もの講座が無料で受講でき、その中にはHTMLを基礎から学べる講座やCSS入門講座などもあるので、初心者でも学びやすい学習サイトです。いきなり有料レッスンを受けるのはハードルが高いと感じている方は、無料サービスから始めてみましょう。

とほほのWWW入門

とほほのWWW入門

「とほほのWWW入門」は、サンプルコードが検索できる学習サイトであり、とにかく必要なコードを書いて覚えたい方に向いています。

HTMLやCSSのサンプルコードは1,000種類以上も用意されていて、コードの使用例を検索するときに有効です。基礎から学べるほかの学習サイトと併用することで、よりコードに関する理解を深められます。

HTMLでliタグをうまく活用してみよう

箇条書きのリストは、Webサイトの開発やプログラミングといったさまざまな場面で必要になります。単に箇条書きに使うだけでなく枠をつけたり文字の色を変えたりと、いろいろな方法で装飾することもできます。

liタグをうまく活用して、Webサイトの文章をすっきり見やすくしましょう。