テキストリスト2-1

ソースコード

ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。

デザインコンポーネントについて

HTML

以下のコードを、<main> の内に、コピーしてください。

PCブラウザでのリストの折り返し位置は、MFセクションのレイアウトオプション class="mf-list-col-<列数>" で指定します。

<section id="section1" class="mf-list-col-2">
    <ul class="mfc-list mfc-list-base-col-1 mfc-list-001-002-1">
        <li class="mfc-item">
            <a href="#">
                <div>
                    <p class="mfc-title">リスト見出し</p>
                    <p class="mfc-text">本文が入ります</p>
                    <div>
                        <p class="mfc-category">カテゴリ</p>
                        <p class="mfc-tag">タグ1</p>
                        <p class="mfc-tag">タグ2</p>
                        <p class="mfc-flag">フラグ1</p>
                        <p class="mfc-flag">フラグ2</p>
                        <p class="mfc-flag">フラグ3</p>
                    </div>
                    <div>
                        <time class="mfc-date">日付</time>
                        <p class="mfc-custom">カスタム1</p>
                        <p class="mfc-custom">カスタム2</p>
                        <p class="mfc-custom">カスタム3</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="mfc-item">
            <a href="#">
                <div>
                    <p class="mfc-title">リスト見出し</p>
                    <p class="mfc-text">本文が入ります</p>
                    <div>
                        <p class="mfc-category">カテゴリ</p>
                        <p class="mfc-tag">タグ1</p>
                        <p class="mfc-tag">タグ2</p>
                        <p class="mfc-flag">フラグ1</p>
                        <p class="mfc-flag">フラグ2</p>
                        <p class="mfc-flag">フラグ3</p>
                    </div>
                    <div>
                        <time class="mfc-date">日付</time>
                        <p class="mfc-custom">カスタム1</p>
                        <p class="mfc-custom">カスタム2</p>
                        <p class="mfc-custom">カスタム3</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="mfc-item">
            <a href="#">
                <div>
                    <p class="mfc-title">リスト見出し</p>
                    <p class="mfc-text">本文が入ります</p>
                    <div>
                        <p class="mfc-category">カテゴリ</p>
                        <p class="mfc-tag">タグ1</p>
                        <p class="mfc-tag">タグ2</p>
                        <p class="mfc-flag">フラグ1</p>
                        <p class="mfc-flag">フラグ2</p>
                        <p class="mfc-flag">フラグ3</p>
                    </div>
                    <div>
                        <time class="mfc-date">日付</time>
                        <p class="mfc-custom">カスタム1</p>
                        <p class="mfc-custom">カスタム2</p>
                        <p class="mfc-custom">カスタム3</p>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</section>

バリエーション

リスト項目のメタ情報

メタ情報を追加することが出来ます。
追加できる項目についてはメタ情報についてを参照ください。

PC向けレイアウト調整

mf-list-colによるカラム数が指定できます。

2カラム

<section class="mf-list-col-2">
   <ul class="mfc-list mfc-list-001-002-1 mfc-list-base-col-1">
       :
   </ul>
</section>

3カラム

<section class="mf-list-col-3">
   <ul class="mfc-list mfc-list-001-002-1 mfc-list-base-col-1">
       :
   </ul>
</section>

4カラム

<section class="mf-list-col-4">
   <ul class="mfc-list mfc-list-001-002-1 mfc-list-base-col-1">
       :
   </ul>
</section>

5カラム

<section class="mf-list-col-5">
   <ul class="mfc-list mfc-list-001-002-1 mfc-list-base-col-1">
       :
   </ul>
</section>

6カラム

<section class="mf-list-col-6">
   <ul class="mfc-list mfc-list-001-002-1 mfc-list-base-col-1">
       :
   </ul>
</section>