CODING

[HTML] リストの作り方ul・ol・liタグ

投稿日:


どうも、べ〜やんです。

今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。





リストとは


ul・ol・liタグを使うとリストや箇条書きを作ることができます。

目次や手順、メニュー、スライドショーなどを作るときによく使われます。

<ul> <!-- もしくは<ol>タグ -->
  <li>リストの中身</li>
  <li>リストの中身</li>
  <li>リストの中身</li>
</ul>

ulタグ


ulタグはUnordered Listの略で、番号なしで黒い丸付きのリストになります。

メニューやスライドショーなどに。

See the Pen VwwWGMP by beeyan (@orientado) on CodePen.


olタグ


olタグはOrdered Listの略で、順番の番号付きリストになります。

目次や手順などに。

See the Pen wvveEPj by beeyan (@orientado) on CodePen.


liタグ


liタグはulタグ、olタグの中で使うタグです。

ulタグ、olタグの直下はliタグしか使えません、pタグやdivタグなどは使えません。liタグの中ならpタグなども使えます。

See the Pen OJJgoZZ by beeyan (@orientado) on CodePen.


リストの中にリスト


リストの中にリストを作りたいときは、liタグの中でリストを作ります。

目次などに。

<ol>
  <li>
      リストの中身
    <ul>
       <li>リストの中にリスト</li>
       <li>リストの中にリスト</li>
    </ul>
  </li>
  <li>リストの中身</li>
  <li>リストの中身</li>
</ol>

See the Pen KKKqGgK by beeyan (@orientado) on CodePen.


CSS

CSSを使ってリストのデザインを変更できます。


リストマーク

ulタグやolタグに、list-style-type: 値;を与えることでリストマークを変更できます。


ulタグのマーク

list-style-type: none;   /* マークなし */
list-style-type: disc;   /* 黒丸(デフォルト) */
list-style-type: circle;   /* 白丸 */
list-style-type: square;   /* 黒四角 */

See the Pen JjjJaaR by beeyan (@orientado) on CodePen.


olタグのマーク

list-style-type: decimal;   /* デフォルト */
list-style-type: decimal-leading-zero;   /* 0付き */
list-style-type: cjk-ideographic;   /* 漢数字 */
list-style-type: lower-roman;   /* ローマ字(小文字) */
list-style-type: upper-roman;   /* ローマ字(大文字) */
list-style-type: hiragana;   /* ひらがな */
list-style-type: katakana;   /* カタカナ */
list-style-type: hiragana-iroha;   /* ひらがな(イロハ) */
list-style-type: katakana-iroha;   /* カタカナ(イロハ) */
list-style-type: lower-latin;   /* ラテン語(小文字) */
list-style-type: upper-latin;   /* ラテン語(大文字) */
list-style-type: lower-greek;   /* ギリシャ語(小文字) */

See the Pen wvveELQ by beeyan (@orientado) on CodePen.


横並び

ヘッダーメニューなどで横並びのリストを作るには、ulタグやolタグにdisplay: flex;を与えます。

See the Pen KKKqGKO by beeyan (@orientado) on CodePen.


おわりに


今回はHTMLでリストや箇条書きをざっくり作る方法を紹介しました。

リストの使い道は多く、メニューやスライドショーなど一見リストに見えないものまでリストで作る事もできます。

背景色や枠線をつけるなどCSSを使えば、もっといろんなリストが作れますね。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[CSS] visibilityで非表示にする方法

どうも、べ〜やんです。 今回は、要素を不可視にするvisibilityプロパティを紹介します。 visibilityとは visibilityとは要素を不可視にできるプロパティです。 使用される値は三 …

[CSS] 3点リーダーの作り方

どうも、べ〜やんです。 今回は、3点リーダーの作り方を紹介します。 3点リーダーとは 3点リーダーって知ってますか? 文章が長くて表示仕切れない場合に、はみ出た部分を「…」とピリオド3つで …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

[CSS] 変形transformの使い方

どうも、べ〜やんです。 今回は、デザインを変形させるtransformを紹介します。 transformとは transformは変形を指定するプロパティで、transitionとセットで使用すること …