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

国旗風+言語名リスト

色帯だけで表現した簡易国旗アイコンと言語名を横並びに配置したリストです。多言語プラグインの言語メニューを画像なしで軽量に実装したい場合に便利です。

i18ncss

プレビュー

ソースコード

HTML

<ul class="d03-04-02-list">
          <li><span class="d03-04-02-ico d03-04-02-ico1"></span>日本語</li>
          <li><span class="d03-04-02-ico d03-04-02-ico2"></span>English</li>
          <li><span class="d03-04-02-ico d03-04-02-ico3"></span>Français</li>
          <li><span class="d03-04-02-ico d03-04-02-ico4"></span>Deutsch</li>
        </ul>

CSS

.d03-04-02-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
        .d03-04-02-list li{display:flex;align-items:center;gap:10px;color:#1f2937;font-weight:600}
        .d03-04-02-ico{display:inline-block;width:28px;height:18px;border-radius:2px;
          box-shadow:0 0 0 1px rgba(0,0,0,.08);overflow:hidden;position:relative}
        .d03-04-02-ico1{background:#fff}
        .d03-04-02-ico1::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;
          border-radius:50%;background:#dc2626}
        .d03-04-02-ico2{background:linear-gradient(#012169 33%,#fff 33%,#fff 66%,#c8102e 66%)}
        .d03-04-02-ico3{background:linear-gradient(90deg,#0055a4 33%,#fff 33%,#fff 66%,#ef4135 66%)}
        .d03-04-02-ico4{background:linear-gradient(#000 33%,#dd0000 33%,#dd0000 66%,#ffce00 66%)}

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