今回から実践編です。コードを編集できるコードエディタを準備してください。

エディタ持ってないってかたは、

オンラインエディタ「JSFiddle」もしくは「デベロッパーツール」を利用しましょう。

ただし、今後本気でやりたい方は「Visual Studio」など、ちゃんとしたやつを使いましょう。

SAKUWEB さくうぇぶ

SAKUWEB さくうぇぶ

目次

1. リストを作ってみよー！
2. 2種類のリストと記述方法
3. 順序のないリスト「ulタグ」
4. 順序のあるリスト「olタグ」
5. ul・olタグの子要素「liタグ」
6. liタグの中に、リストを作る！
7. 試しに一覧とランキング作ってみよ！

Youtubeで動画解説しています。

このブログをベースに、解説動画を作りましたので、併せてご覧ください。

チャンネル登録、宜しくお願いします。

リストを作ってみよー！

以下のコードをファイルにコピペして、確認してみましょう！

オンラインエディタを使うかたは、「HTML」にコードをコピペして、「RUN」ボタンで結果を表示してください。

<ul>
  <li>チンチラ</li>
  <li>ラグドール</li>
  <li>メインクーン</li>
</ul>
<ol>
  <li>スコティッシュ・フォールド</li>
  <li>マンチカン	</li>
  <li>混血猫</li>
</ol>

これで、2種類のリストが完成です！

2種類・・・・詳しくみていきましょう。

2種類のリストと記述方法

以下のコードは、ulタグを使った場合、olタグを使った場合のサンプルコードです。

<nav>
	<ul>
      <li>HOME</li>
      <li>SecondNav</li>
      <li>ThirdNav</li>
	</ul>
</nav>

<ol>
  <li>会員登録する</li>
  <li>ログインURLにアクセスする</li>
  <li>ログインする</li>
</ol>

ulタグ・olタグの中に、子要素のliタグを入れて値を表示します。

これが基本構造です。

表示を見ると、自動でulタグは黒丸付き、olタグは番号付きとなっていますね。

以前にも説明した通り、タグは意味を持ち合わせています。

見ていきましょう。

順序のないリスト「ulタグ」

ulタグは「unordered list」。順序のないリストという意味です。

ネコたちが横一列に並んでいますが、どっちが一番目とかはないですよね。

このようにリスト化するけど順序はない場合、たとえばナビゲーションやカテゴリリストなどに利用しますよ。

でもこの黒丸・・・いらないんだよなぁって時は、CSSで削除できます。

<style>
  ul {list-style: none}
</style>

<nav>
	<ul>
      <li>HOME</li>
      <li>SecondNav</li>
      <li>ThirdNav</li>
	</ul>
</nav>

ちなみに、値（liタグ）はいくらでも増やすことが可能です。

注意が必要なのが「コンテンツモデル」。入れ子ルールです。

ulタグ・olタグの中には、liタグしか入れられない。でしたよね。

わすれちゃった方は、過去記事を参考に。

SAKUWEB さくうぇぶ

順序のあるリスト「olタグ」

olタグは「ordered list」。順序のあるリストという意味です。

今度は、ネコたちが縦一列に並んでいます。そして、「先頭」は明白ですね。

このように、順序立てて記述したい場合、たとえば目次や手順、ランキングなどに使います。

「リスト」を使うとき、順序をつけたいか否かでどっちを使うか決めましょう。

ul・olタグの子要素「liタグ」

liタグは「list item」。リストのアイテム・中身という意味です。

親になれるのは、ulタグolタグのみです。

ですが、liタグの子要素となれるタグはたくさんあります。

箇条書きだけでなく、ちょっと複雑なリストを作りたいときや、リストの中にリストを入れたい場面も出てきますね。

ulタグolタグは、liタグの親にもなれるし、子にもなれるんです！

liタグ

タグの役割

リストアイテムを格納

親要素

ulタグ、olタグ

子要素

フローコンテンツ

SAKUWEB さくうぇぶ

liタグの中にリストを作る！

階層化リストを作ってみましょう！

この階層化は、ナビゲーションや目次などに使う場面が多いので、覚えておきましょう！

たとえば、以下に示した「ラグドールの特徴」を階層化リストで作ってみます。

<h1>ラグドールの特徴</h1>

<ul>
　<li>性格
  　<ul>
    　<li>人懐っこい</li>
    　<li>穏やかでおとなしい</li>
  　</ul>
  </li>
　<li>特徴
  　<ul>
    　<li>体が大きく、筋肉質</li>
      <li>目がクリクリ </li>
  　</ul>
  </li>
  <li>毛種
  　<ul>
    　<li>長毛</li>
  　</ul>
  </li>
</ul>

上記コードのように、liタグの中にulタグを入れれば、階層化リストが作れます。 簡単ですね！

試しに一覧とランキング作ってみよ！

以下のイメージのように、「特集一覧」と「ランキング」の2種類を作ってみてください。

さぁ作ってみてください。

しっかりタイトル名も入れましょうね！

順序なしはどっちか。

ありの場合は、どっちのタグを使うんでしたっけ？

正解はこちら

<h1>特集一覧</h1>
<ul>
  <li>新商品「ニャーズケーキ」発売！</li>
  <li>ねこの御朱印巡り！</li>
  <li>菌の繁殖を防ぐ餌入れ！</li>
</ul>

<h1>ランキング</h1>
<ol>
  <li>ねこの御朱印巡り！</li>
  <li>菌の繁殖を防ぐ餌入れ！</li>
  <li>新商品「ニャーズケーキ」発売！</li>
</ol>

簡単でしたね。

エラーになって正しく表示されなかった方は、コードの記述ミスの可能性もありますよ。

ひとつずつ確認してみてくださいね。

次回は、「説明リスト」を学びます。

順序のありなしではなく、用語とその説明をするリストです。