箇条書きulとol!liタグを入れ子にする方法で、スッキリ見やすいブログへ♪

シェアする

HTMLタグの番号付きリスト<ol>や番号なしリスト<ul>の項目<li>をどう書いたら良いのか、リストの中にリストを入れ子にする書き方や使い方タグの意味を説明します。

検索エンジンはそれらHTMLタグの違いで意味を理解しているので、ブログ運営者も知っておきたいところです。以下の不明点が解るページになります。

  • 箇条書きであるHTMLタグol・ul・liのザックリした意味
  • リストを入れ子にして使いたい
  • 文章をスッキリした項目にしたい

手書きで箇条書きを書くのと同じデザインを、ブログでHTMLタグでどうやって書くか。箇条書きを作る方法を見ていきましょう!

リストを入れ子にして、文章をスッキリ変身!

スポンサーリンク

HTMLタグリストとは何!?

<li>リストの意味

リスト<li>は(後述の)序列の有無を表すol・ulタグの子要素に使われ、開始タグ<li>から終了タグ</li>が箇条書きの項目として認識されます。

コレがリストの項目となるワケです。

リストの使い方。親要素ol・ulを付け序列の重要性を表す

リストliタグを囲む親要素ol・ulがありますが、項目に順番の無有をあらわします。親要素olタグとulタグ、意味の違いは下記の通り。

olタグ
ordered listの略で、序列ありの箇条書きリスト。<li>項目</li>の親要素でolタグで囲む。

ブラウザでの表示例(テーマでstyle済み)

  1. 項目1
  2. 項目2

olタグで囲むことによって、liタグ内の項目順番の意味を持つ

ulタグ
unordered listの略で、序列なしの箇条書きリスト。<li>項目</li>の親要素としてulタグで囲む。

ブラウザでの表示例(テーマでstyle済み)

  • 項目
  • 項目

項目の順番を重要としない場合は、ulタグで囲む。

ポイント

『olタグ・ulタグ』のどちらで<li>項目</li>を囲うかによって、『順番がある・ない』とユーザーだけでなく、HTMLタグを見る検索エンジンにも伝える。

目次2.1.2『クローラーは、HTMLタグを理解し情報を読み取る』などを参考まで。

LINK初心者ができるSEO!検索エンジンの仕組みから説明しよう

ol・ulどっちが番号ありのタグか迷ったとき『ordered list』の前にunが付く方がulだから、番号なし!っと思い出してください^^

リスト<li>の基本的な書きかた

子要素になる<li>項目</li>『liタグ』に、親要素『序列なしのulタグ』か『序列ありのolタグ』を囲んで成立です。ul・olには、liである項目が1つは必須ってことで、序列ありのolは2つ以上あるときに使用すれば良いって事になりますね。

今使ってるテーマでの表示は下記の通り。

  • 項目
  1. 項目
  2. 項目

リスト<li>の入れ子

リストを使うと文章として書くより、解りやすいだけでなく見た目もスッキリしますよね。

リストの中に項目を増やしを入れ子にすると見出しのように階層がついて、関連が解りやすいだけでなく、パッと見ても単語が拾いやすいです。

序列の有無によって、使い方例をあげるので、見てみましょう^^

liを入れ子にする場合

序列を重要としないulタグの項目liタグを入れ子にする、HTML書きかたについて。たとえば、『果物の種類』をあげる場合を紹介します。

※序列を重要とするランキングの場合は、olを使ってください。

  • いちご
    • あまおう
    • あすかルビー
    • とちおとめ
  • りんご
    • ふじ
    • つがる
    • 王林
  • ぶどう
    • 巨峰
    • ピオーネ
    • デラウエア
ulの項目『いちご』の中前に『いちごの種類の3項目』ul liを入れる

ulの項目liタグ要素『いちご』の中に、『いちごの種類の3項目』ul liを入れる例。

