パーツ番号 01-12-12 ・ CSSのみ

卓上カレンダー風デザイン

月名と週表示を配した卓上カレンダーの一枚構成。イベント告知ページや店舗の営業日案内に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="deskcal">
          <p class="dc-month">SEPTEMBER<br><span>2026</span></p>
          <div class="dc-grid">
            <span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span><span>日</span>
            <i></i><i></i><i class="dc-on">12</i><i></i><i></i><i></i><i></i>
          </div>
        </div>

CSS

.d01-12-12{ background:#f0eee8; }
        .d01-12-12 .deskcal{ width:100%; max-width:230px; background:#fff; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.1); padding:16px; }
        .d01-12-12 .dc-month{ margin:0 0 12px; font-size:13px; font-weight:800; letter-spacing:.08em; color:#22317c; line-height:1.4; }
        .d01-12-12 .dc-month span{ font-size:11px; font-weight:400; color:#888; }
        .d01-12-12 .dc-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; font-size:9px; text-align:center; color:#667; }
        .d01-12-12 .dc-grid i{ font-style:normal; display:block; padding:3px 0; color:#444; }
        .d01-12-12 .dc-grid i.dc-on{ background:#22317c; color:#fff; border-radius:50%; }

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