パーツ番号 11-12-07 ・ CSSのみ

バージョン情報表示付きスプラッシュ(静止)

画面下部に小さくバージョン番号を添えた起動画面。社内向けや会員限定のWebアプリ風サイトで、更新状況を確認しやすくする見本です。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-12-07-wrap">
          <div class="d11-12-07-logo">R</div>
          <p class="d11-12-07-name">Rakuen</p>
        </div>
        <p class="d11-12-07-ver">Version 2.4.1</p>

CSS

.d11-12-07{ background:#f8fafc; padding:0; }
        .d11-12-07-wrap{ text-align:center; }
        .d11-12-07-logo{ width:54px; height:54px; margin:0 auto; border-radius:50%; background:#0f172a; color:#fff; font-size:20px; font-weight:800; display:flex; align-items:center; justify-content:center; }
        .d11-12-07-name{ margin:10px 0 0; font-size:14px; font-weight:700; color:#0f172a; }
        .d11-12-07-ver{ position:absolute; left:0; right:0; bottom:16px; margin:0; text-align:center; font-size:10px; color:#94a3b8; }

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