liの使い方を覚えてリストを作れるようにするHTMLでは「ul」「ol」「li」のタグを組み合わせて使うことで、文章を箇条書きにしてリスト化する要素を作ることができます。実際の表示ではul、ol、liのタグで箇条書きリストにすることで、文章の内容を分かりやすく伝えることができるという利点もあります。ulとolのリストを入れ子にしたときの作り方で迷うことがないようにHTMLタグのul、ol、liの使い方を覚えておこうと思います。liを使うときの知識HTMLのタグ「ul」「ol」「li」の使い方はolとulでリストを表し、liでolかulのリストの中のリスト項目を作り出します。ulとolの直接の子要素は、必ずliタグを使います。liタグ以外のタグやテキストをulやolの子要素にすることはありません。HTMLのタグ「ul」「ol」「li」の使い方の基本としてはulタグとliタグをセットolタグとliタグをセット2パターンで使うという基本の使い方です。List」の略「ul」と言います。HTMLのulタグで作ったリストは非序列リストを作ります。実際のリスト表示は以下の画像のように、文書の先頭に「順番のないリスト」を作り出します。非序列リストや順番のないリストというのは、ulタグでリストを作ると、ulリストはリストの先頭に黒い点が自動で付きます。序列がないリストの対照的なリストが番号の付いたリストです。List」を略した名前です。実際のリスト表示は「順序のあるリスト」を作り出します。先に説明したulの非序列リストに対してolタグは序列リストなのです。下記の画像はolタグを使ってマークアップしたHTMLの表示ですolで作ったリストの順序は番号が連番になったリスト作成をすることができます。ulやolの要素だけではリスト作りは未完成で、ulやolの子要素になるHTMLタグを使う必要があります。上記で説明してきた「ulタグ」と「olタグ」の子要素に使うのが「liタグ」です。liはulとol以外にもmenu要素の子要素にすることもできます。ulやolはそれぞれのリストがどんな表現の形式にするかを表すことのできるタグでしたが、liタグは子要素としてリスト内の文章を箇条書きで表示するためのHTMLタグです。そのためHTMLタグのliの開始タグと終了タグで囲われた文章がリスト形式になってブラウザに表示されます。liタグでリストを作るリストタグ「ul」「ol」「li」はブロックレベル要素です。ul、olタグの子要素にできるのはliのみです。ulとolタグの下にliタグしか入れることができないことについて、少し間違えやすかったことが私にはありました。ulとol要素の直下にはliしか入れられませんが、ulやolの下に書いたli要素には他の要素も入れられるということです。li要素は内部にブロック要素、インライン要素のどちらも含むことができます。ほとんどのHTML要素を含むことができるため、自由度が高いです。実際にどんな感じでulやolでリストを作ってli要素を入れていくかやってみました。番号なしリストまずは番号なしリストの作り方の基本形です。<li>ほにゃらら</li></ul>ulタグを書いて番号なしリストを表します。ul要素の中にliタグを書きます。するとブラウザの実際の表示ではliで箇条書きされた文章の先頭に黒い点が表示されて非序列リストを作ることができてます。このリストの作り方がもっとも基本的な作り方です。番号付きのリストそして番号付きのリストの基本形の作り方です。<li>ほにゃらら</li></ol>olタグを書いて、olの子要素にするliタグを書きます。単純に考えるとulとolはアルファベットの「uかo」を書き換えるだけですね。ブラウザで表示を確認するとliで箇条書きにしたリストの文章に先頭には番号が連番になったリストを作ることができます。olを使ったので順番のあるリストになります。Advertisement作り方の考え方どんなリストにしたいのか?リスト内容が繋がりのある内容ならolで番号をつけて順序をつける単一してる内容ならulで非序列のリストにするといった考え方で使うことが多いです。リストの使い分けすることでHTMLドキュメントをブラウザが理解しやすくもなります。リストを入れ子にする次は少しリストの基本形の作り方を応用して、作ったリストを入れ子にしていく作り方です。</li></ul>入れ子の基本としては、入れ子の一番上にするliタグを先に作ります。親要素のliと子要素にするliの間にolで子要素が番号付きリストになるようにします。したらolの中にliタグでリストを作っていきます。このとき一番上のliタグの閉じタグは子要素のolの閉じタグの後に書きます。進化させて親と子と孫まで作るときもやってみました。</ul></li></ul>HTMLをパッと見ただけでは難しそうです。作り方のコツとしては、親のulで全部のリストを囲む。リストの階層を下げた最後のliタグの閉じタグをすぐに閉じないで、その下に階層にするリストを表すulかolを書く。その中が、その階層の中身なのでliで文章を作る。階層を下げる手前のliは閉じないことと、次の階層を始めるときはulかolで、その階層を番号付きにするか非序列にするかを書いてあげるということです。Advertisementですが、その後調べていて違うパターンもあったので紹介です。</ol></ol>親リストの番号をつけて、それぞれの親のリスト項目を作るときの方法です。この作り方の場合は親リストの閉じタグは、すぐに閉じてしまうパターンで作っていて、それぞれの親リストの番号と子になったliにも番号がいてます。応用ができるのだと実感しました。リストをリンクする作ったリストの項目をリンクする場合です。作ったリストをグローバルメニューにするときにリンクさせるかと思います。子要素のliにHTMLのaタグでhref属性にしてあげます。href="#">どこまで遷移</a></li></ul>子要素のliのリスト項目ごとにリンクリストにしていくことができます。CSSで点を消して画像にするulで作ったリストの先頭には自動で黒い点がつきますが、この点を消して代わりに画像にします。このときはHTMLではなくCSSを使います。none;にして黒ポチを消します。ulやolをプロパティにしてあげるとリストの黒ポチが消えますが、liに対しても有効です。url()ul、olやliに属性つけたりして指定します。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.05.19他の言語やブラウザとの関係性をつなげるHTMLを私は今までなんとなく覚えて使ってました。2019.12.06HTMLでnoindexタグを書くときは、どのような書き方をすればいいのか理解できるようにしておこうと思います。WordPress.。