module-list

m-list

改行される可能性があるテキストの表示を前提としたリストを表示する。このクラス単独では整列のみ行う。
ul に使用した場合は、子要素にクラスを指定していなくても有効になる。

すべての要素にクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
    • あいうえお
    • あいうえおかきくけ10さしすせそたちつて20
      • あいうえお
      • あいうえおかきくけ10さしすせそたちつて20
      • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
      • あいうえおかきくけ10
    • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
    • あいうえおかきくけ10
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

ulのみクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
    • あいうえお
    • あいうえおかきくけ10さしすせそたちつて20
      • あいうえお
      • あいうえおかきくけ10さしすせそたちつて20
      • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
      • あいうえおかきくけ10
    • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
    • あいうえおかきくけ10
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
<h3 class="u-text-lg">すべての要素にクラスを付与した場合</h3>
<ul class="m-list">
    <li class="m-list-item">あいうえおかきくけ10さしすせ</li>
    <li class="m-list-item">あいうえおかきく
        <ul class="m-list-children">
            <li class="m-list-item">あいうえお</li>
            <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20
                <ul class="m-list-children">
                    <li class="m-list-item">あいうえお</li>
                    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
                    <li class="m-list-item">あいうえおかきくけ10</li>
                </ul>
            </li>
            <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
            <li class="m-list-item">あいうえおかきくけ10</li>
        </ul>
    </li>
    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

<h3 class="u-text-lg u-margin-top-lg">ulのみクラスを付与した場合</h3>
<ul class="m-list">
    <li>あいうえおかきくけ10さしすせ</li>
    <li>あいうえおかきく
        <ul>
            <li>あいうえお</li>
            <li>あいうえおかきくけ10さしすせそたちつて20
                <ul>
                    <li>あいうえお</li>
                    <li>あいうえおかきくけ10さしすせそたちつて20</li>
                    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
                    <li>あいうえおかきくけ10</li>
                </ul>
            </li>
            <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
            <li>あいうえおかきくけ10</li>
        </ul>
    </li>
    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

m-list-vertical

階層構造を持ったリストを表示する。階層が深くなるごとに文字が小さくなる。

すべての要素にクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
    • あいうえお
    • あいうえおかきくけ10さしすせそたちつて20
      • あいうえお
      • あいうえおかきくけ10さしすせそたちつて20
      • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20
      • あいうえおかきくけ10
    • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのは
    • あいうえおかきくけ10
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえ
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50

ulのみクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
    • あいうえお
    • あいうえおかきくけ10さしすせそたちつて20
      • あいうえお
      • あいうえおかきくけ10さしすせそたちつて20
      • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
      • あいうえおかきくけ10
    • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
    • あいうえおかきくけ10
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
  • あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
<h3 class="u-text-lg">すべての要素にクラスを付与した場合</h3>
<ul class="m-list m-list-vertical">
    <li class="m-list-item">あいうえおかきくけ10さしすせ</li>
    <li class="m-list-item">あいうえおかきく
        <ul class="m-list-children">
            <li class="m-list-item">あいうえお</li>
            <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20
                <ul class="m-list-children">
                    <li class="m-list-item">あいうえお</li>
                    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="m-list-item">あいうえおかきくけ10</li>
                </ul>
            </li>
            <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのは</li>
            <li class="m-list-item">あいうえおかきくけ10</li>
        </ul>
    </li>
    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえ</li>
    <li class="m-list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

<h3 class="u-text-lg u-margin-top-lg">ulのみクラスを付与した場合</h3>
<ul class="m-list m-list-vertical">
    <li>あいうえおかきくけ10さしすせ</li>
    <li>あいうえおかきく
        <ul>
            <li>あいうえお</li>
            <li>あいうえおかきくけ10さしすせそたちつて20
                <ul>
                    <li>あいうえお</li>
                    <li>あいうえおかきくけ10さしすせそたちつて20</li>
                    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
                    <li>あいうえおかきくけ10</li>
                </ul>
            </li>
            <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
            <li>あいうえおかきくけ10</li>
        </ul>
    </li>
    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
    <li>あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

m-list-horizontal

水平に並列するリストを表示する。階層構造を持たせることはできない。

すべての要素にクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
  • あいうえお
  • あいうえおかきくけ

ulのみクラスを付与した場合

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
  • あいうえお
  • あいうえおかきくけ
<h3 class="u-text-lg">すべての要素にクラスを付与した場合</h3>
<ul class="m-list m-list-horizontal">
    <li class="m-list-item">あいうえおかきくけ10さしすせ</li>
    <li class="m-list-item">あいうえおかきく</li>
    <li class="m-list-item">あいうえお</li>
    <li class="m-list-item">あいうえおかきくけ</li>
</ul>

<h3 class="u-text-lg u-margin-top-lg">ulのみクラスを付与した場合</h3>
<ul class="m-list m-list-horizontal">
    <li>あいうえおかきくけ10さしすせ</li>
    <li>あいうえおかきく</li>
    <li>あいうえお</li>
    <li>あいうえおかきくけ</li>
</ul>