入れ子にしたい親の『項目の内容』と『</li>』終了タグの間に、ulリストを丸々入れればOK!HTMLタグに階層を付けると解りやすいので下記ソースをご覧ください。
<ul>
<li>いちご
<ul>
<li>あまおう</li>
<li>あすかルビー</li>
<li>とちおとめ</li>
</ul>
</li>
<li>りんご
<ul>
<li>ふじ</li>
<li>つがる</li>
<li>王林</li>
</ul>
</li>
<li>ぶどう
<ul>
<li>巨峰</li>
<li>ピオーネ</li>
<li>デラウエア</li>
</ul>
</li>
</ul>

いちご、りんご、ぶどうの『<li>各種類</li>』の中『</li>の前』に、<ul>と<li>のセットを入れる、下記▼画像の感じですね。

ul liの中にul liを入れ子にするHTML例。

ul liの中にul liを入れ子にするHTML例。

ulは順番を重要としないですが、好きなもの順にする場合。

  • ulをolに置き換えて、序列を作ればOK!

ulのliに更にulのliと入れ子にしたときのHTML

さらに入れ子にする場合は、下記のようになります。

  • 果物の種類
    • いちご
      • あまおう
      • あすかルビー
      • とちおとめ
    • りんご
      • ふじ
      • つがる
      • 王林
    • ぶどう
      • 巨峰
      • ピオーネ
      • デラウエア
  • 野菜の種類

文章をリストにして、ブログをスッキリ読みやすくする

上述の例えどおり例えば、果物の種類を文章にした場合とリストにした場合。パッと見の違いを見てください。

果物の種類はいちご、りんご、ぶどうなどがあります。いちごの種類はあまおう・あすかルビー・とちおとめ。りんごには、ふじ・つがる・王林。ぶどうは、巨峰・ピオーネ・デラウエアなどあります。

果物の種類には、下記のようなモノがあります。

  • いちご
    • あまおう
    • あすかルビー
    • とちおとめ
  • りんご
    • ふじ
    • つがる
    • 王林
  • ぶどう
    • 巨峰
    • ピオーネ
    • デラウエア

文章が詰まってゴチャゴチャしたものが、いきなりスッキリして見える効果があります。

極端な例ですが、このようにリストを使うと文章から項目へ変わって、見やすさが激増する場合もあるので、効果的に使ってみてはいかがでしょうか^^

リストのカスタイマイズ

リストの項目が気になりかけたら、次に目にとまるのは、リストをより見やすくさせたいです。そうなると、リストのデザインや余白も気になってきたり。

番号ありol・番号なしulのカスタマイズがありますが、オススメの装飾は下記!

リストのデザイン

このように見やすいだけではなく、リストだと分かりやすく、且つ可愛くカスタマイズしたい場合。注意事項も最初にかいてるので、参考にどうぞ。

LINKol番号付きリストのカスタマイズ!デザインをきれいに変更する方法。リストの数字を任意の番号3から始めたい時のCSS

番号なしリストulのカスタマイズ

番号なしリストulのカスタマイズについて、注意点がいくつかあります。スタイルの変更で使ってはいけない・入れ子になるものに使うと面倒な装飾。他の番号なしリストへの影響なども考慮したいところです。

ulリストについて。また後日、ザックリっとページを完成させたら、追記します^^;

さいごに

ビバ★りずむでは、初心者向けページで文章が多いので、少しでもユーザーが見やすくなるよう改善してきたし、これからも続けていかなきゃ❦と言ったトコロです。

リストに限ったことではないですが、CSS・HTMLの書きかた1つで、ブログがほんのり見やすくなります。リストを使って、あなたらしく見やすいブログを作って行きましょうね。

それでは、かうたっくでした。

スポンサーリンクと関連記事

関連記事(スポンサーリンク含む時あり)

シェアする

フォローする

  • Follow Me →
スポンサーリンク
トップへ戻る