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

タイムゾーン表示切替

複数都市の現在時刻風表示をタイムゾーン名付きで一覧にしています。グローバル企業のWordPressサイトで拠点ごとの営業時間案内に活用できます。

i18ncss

プレビュー

ソースコード

HTML

<ul class="d03-04-07-list">
          <li><span class="d03-04-07-city">東京</span><span class="d03-04-07-time">21:14</span><span class="d03-04-07-tz">JST +9</span></li>
          <li><span class="d03-04-07-city">London</span><span class="d03-04-07-time">13:14</span><span class="d03-04-07-tz">GMT +0</span></li>
          <li><span class="d03-04-07-city">New York</span><span class="d03-04-07-time">08:14</span><span class="d03-04-07-tz">EST -5</span></li>
        </ul>

CSS

.d03-04-07-list{list-style:none;margin:0;padding:0;width:100%;max-width:220px}
        .d03-04-07-list li{display:flex;align-items:center;justify-content:space-between;
          padding:9px 4px;border-bottom:1px solid #e5e7eb;font-size:13px}
        .d03-04-07-list li:last-child{border-bottom:none}
        .d03-04-07-city{font-weight:700;color:#1f2937;flex:1}
        .d03-04-07-time{font-variant-numeric:tabular-nums;font-weight:800;color:#4338ca;margin-right:8px}
        .d03-04-07-tz{font-size:11px;color:#9ca3af}

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