サクッとWEBサイトを作る「SAKUWEB(さくうぇぶ)」

[猫図解]リストを作ってみよー!ulタグ・olタグ・liタグ

今回学ぶのは、リスト(箇条書き)を制御するulタグolタグliタグです。

 

ナビゲーションやお知らせ、フロアマップ、目次などなど、使いどころは多岐にわたります。

物事を整理して、より可読性を上げたい場面で重宝する箇条書きを学んでいきますよ!

ol・ul・liタグ

タグの役割

リスト化する。

タグの使いどころ

ナビゲーション、お知らせ、フロアマップ、目次、プライバシーポリシーなど

 

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

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

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

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

 

 

目次

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

 

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

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

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

 

【初心者入門】Bootstrapを使ってサイト作り ドロップダウンメニューの紹介

 

リストを作ってみよー!

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

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

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

以下のようになっていますか?

 

・チンチラ

・ラグドール

・メインクーン

1.スコティッシュ・フォールド

2.マンチカン

3.混血猫

 

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

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

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

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

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

ulタグはこんなイメージになります。

・HOME

・SecondNav

・ThirdNav

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

olタグの結果はこんな感じ。

1.会員登録する

2.ログインURLにアクセスする

3.ログインする

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

これが基本構造です。

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

 

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

見ていきましょう。

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

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

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

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

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

 

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

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

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

cssで、ulタグに「list-style: none」を指定して、黒丸を非表示にする指示です。

結果はこんなイメージです。

Home

SecondNav

ThirdNav

 

同じようにolタグも番号を削除することが可能ですよ。

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

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

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

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

【時短しよー】htmlタグの記述ルールを学ぼう
【時短しよー】htmlタグの記述ルールを学ぼう

SAKUWEB さくうぇぶ

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

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

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

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

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

 

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

 

ulタグ

タグの役割

順序のないリスト

スタイル

黒丸が付与

子要素

liタグのみ

olタグ

タグの役割

順序のあるリスト

スタイル

番号が付与

子要素

liタグのみ

 

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

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

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

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

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

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

liタグ

タグの役割

リストアイテムを格納

親要素

ulタグ、olタグ

子要素

フローコンテンツ

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種類を作ってみてください。

 

特集一覧

・新商品「ニャーズケーキ」発売!

・ねこの御朱印巡り!

・菌の繁殖を防ぐ餌入れ!

ランキング

1.ねこの御朱印巡り

2.菌の繁殖を防ぐ餌入れ!

3.新商品「ニャーズケーキ」発売!

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

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

 

順序なしはどっちか。

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

 

正解はこちら

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

簡単でしたね。

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

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

 

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

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

Recent Post

Category Post

Back To Top