すでにメンバーの場合は

無料会員登録

GitHubアカウントで登録 Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

登録がまだの方はこちらから

Pikawakaにログイン

GitHubアカウントでログイン Pikawakaが許可なくTwitterやFacebookに投稿することはありません。

HTML5・CSS3

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

ぴっかちゃん
ぴっかちゃん

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

HTML | ulタグの使い方
1
2
3
4
5
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

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

ulタグの使用例

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

ulタグの使い方

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

ulタグの基本

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

HTML | ulタグでリストを作成する
1
2
3
4
5
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

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

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

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

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

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

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

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

type属性の廃止

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

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

HTML | type属性を使った方法
1
2
3
4
5
<ul type="circle">
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

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

HTML | HTML5のリストマーカーの変更方法
1
2
3
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
CSS | ulタグにスタイルを追加する
1
2
3
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
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
HTML | 間違った構造
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;
}

この記事のまとめ

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

8

わかった!