v7.1.0

List

Table of Contents

Detail

リスト装飾を作るエレメント CSS。

Basic

Pattern
Other
  • リストはインデントしてテキストが折り返した場合に読みやすくする
  • リストはインデントしてテキストが折り返した場合に読みやすくする
  • リストはインデントしてテキストが折り返した場合に読みやすくする
  • リストはインデントしてテキストが折り返した場合に読みやすくする
<ul class="list is-disc">
  <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
  <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
  <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
  <li class="item">リストはインデントしてテキストが折り返した場合に読みやすくする</li>
</ul>
SelectorDescription
.listリスト装飾の起点として使うセレクター。
.item.list 直下に置くセレクター。
ModifierDescription
.is-disc.list に付与すると塗り円のリスト装飾になります。
.is-circle.list に付与すると線円のリスト装飾になります。
.is-square.list に付与すると塗り四角のリスト装飾になります。
.is-kome.list に付与すると米印のリスト装飾になります。
.is-decimal.list に付与すると数字の番号リストになります。

Note

.is-note はレイアウト調整を含んだ特殊なモディファイアです。リストの頭に合判となる ※1 を付けて文章のインデントを揃える・合判が歯抜けになるなど、パターン化しづらい要望に対処するための CSS です。

.item 直下には、span などでアイコンや不規則な装飾をインラインの HTML で記述します。.item が Flexbox となり直下要素を横並びにするため、急な要望の変化に対応しやすくなります。

Other
  • ※1
    自由な見出しをインラインで置きつつインデント
  • ※2
    自由な見出しをインラインで置きつつインデント
  • ※3
    自由な見出しをインラインで置きつつインデント
  • ※4
    自由な見出しをインラインで置きつつインデント
<ul class="list is-note">
  <li class="item"><span>※1</span><div class="text is-0">自由な見出しをインラインで置きつつインデント</div></li>
  <li class="item"><span>※2</span><div class="text is-0">自由な見出しをインラインで置きつつインデント</div></li>
  <li class="item"><span>※3</span><div class="text is-0">自由な見出しをインラインで置きつつインデント</div></li>
  <li class="item"><span>※4</span><div class="text is-0">自由な見出しをインラインで置きつつインデント</div></li>
</ul>
ModifierDescription
.is-note.list に付与すると .item が Flexbox となり直下要素を横並びにします。

Variables

Name
Default Value
Compiled Value
  • Name
    $selector-list
    Default Value
    .list
    Compiled Value
    .list
  • Name
    $selector-list-item
    Default Value
    .item
    Compiled Value
    .item
  • Name
    $modifier-list-disc
    Default Value
    .is-disc
    Compiled Value
    .is-disc
  • Name
    $modifier-list-circle
    Default Value
    .is-circle
    Compiled Value
    .is-circle
  • Name
    $modifier-list-square
    Default Value
    .is-square
    Compiled Value
    .is-square
  • Name
    $modifier-list-kome
    Default Value
    .is-kome
    Compiled Value
    .is-kome
  • Name
    $modifier-list-decimal
    Default Value
    .is-decimal
    Compiled Value
    .is-decimal
  • Name
    $modifier-list-note
    Default Value
    .is-note
    Compiled Value
    .is-note
  • Name
    $list-margin-left
    Default Value
    1.5em
    Compiled Value
    1.5em
  • Name
    $list-item-margin-top
    Default Value
    0.25em
    Compiled Value
    0.25em
  • Name
    $list-disc-item-list-style
    Default Value
    disc outside
    Compiled Value
    disc outside
  • Name
    $list-circle-item-list-style
    Default Value
    circle outside
    Compiled Value
    circle outside
  • Name
    $list-square-item-list-style
    Default Value
    square outside
    Compiled Value
    square outside
  • Name
    $list-decimal-item-list-style
    Default Value
    decimal outside
    Compiled Value
    decimal outside
  • Name
    $list-kome-unicode
    Default Value
    unquote('"') + unquote(str-insert("203B", "\", 1)) + unquote('"')
    Compiled Value
    "203B"
  • Name
    $list-note-item-margin-left
    Default Value
    0.25em
    Compiled Value
    0.25em

Mixins

  • musubii-style-list()
  • musubii-style-list-not-first-item()
  • musubii-style-list-item-child-list()
  • musubii-style-list-disc-item()
  • musubii-style-list-square-item()
  • musubii-style-list-circle-item()
  • musubii-style-list-kome-item()
  • musubii-style-list-decimal-item()
  • musubii-style-list-note-item()
  • musubii-style-list-note-item-not-first-child()

Sources