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

HTML初心者向けに【リストを使う方法】を解説した記事です。順序が関わるリストの「ol」タグ、順番が関わらないリストの「ul」タグを紹介。また、リストタグの入れ子構造をサンプルコードつきで解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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>

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

 

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

<ul>タグの使い方

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

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

maestro
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>

famous_music

<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>

easy_recipe

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

 

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

 

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

list_navsample

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

 

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

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

 

大石ゆかり

メニューバーに使われている、って説明されてるんですけど、デザインが全然違いますね?

田島悠介

HTMLでは文書構造の定義なので、デザインの変更にはCSSが必要なんだよ。

大石ゆかり

リストマークを消したり、横に並べたり出来るんですか?

田島悠介

CSSで出来るね!

また、現役エンジニアから学べる無料のプログラミング体験会もオンラインで実施しているので、ぜひ参加してみてください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。