【初心者向け】結構使う！ul 要素についてまとめてみた【HTML】

HTML では ul 要素を結構使う、と私は思います。Web ページで何か要素が並んでると大体 ul 要素ですね。「グローバルナビ」や「写真ギャラリー」、何か似たような要素が並んでいたたら ul 要素でつくられているイメージです。

トリッキーそうな要素に見えて実は結構、当たり前のように使われる超重要で基本中の基本の ul 要素についてまとめてみました。

ul は
unordered list の略

ul 要素は unordered list の略だと考えられます。意味は、順序不同（unordered）リスト（list）です。

順序不同と言われましても、、、ってなりますが、順序が特に重要ではないという解釈が HTML では分かりやすいのかなと思います。実際に Web ページとしてブラウザに出力すると箇条書きみたいな感じになります。（何もスタイルを指定していないデフォルト状態の場合。）

漠然と「ul」と覚えるのもいいですが、なかなか覚えられないよ！って人は、意味を知っておくと意外とすんなり覚えられるかもしれないのでぜひ。

ちなみに
対となる「ol」という、１.２.３.と順序付きで箇条書きみたいにブラウザに出力する要素があります。さて、この ol は何の略でしょうか？！

……

そう！
ordered list ですね！

意味というか意味合いは、順序付き（ordered）リスト（list）です。

本来の意味からしたら少し違和感を覚えますが、HTML 要素としての“unordered”に対しての“ordered”ということなのでしょう。

というような感じで、
ul、ol と闇雲に覚えるよりも、元となる意味を知っておくことで、よりすんなりと覚えられると思いますし、セマンティックに使い分けもできるのでおススメです！

ul 要素の子要素として
内包できるのは
li 要素のみ

ul 要素の子要素として使用できるのは、li 要素のみです。（script 要素、template 要素も入れらることを許容されていますが、ひとまず気にしないで問題ないと思います。）

正確には、０以上の li 要素です。（W3C）

参考記事

【HTML5】コンテンツモデルについて調べてみた

ul 要素の記述方法

ul 要素は基本的に li 要素とセットで使用します。ul 要素の子要素として li 要素を任意の数を内包することが。

<ul>
 <li>みかん</li>
 <li>りんご</li>
 <li>バナナ</li>
</ul>

また、子要素として入れる li 要素のことをリストアイテムなんて呼んで説明されたりすることも多いので頭の片隅に入れておきましょう。

何もスタイルを指定していない ul 要素は、Web ページ（ブラウザ）に点でリスト化された箇条書きのように出力されます。

See the Pen ul-default by MATSUDAI (@matsudai) on CodePen.

点を消すには
list-style: none;

リストの左側の点を消すのは、list-style: none;でスタイリングします。セレクタ（スタイルの指定先）は通常、ul 要素が推奨されるようです（W3C）。li 要素をセレクタにしても機能しますが、コードが簡潔というのと、親要素の ul 要素に指定するだけで子要素すべてに適用されるという一貫性の面からも ul 要素をセレクタにするやり方で問題ないかと思います。また、各リストを個別にスタイリングする場合に、子要素である li 要素でスタイリングできるという拡張性の余地も残せますね！いろいろ試してみましょう！

デフォルトの設定ではリストの左側にパディングがあります。必要に応じて、ul 要素に対してパディングを打ち消すスタイルを指定しましょう。

padding-left: 0;やpadding: 0;で打ち消すことが可能ですが、ブラウザのデフォルト設定でpadding-inline-start: 40px;が設定されているので、こちらも０にしておくと安心ですね。

そのリスト、リセットされているかも？

ul 要素を記述する際、既存のサイトに手を加える場合は最初からリストマーカーが出現しない場合があります。というか、ほとんどがそうだと思います。特に困ることは無いとは思いますが、一度、デベロッパーツールなどで調べてみてはいかがでしょうか。

関連記事

【初心者向け】デベロッパーツールで CSS をいじってみる

逆に、普段一から Web ページを作らない人が急にリストマーカーが出てきて困る場合もあると思います。その場合はぜひ本記事を参考に対応していただけると幸いです。

まとめ

ul は順序が特に重要ではないリストを作るための要素です。li 要素を内包し、そこにリストにしたい内容を記述します。リストマークは、display-style プロパティによって消したり変更したりすることが可能です。

あらゆるWeb ページで多用する要素なので使いこなせるようになりましょう！

参考・出典

・W3C. 「4.5.6 The ul element」. https://www.w3.org/TR/2011/WD-html5-20110525/grouping-content.html#the-ul-element, 2024年5月18日閲覧。

・W3C. 「list-style」. https://www.w3.org/TR/CSS2/generate.html#propdef-list-style, 2024年5月20日閲覧。

・MDN. 「<ul>: 順序なしリスト要素」. https://developer.mozilla.org/ja/docs/Web/HTML/Element/ul, 2024年5月18日閲覧。

・MDN. 「padding-inline-start」. https://developer.mozilla.org/ja/docs/Web/CSS/padding-inline-start, 2024年5月20日閲覧。

・weblio. 「unorderedとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/unordered, 2024年5月16日閲覧。

・とほほのWWW入門. 「<ul> – 順序無しリスト」. https://www.tohoho-web.com/html/ul.htm, 2024年5月16日閲覧。

・とほほのWWW入門. 「<ol> – 順序付きリスト」. https://www.tohoho-web.com/html/ul.htm, 2024年5月16日閲覧。