【HTML5・CSS3】ulタグを徹底解説!

HTML5・CSS3

ulタグとは

ulタグとは、ウェブサイト上で順序のないリストを作成する時に使用するタグのことです。ulタグを使うことによって、メニューリストを作成出来たり、アジェンダなどリスト項目の情報を分かりやすく表現する事が出来ます。とても便利なタグになるので是非マスターしていきましょう!

ulタグの使い方

ulタグは、下記の様にリスト項目を表すliタグとセットで記述します。

html
1
2
3
4
5
6
<!-- HTML -->
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

[ ブラウザの表示 ]

  • リスト1
  • リスト2
  • リスト3

※リストに順番をつけたい場合、ulタグの部分をolタグに変える事で簡単に変更することが出来ます。

リストマーカーを変更する

デフォルトのリストマーカーは黒丸(disc)になっていますが、値を変更することでリストマーカーのスタイルも変更することが出来ます。(※リストマーカーとは、先頭記号のことです。)

リストマーカーのスタイルの種類

リストマーカーのスタイルの種類は、30種類以上あります。
その中でも代表的なものをリストアップしました。(デフォルトの黒丸●は、discになります)

左寄せ 真ん中
none リストを表示しない
circle 白丸(○)
square 黒四角(■)
box 白四角(□)

type属性の廃止

以前まで、ulタグにtype属性を追加する事でリストマーカーを変更することが出来ましたが、html5で廃止されました。代わりに、CSSでulタグにlist-style-typeを指定する事で、リストマーカーを変更出来ます。

[ 以前までのリストマーカーの変更方法 ]

html
1
2
3
4
5
6
<!-- HTML -->
<ul type="circle">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

[ HTML5のリストマーカーの変更方法 ]

html
1
2
3
4
5
6
7
8
9
10
11
<!-- HTML -->
<li>- リスト1</li>
<li>リスト2</li>
<li>リスト3</li>



/* CSS */
ul {
    list-style-type: circle;
}

リストのデザイン

CSSと組み合わせる事で、下記の様におしゃれなリストを作ることも出来ます!

cssでデザインされた箇条書きリスト

ulタグが使用される箇所とは?

Webサイトには、ulタグを使う場面が多くあります。その中でもulタグが使われている代表的な部分が下記になります。

  • パンくずリスト
  • グローバルナビゲーション
  • サイドバー

パンくずリスト

パンくずリストとは、Webサイトを訪れたユーザーが今サイト内のどの階層にいるのか表示するリストの事です。パンくずリストは、下記の画像の様に現在いる階層が視覚的に分かりやすくなっています。

パンくずリストの例

通常パンくずリストは、コンテンツの最上部に記載される事が多いです。パンくずリストをWebサイトに設置すると、ユーザーの使いやすさが高くなったり、検索エンジンが効率的に情報を収集出来る様になるので是非設置していきましょう。

グローバルナビゲーション

グローバルナビゲーションとは、主要なコンテンツへのリンクが各ページに共通して設置される案内リンクの事です。下記の画像で言えば、赤線で囲ってある部分がグローバルナビゲーションになります。

Webサイトの構造を表しているイラスト

グローバルナビゲーションは、主要コンテンツがリンクになっている事で、Webサイト内のショートカット機能の役割も担ってくれます。

サイドバー

サイドバーとは、Webサイトで主要コンテンツエリアとは、区別して作成されたエリアになります。サイト構成も下記の画像の様に2カラムだったり、両サイドにサイドバーが置かれた3カラムだったりと様々です。

Webサイトのサイドバーの位置を示したイラスト

サイドバーに置かれるコンテンツの代表的なものにランキングやバナー広告が表示される事が多いです。

ulタグの注意点

ulタグの注意点ですが、ulタグの直下の子要素には、特定のタグしか入れてはいけません。

ulタグの直下に他のタグを入れてしまうと、検索エンジンに正確にリスト構造が伝わらなくなってしまうからです。

html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 正しい構造 -->
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>


<!-- 間違った構造 -->
<ul>
  <h2>リスト1</h2>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

他にもリストタグには、olタグ(順序付きリスト)やdlタグ(定義リスト)があるので、使用する際リストタグ直下には特定のタグが入る事に注意しましょう。

実際にやってみよう!

下記の見本の様に、白丸タイプのリストマーカーを作成してみましょう!

[ 見本 ]

リストの見本

See the Pen pBmoOm by miyajima yuya (@pikawaka) on CodePen.


答え
1
2
3
4
5
6
7
8
9
10
11
<!-- HTML -->
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>



/* CSS */
ul {
    list-style-type: circle;
}
まとめ

ulタグは、 情報を分かりやすくまとめられる便利なタグです。ulタグをマスターすれば、メニューリストを作成したり、横並びのリストを作成出来たりと色々な場面で活躍するので是非使ってみてください!