module-list

list

シンプルなリストを表示する。このクラス単独では整列のみ行う。
リストの子要素にクラスを付与することができない場合は、 /_scss/config_advance.css の変数 $list-item, $list-children のセレクタを変更すること。

  • あいうえおかきくけ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 class="list">
    <li class="list-item">あいうえおかきくけ10さしすせ</li>
    <li class="list-item">あいうえおかきく
        <ul class="list-children">
            <li class="list-item">あいうえお</li>
            <li class="list-item">あいうえおかきくけ10さしすせそたちつて20
                <ul class="list-children">
                    <li class="list-item">あいうえお</li>
                    <li class="list-item">あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="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="list-item">あいうえおかきくけ10</li>
                </ul>
            </li>
            <li class="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="list-item">あいうえおかきくけ10</li>
        </ul>
    </li>
    <li class="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="list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

list-vertical

階層構造を持ったリストを表示する。階層が深くなるごとに文字が小さくなる。
リスト先頭のシェブロンは /_scss/mixin/mixin.css の chevron()を参照。

  • あいうえおかきくけ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 class="list list-vertical">
    <li class="list-item">あいうえおかきくけ10さしすせ</li>
    <li class="list-item">あいうえおかきく
        <ul class="list-children">
            <li class="list-item">あいうえお</li>
            <li class="list-item">あいうえおかきくけ10さしすせそたちつて20
                <ul class="list-children">
                    <li class="list-item">あいうえお</li>
                    <li class="list-item">あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20</li>
                    <li class="list-item">あいうえおかきくけ10</li>
                </ul>
            </li>
            <li class="list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのは</li>
            <li class="list-item">あいうえおかきくけ10</li>
        </ul>
    </li>
    <li class="list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえ</li>
    <li class="list-item">あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50</li>
</ul>

list-horizontal

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

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
  • あいうえお
  • あいうえおかきくけ
<ul class="list list-horizontal">
    <li class="list-item">あいうえおかきくけ10さしすせ</li>
    <li class="list-item">あいうえおかきく</li>
    <li class="list-item">あいうえお</li>
    <li class="list-item">あいうえおかきくけ</li>
</ul>