スマートフォン上の表示
パソコン上の表示
ソースコード
ソースコードである HTML を利用するページにコピーし、ご利用ください。mfc-base.cssおよびmfc-layout.cssの読み込みが必要です。
HTML
以下のコードを、<main>
の内に、コピーしてください。
PCブラウザでのリストの折り返し位置は、MFセクションのレイアウトオプション class="mf-list-col-<列数>"
で指定します。
<section>
<ul class="mfc-list mfc-list-base-col-1 mfc-list-003-003-7">
<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-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>
</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>
<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-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>
</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>
<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-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>
</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-1 mfc-list-003-003-7">
:
</ul>
</section>
3カラム
<section class="mf-list-col-3">
<ul class="mfc-list mfc-list-base-col-1 mfc-list-003-003-7">
:
</ul>
</section>
4カラム
<section class="mf-list-col-4">
<ul class="mfc-list mfc-list-base-col-1 mfc-list-003-003-7">
:
</ul>
</section>
5カラム
<section class="mf-list-col-5">
<ul class="mfc-list mfc-list-base-col-1 mfc-list-003-003-7">
:
</ul>
</section>
6カラム
<section class="mf-list-col-6">
<ul class="mfc-list mfc-list-base-col-1 mfc-list-003-003-7">
:
</ul>
</section>