パーツ番号 09-13-11 ・ CSSのみ

カレンダー・日付ピッカー用スケルトン

月見出しと曜日マスを灰色ブロックで並べたカレンダーの読み込み中プレースホルダー。予約フォームやイベントカレンダーの表示待ちに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="cal09-13-11">
          <div class="chead09-13-11"></div>
          <div class="cgrid09-13-11">
            <span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span>
            <span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11 hi09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span>
            <span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span><span class="cday09-13-11"></span>
          </div>
        </div>

CSS

.d09-13-11 .cal09-13-11{
          width:100%;
          max-width:250px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:12px;
          padding:16px;
          font-family:sans-serif;
        }
        .d09-13-11 .chead09-13-11{
          width:120px;
          height:12px;
          border-radius:4px;
          background:linear-gradient(135deg,#cbd5e1,#e2e8f0);
          margin-bottom:14px;
        }
        .d09-13-11 .cgrid09-13-11{
          display:grid;
          grid-template-columns:repeat(7,1fr);
          gap:6px;
        }
        .d09-13-11 .cday09-13-11{
          aspect-ratio:1/1;
          border-radius:6px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
        }
        .d09-13-11 .cday09-13-11.hi09-13-11{
          background:linear-gradient(135deg,#c7d2fe,#dbe1fa);
        }

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