module-list

echo-list

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

文字サイズの変化 group: body
(breakpoint)(fontsize)
.echo-***
md以下sm
lg以上md

この表の解説

このサンプルでは、範囲がわかるようインラインスタイルで背景色を付与している。

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

  • あいうえおかきくけ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
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">すべての要素にクラスを付与した場合</p>

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

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">ulのみクラスを付与した場合</p>

<ul class="echo-list" style="background-color: #fff9dd">
    <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>

sub class echo-list-fixed

文字が (breakpoint) に関わらず常に同じサイズとなる。
幅の変動が少ないグリッド内のコンポーネント等に使用する。

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

sub class echo-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

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

  1. あいうえおかきくけ10さしすせ
  2. あいうえおかきく
    1. あいうえお
    2. あいうえおかきくけ10さしすせそたちつて20
      1. あいうえお
      2. あいうえおかきくけ10さしすせそたちつて20
      3. あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
      4. あいうえおかきくけ10
    3. あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
    4. あいうえおかきくけ10
  3. あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
  4. あいうえおかきくけ10さしすせそたちつて20なにぬねのはひふへ30まみむめもやゆよっ40らりるれろわをんー50
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">すべての要素にクラスを付与した場合</p>

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

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">olのみクラスを付与した場合</p>

<ol class="echo-list echo-list-vertical" style="background-color: #fff9dd">
    <li>あいうえおかきくけ10さしすせ</li>
    <li>あいうえおかきく
        <ol>
            <li>あいうえお</li>
            <li>あいうえおかきくけ10さしすせそたちつて20
                <ol>
                    <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>
                </ol>
            </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>
        </ol>
    </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>
</ol>

sub class echo-list-horizontal

水平、かつ中央に整列するリストを表示する。階層構造を持たせることはできない。

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

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

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

  • あいうえおかきくけ10さしすせ
  • あいうえおかきく
  • あいうえお
  • あいうえおかきくけ
<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md">すべての要素にクラスを付与した場合</p>

<ul class="echo-list echo-list-horizontal" style="background-color: #fff9dd">
    <li class="echo-list-item">あいうえおかきくけ10さしすせ</li>
    <li class="echo-list-item">あいうえおかきく</li>
    <li class="echo-list-item">あいうえお</li>
    <li class="echo-list-item">あいうえおかきくけ</li>
</ul>

<p class="echo-title echo-title-style-a echo-title-level-4 echo-margin-bottom-md echo-margin-top-lg">ulのみクラスを付与した場合</p>

<ul class="echo-list echo-list-horizontal" style="background-color: #fff9dd">
    <li>あいうえおかきくけ10さしすせ</li>
    <li>あいうえおかきく</li>
    <li>あいうえお</li>
    <li>あいうえおかきくけ</li>
</ul>