【HTML５・CSS３】 ulタグの使い方をコードと図解形式で理解しよう

ulタグとは、ウェブサイト上で順序のないリストを作成する時に使用するタグのことです。

1
2
3
4
5
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

ブラウザで確認すると、以下のようにリストを作成することが出来ています。

ulタグを使うことによってメニューリストを作成出来たり、アジェンダなどリスト項目の情報を分かりやすく表現する事が出来ます。

ulタグの使い方

リンクをコピーしました

この章では、olタグの使い方について１つ１つ丁寧に解説します。

ulタグの基本

リンクをコピーしました

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

1
2
3
4
5
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

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

詳しくは、olタグを徹底的解説を参考にしてください。

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

リンクをコピーしました

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

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

リンクをコピーしました

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

type属性の廃止

リンクをコピーしました

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

以前までのリストマーカーの変更方法は、以下の通りです。

1
2
3
4
5
<ul type="circle">
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

そして、HTML5のリストマーカーの変更方法は、以下の通りです。

1
2
3
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>

1
2
3
ul {
    list-style-type: circle;
}

リストのデザイン

リンクをコピーしました

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

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

リンクをコピーしました

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

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

パンくずリスト

リンクをコピーしました

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

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

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

リンクをコピーしました

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

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

サイドバー

リンクをコピーしました

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

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

ulタグの注意点

リンクをコピーしました

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

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

1
2
3
4
5
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>

1
2
3
4
5
6
<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 -->
<ul>
  <li>リスト1</li>
  <li>リスト2</li>
  <li>リスト3</li>
</ul>


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

役に立ったらSHARE♪

• twitter
• facebook
• はてブ