パーツ番号 03-04-09 ・ CSSのみ

フッター内言語リンク一覧

フッター風の帯に複数言語へのリンクが横並びで配置されています。多言語サイトのフッターに定番の言語切替リンク一覧として設置できます。

i18ncss

プレビュー

ソースコード

HTML

<div class="d03-04-09-footer">
          <span class="d03-04-09-copy">© Company</span>
          <ul class="d03-04-09-links">
            <li><a href="#">日本語</a></li>
            <li><a href="#">English</a></li>
            <li><a href="#">中文</a></li>
            <li><a href="#">Español</a></li>
          </ul>
        </div>

CSS

.d03-04-09{background:#111827;padding:0}
        .d03-04-09-footer{width:100%;padding:16px 20px;display:flex;flex-direction:column;gap:10px;align-items:center}
        .d03-04-09-copy{color:#9ca3af;font-size:11px}
        .d03-04-09-links{list-style:none;margin:0;padding:0;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
        .d03-04-09-links a{color:#d1d5db;font-size:12px;text-decoration:none;border-bottom:1px solid transparent;
          padding-bottom:2px;transition:color .15s,border-color .15s}
        .d03-04-09-links a:hover{color:#fff;border-color:#fff}

クラス名 .d03-04-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。