【箇条書き】ul ol liの使い方まとめ

wp-how-to-use-ul ol li WordPress

箇条書きを使う際の『・』や『1.2.3』のみでは味気ないですよね？
HTMLとCSSを使えば簡単にリストの種類を増やすことができます。
今回はCSSを使って簡単に箇条書き『ul ol li』をカスタムしていきましょう。
カスタムの種類は自分次第で無限にできちゃいます！

編集長K
KTA

POINT
『ulとli』『olとli』はセットで使いましょう

ulとは？

『unordered list（順序がないリスト）』の略で、順序がない箇条書きのリストを表示する際に使用するタグのことです。
箇条書き(ul)表示は以下の通り

  • 順序がない箇条書きのリスト
  • 順序がない箇条書きのリスト
  • 順序がない箇条書きのリスト
HTML
<ul>
 <li>順序がない箇条書きのリスト</li>
 <li>順序がない箇条書きのリスト</li>
 <li>順序がない箇条書きのリスト</li> 
</ul>

もしくは

<ul>
 <li type="disc">順序がない箇条書きのリスト</li>
 <li type="disc">順序がない箇条書きのリスト</li>
 <li type="disc">順序がない箇条書きのリスト</li>
</ul>

となります

編集長K
KTA

『・』のみのよくある箇条書きの表記ですね

注意

このtype属性は非推奨なので CSS のlist-style-typeプロパティを使用するようにしましょう。

olとは？

『ordered list（順序のあるリスト）』の略で、順序のある番号付きのリストを表示する際に使用するタグのことです。
箇条書き(ol)表示は以下の通り

  1. 順序のある番号付きのリスト
  2. 順序のある番号付きのリスト
  3. 順序のある番号付きのリスト
HTML
<ol>
 <li>順序のある番号付きのリスト</li>
 <li>順序のある番号付きのリスト</li>
 <li>順序のある番号付きのリスト</li>
</ol>

もしくは

<ol>
 <li type="1">順序のある番号付きのリスト</li>
 <li type="1">順序のある番号付きのリスト</li>
 <li type="1">順序のある番号付きのリスト</li>
</ol>

となります

編集長K
KTA

『1.2.3』と順序のある箇条書きですね

あわせて

リスト番号の種類に重要性がない限り、CSS のlist-style-typeプロパティを使用するようにしましょう。

liとは？

『list item』の略で、リストの項目を表示するために使用するタグのことです。

この辺りまでは前提として押さえておきましょう！

Contents
  1. ul表記の種類
  2. ol表記の種類
  3. 入れ子のリストの書き方
  4. カスタマイズの確認
  5. さいごに

ul表記の種類

編集長K
KTA
ul表記の種類をまとめていきます

  • 黒丸アイコン
  • 白丸アイコン
  • 四角アイコン
  • 三角右向アイコン
  • 三角下向アイコン

HTMLのみで記述

黒丸アイコン
  • 黒丸アイコン
  • 黒丸アイコン
  • 黒丸アイコン
新人
新人

さっきもでてきたやつですやん

白丸アイコン
  • 白丸アイコン
  • 白丸アイコン
  • 白丸アイコン
HTML
<ul>
 <li type="circle">白丸アイコン</li>
 <li type="circle">白丸アイコン</li>
 <li type="circle">白丸アイコン</li>
</ul>
四角アイコン
  • 四角アイコン
  • 四角アイコン
  • 四角アイコン
HTML
<ul>
 <li type="square">四角アイコン</li>
 <li type="square">四角アイコン</li>
 <li type="square">四角アイコン</li>
</ul>

CSS『list-style-type』プロパティを使用する【ul編】

編集長K
KTA

推奨としては以下のように【CSS】でlist-style-typeを使用するようにしましょうね！

See the Pen
【ul】square by kta (@ktamachi)
on CodePen.

編集長K
KTA
私はclass名をつけた方がいじりやすかったので上記のようなclassを設定しています

ol表記の種類

編集長K
KTA
ol表記の種類をまとめていきます

  1. 通常の数字列
  2. 頭に0がついた数字列
  3. ハングル文字の数字列
  4. ひらがな文字列
  5. ひらがないろは文字列
  6. 小文字のアルファベット文字列
  7. 大文字のアルファベット文字列
  8. 小文字のローマ数字列
  9. 大文字のローマ数字列
  10. start 属性

