デザインコンポーネント - リスト

リスト要素を最適なレイアウトで表示することができます。

使用するオプション

リストの列数を最適なサイズに変換する

横並びレイアウトのリストを作りたい場合は、<ul>でリストを記述します。
リストの折り返し位置はMFセクションのレイアウトオプション(mf-list-col-*)で指定します。

スマートフォン上の表示
パソコン上の表示

ソースコード

HTML
<h1>mf-list-col-2を指定</h1>
<section id="section1">
    <ul class="mf-list-col-2">
        <li><div class="post"><div class="image"><img src="../_assets/images/design-components/1.jpg"></div><div class="post-info"><p class="post-title">公式チャンネルを開設、アナトミーの操作動画などを公開しています。</p><p class="post-date">2019.03.21</p></div></div></li>
        <li><div class="post"><div class="image"><img src="../_assets/images/design-components/2.jpg"></div><div class="post-info"><p class="post-title">GCモバイルファーストで使われている技術が特許を取得しました。</p><p class="post-date">2019.02.21</p></div></div></li>
        <li><div class="post"><div class="image"><img src="../_assets/images/design-components/3.jpg"></div><div class="post-info"><p class="post-title">サーバメンテナンスに伴うサイト/サービスの一時停止のお知らせ</p><p class="post-date">2019.01.21</p></div></div></li>
        <li><div class="post"><div class="image"><img src="../_assets/images/design-components/4.jpg"></div><div class="post-info"><p class="post-title">アナトミーに待望のコンバージョン分析機能を追加しました。 </p><p class="post-date">2018.12.21</p></div></div></li>
    </ul>
</section>
CSS
li .post {
    display: table;
}
li .post .image {
    display: table-cell;
    width: 35%;
}
li .post .post-info {
    display: table-cell;
    width: 65%;
    padding: 0 0 0 15px;
    vertical-align: top;
}

バリエーション

mf-list-col-4

mf-list-col-3

mf-list-col-2

mf-list-col-1

備考

  • <section>内に存在する <ul>のみ対象となります。
  • 入れ子になった<ul>は、折り返しレイアウトの対象にはなりません。