List

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

Table of Contents

Basic

  • .list を設置し直下に .item を配置します
  • .list と .item は単体に付与されているスタイルはありません
  • 次項の Variants を併用してください
  • リストアイテム
<ul class="list">
  <li class="item">リストアイテム</li>
</ul>

Variants

  • .is-disc で塗り円のリスト装飾になります
  • .is-circle で白抜き円のリスト装飾になります
  • .is-square で塗り四角形のリスト装飾になります
  • .is-kome で米印のリスト装飾になります
  • .is-decimal で数字の番号リストになります

disc

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="list is-disc">
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
</ul>

circle

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="list is-circle">
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
</ul>

square

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="list is-square">
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
</ul>

decimal

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="list is-decimal">
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
</ul>

kome

  • リストアイテム
  • リストアイテム
  • リストアイテム
<ul class="list is-kome">
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
  <li class="item">リストアイテム</li>
</ul>

Note

  • .is-note は item を flexbox にして直書きで装飾を行う設定です
  • .item 直下の最初の要素がリストスタイルになります
  • .item 直下の 2 番目の要素には flex の .is-flex-0 を使うのがおすすめです
  • 主に「※1」など特殊な合判を行う場合に使用します
  • ※1
    リストアイテム
  • ※2
    リストアイテム
  • ※3
    リストアイテム
<ul class="list is-note">
  <li class="item"><span>※1</span><div class="text is-flex-0">リストアイテム</div></li>
  <li class="item"><span>※2</span><div class="text is-flex-0">リストアイテム</div></li>
  <li class="item"><span>※3</span><div class="text is-flex-0">リストアイテム</div></li>
</ul>

Variables

上書きできる変数は以下の通りです。

.list {
  --list-margin-left: 1.5em;
  --list-item-margin-top: 0.25em;
  --list-kome-item-content: "\203B";
  --list-kome-item-inset: 0 auto auto -1em;
  --list-note-item-gap: 0.25em;
  --list-note-item-margin-top: 0.25em;
}

Import

PostCSS で読み込む場合の各パスは以下となります。

@import "musubii/src/elements/list/main.css";

v7 を再現する場合は legacy.css を追加で読み込んでください。

@import "musubii/src/layouts/list/legacy.css";