HTMLでリストを使う方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLでリストを使う方法について解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

 

HTMLでリストを使う方法

HTMLでは項目をリストにまとめるタグが存在します。このリストをつくるタグにより、ただの言葉のあつまりが、ひとつのまとまりをもったリストであるということをコンピューターに伝えることができます。

 

リストをつくるタグには、おもに以下のものがあります。

・順序が関わるリスト　ordered list <ol>〜</ol>

数字で番号が振られるリストをつくります。

 

・順番が関わらないリスト　unordered list <ul>〜</ul>

番号が振られない羅列されたリストをつくります。

 

・リストの項目　list item <li>〜</li>

語句や文を囲み、それがリストの項目であるということを指定します。

 

・定義リスト description list <dl>~</dl>

<dl>タグを使ったリストは、HTMLで定義リスト（dlタグ）を使う方法をご覧ください。

 

ordered list の order の語源は、ラテン語の「列」という言葉です。ですので、<li>タグの項目には「きめられた順序をもつもの」をいれましょう。

順番に例をみていきましょう。

 

 

<ol>タグの使い方

<ol>タグをつかって順序のついたリストをつくりましょう。

<ol>
  <li>きらきら星変奏曲</li>
  <li>メヌエット ト長調</li>
  <li>トルコ行進曲</li>
  <li>子犬のワルツ</li>
  <li>ピアノ協奏曲第2番</li>
</ol>

HTML上で数字を記入していないにもかかわらず、ブラウザ上では番号付きのリストができました。ブラウザがordered listを指示する<ol>タグを理解して番号をふってくれたのです。

 

 

[PR] Webデザインで副業する学習方法を動画で公開中

<ul>タグの使い方

順序のつかないリストには<ul>タグをつかいましょう。

<ul>
  <li>モーツァルト</li>
  <li>バッハ</li>
  <li>ベートーベン</li>
  <li>ショパン</li>
  <li>ラフマニノフ</li>
</ul>

unordered listなので、数字ではなく黒丸付きのリストができました。こちらも、ブラウザが<ul>タグを理解して自動的に黒丸をつけてくれたものです。

 

 

リストタグの入れ子構造

さらにリストタグを組み合わせて、入れ子構造のリストをつくることができます。

<ul>
  <li>ベートーベン作
    <ul>
      <li>エリーゼのために</li>
      <li>トルコ行進曲</li>
      <li>交響曲第9番</li>
    </ul>
  </li>
  <li>ショパン作
    <ul>
      <li>子犬のワルツ</li>
      <li>華麗なる大円舞曲</li>
      <li>ノクターン第2番</li>
    </ul>
  </li>
</ul>

<ul>タグでかこまれた<li>ベートーベン作</li>と<li>ショパン作</li>のリストのなかに、さらに<ul>タグでリストを加えました。 第一階層の黒丸リストのなかに、第二階層の白丸リストが追加されましたね。

 

<ul>タグと<ol>タグの組み合わせリストもつくってみましょう。

<ul>
  <li>ミートソースパスタ
    <ol>
    <li>玉ねぎとひき肉をいためる</li>
    <li>ケチャップ・ソースで味付けして煮込む</li>
    <li>2のあいだにパスタをゆでる</li>
    <li>3のパスタに2をのせてできあがり</li>
    </ol>
  </li>
  <li>焼きプリン
    <ol>
    <li>卵・砂糖・牛乳をボールにいれてよく混ぜる</li>
    <li>1を茶こしでこして容器にいれる</li>
    <li>オーブンで焼いてできあがり</li>
    </ol>
  </li>
</ul>

<ul>タグでつくったリストと同じように、今度は<ul>タグのリストのなかに<ol>タグのリストを入れ子にしました。

 

このように、HTMLには入れ子の構造がたくさんでてきます。パソコンのファイルをディレクトリ内で保存していくように、第一階層のなかに、第二階層、第三階層…と階層を順々にいれていくという基本構造をおさえておきましょう。

 

ちなみにリストタグは、実際のWebサイト上のメニューバー（グローバルナビゲーションといいます）をつくる際によく使われています。

Webサイトをつくる上でも重要なタグなので、ぜひ覚えておきましょう。

 

今回はHTMLでリストを使う方法についてご紹介しました。

さらにHTMLの基礎を学びたい場合は、HTMLで略語を表現する方法も合わせてご覧ください。

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。