画像付きテキストリスト

画像とテキストで構成されるリストです。2カラムでレイアウトされます。

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

ソースコード

ソースコードである HTML および CSS を利用するページにコピーし、ご利用ください。

HTML

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

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

<section>
    <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
        <li class="mfc-item">
            <a href="#">
                <div>
                    <div class="mfc-img">
                        <img src="https://via.placeholder.com/320/f0a0a0/000000" alt="">
                    </div>
                    <div>
                        <p class="mfc-text">テキスト</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="mfc-item">
            <a href="#">
                <div>
                    <div class="mfc-img">
                        <img src="https://via.placeholder.com/320/f0f0a0/000000" alt="">
                    </div>
                    <div>
                        <p class="mfc-text">テキスト</p>
                    </div>
                </div>
            </a>
        </li>
        <li class="mfc-item">
            <a href="#">
                <div>
                    <div class="mfc-img">
                        <img src="https://via.placeholder.com/320/a0f0a0/000000" alt="">
                    </div>
                    <div>
                        <p class="mfc-text">テキスト</p>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</section>

CSS

.mfc-list-003-001-3 {
  display: flex;
  flex-wrap: wrap;
}
.mfc-list-003-001-3 > .mfc-item {
  width: 50%;
}
.mfc-list-003-001-3 > .mfc-item > a > div,
.mfc-list-003-001-3 > .mfc-item > div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mfc-list-003-001-3 > .mfc-item > a > div > .mfc-img,
.mfc-list-003-001-3 > .mfc-item > div > .mfc-img {
  height: 100%;
  text-align: center;
}
.mfc-list-003-001-3 > .mfc-item > a > div > .mfc-img img,
.mfc-list-003-001-3 > .mfc-item > div > .mfc-img img {
  max-width: 100%;
}
.mfc-list-003-001-3 > .mfc-item > a > div > div:not(.mfc-img),
.mfc-list-003-001-3 > .mfc-item > div > div:not(.mfc-img) {
  padding-top: 15px;
}

mfc-base.cssの読み込みが必要です。

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

バリエーション

リスト項目のメタ情報

リスト項目ごとにメタ情報を追加できます。メタ情報は、以下のコードに示す位置にメタ情報ブロックとして配置します。

<section>
    <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
        <li class="mfc-item">
            <a href="#">
                <div>
                    <div class="mfc-img">
                        <img src="https://via.placeholder.com/320/f0a0a0/000000" alt="">
                    </div>
                    <div>
                        <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-tag">タグ3</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>
                </div>
            </a>
        </li>
    </ul>
</section>

PC向けレイアウト調整

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

2カラム
<section class="mf-list-col-2">
   <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
       :
   </ul>
</section>

3カラム
<section class="mf-list-col-3">
   <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
       :
   </ul>
</section>

4カラム
<section class="mf-list-col-4">
   <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
       :
   </ul>
</section>

5カラム
<section class="mf-list-col-5">
   <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
       :
   </ul>
</section>

6カラム
<section class="mf-list-col-6">
   <ul class="mfc-list mfc-list-base-col-2 mfc-list-003-001-3">
       :
   </ul>
</section>