HTMLのみで記述

通常の数字列
  1. 数字列
  2. 数字列
  3. 数字列
HTML
<ol>
 <li>数字列</li>
 <li>数字列</li>
 <li>数字列</li>
</ol>
小文字のローマ字列
  1. 小文字のローマ字列
  2. 小文字のローマ字列
  3. 小文字のローマ字列
HTML
<ol type="i">
 <li>小文字のローマ字列</li>
 <li>小文字のローマ字列</li>
 <li>小文字のローマ字列</li>
</ol>
大文字のローマ字列
  1. 大文字のローマ字列
  2. 大文字のローマ字列
  3. 大文字のローマ字列
HTML
<ol type="I">
 <li>大文字のローマ字列</li>
 <li>大文字のローマ字列</li>
 <li>大文字のローマ字列</li>
</ol>
小文字の英字列
  1. 小文字の英字列
  2. 小文字の英字列
  3. 小文字の英字列
HTML
<ol type="a">
 <li>小文字の英字列</li>
 <li>小文字の英字列</li>
 <li>小文字の英字列</li>
</ol>
大文字の英字列
  1. 大文字の英字列
  2. 大文字の英字列
  3. 大文字の英字列
HTML
<ol type="A">
 <li>大文字の英字列</li>
 <li>大文字の英字列</li>
 <li>大文字の英字列</li>
</ol>
start 属性
  1. start 属性
  2. start 属性
  3. start 属性
HTML
<ol start="3">
 <li>start 属性</li>
 <li>start 属性</li>
 <li>start 属性</li>
</ol>
編集長K
KTA
整数値を持つ属性で、リスト項目の序数の開始値を指定します。この値は、番号付けの種類が文字やローマ数字であっても、常にアラビア数字 (1, 2, 3, など) で指定します。例として 『3』 の文字や “ⅲ” のローマ数字から始める場合はstart=3 を使用します。

CSS『list-style-type』プロパティを使用する【ol編】

See the Pen
【ol】list by kta (@ktamachi)
on CodePen.

入れ子のリストの書き方

①olの中にulをいれるver

See the Pen
olul入れ子例 by kta (@ktamachi)
on CodePen.

②ulの中にulを入れる

See the Pen
ulの中にulを入れる by kta (@ktamachi)
on CodePen.

カスタマイズの確認

編集長K
KTA

list-style(type)に対してCSSが効いているか確認してみましょう

スーパーリロード⇒キャッシュクリアの順でPCを操作してみてください。

ブラウザ別スーパーリロード方法

編集長K
KTA
ブラウザによってスーパーリロードとキャッシュクリアの方法が異なりますので簡単にまとめたので参考にしてみてください！
スーパーリロードとは?

ブラウザに残っているキャッシュをスルーして、最新ページの情報を読み込む方法です！

【Google Chrome】
【Microsoft Edge】
  • 『Ctrl』+『F5』
  • 『Shift』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Ctrl』+『』
  • 『Shift』+『』
【Safari】
  • 『Shift』+『』
  • 『Ctrl』+『R』
【FireFox】
  • 『Ctrl』+『F5』
  • 『Ctrl』+『Shift』+『R』
  • 『Shift』+『』

ブラウザ別キャッシュクリアの方法

キャッシュクリアとは?

ブラウザに残っているキャッシュを削除して、Webサイトのサーバーから新しいデータを取り込む方法です

【Google Chrome】
  • ブラウザ右上の設定メニュー（・が縦に３つ並んでいるボタン）をクリックして「設定」を選ぶ
  • ページ下の方にある「詳細設定」をクリック
  • 「プライバシーとセキュリティー」をクリックして、「閲覧履歴データの削除」をクリック
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「データ消去」をクリックする
【Microsoft Edge】
  • 画面右下の・が３つ並んだアイコンをクリック
  • 「設定」をクリック
  • 「プライバシー、検索、サービス」をクリック
  • 「クリアするデータの選択」を押す
  • 「キャッシュされた画像とファイル」にチェックを入れる
  • 「今すぐクリア」を押す

さいごに

編集長K
KTA
テーマによってセレクタが異なる場合があります。

  • ディベロッパーモードで必ずセレクタを確認
  • 該当セレクタを確認
  • CSSをコピペしCSSを効かせる
注意

カスタムは自己責任でやりましょうね！
wp-about-custom-aveterk-1

コメント