フッタ1-1

ソースコード

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

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

HTML

  <footer class="mfc-footer-001-001-1 mf-width-expand">
        <a href=""><img class="mfc-logo" alt="サイトロゴ" src="https://via.placeholder.com/320x100/e0e0e0/000000?text=SiteName"></a>
        <p class="mfc-catchcopy">キャッチコピー</p>
        <ul class="mfc-link">
            <li><a href="#">Link01</a></li>
            <li><a href="#">Link02</a></li>
            <li><a href="#">Link03</a></li>
            <li><a href="#">Link04</a></li>
            <li><a href="#">Link05</a></li>
        </ul>
        <ul class="mfc-sns">
            <li class="mfc-facebook"><a href="#"></a></li>
            <li class="mfc-instagram"><a href="#"></a></li>
            <li class="mfc-twitter"><a href="#"></a></li>
        </ul>
        <p class="mfc-copyright">© コピーライト</p>
    </footer>

バリエーション

PC向けレイアウト調整

mf-widthによる表示幅が指定できます。

コンテンツ幅

<footer class="mfc-footer-001-001-1 mf-width-fullexpand">
       :
</footer>