← 静的パーツギャラリーへ戻る

パーツ番号 01-11-08 ・ CSSのみ

アプリ紹介LP構成(スクリーンショット→機能→ダウンロード)

スマホアプリの機能訴求に適した構成見本。アプリストアへの誘導を目的としたプロモーションページに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="lp01-11-08">
          <div class="sec ss">
            <div class="phone"></div>
            <div class="phone"></div>
          </div>
          <div class="sec fn">
            <span class="ttl">主な機能</span>
            <div class="row"><i></i><i></i><i></i></div>
          </div>
          <div class="sec dl">
            <span class="store">App Store</span>
            <span class="store">Google Play</span>
          </div>
        </div>

CSS

.d01-11-08{padding:0;display:block}
        .lp01-11-08{width:100%;height:100%;display:flex;flex-direction:column;font-size:9px;background:#fff}
        .lp01-11-08 .sec{padding:8px 9px;border-bottom:1px solid #eee;display:flex;flex-direction:column;gap:5px;align-items:center}
        .lp01-11-08 .ss{background:#eef1ff;flex-direction:row;justify-content:center;gap:8px;padding-top:10px;padding-bottom:10px}
        .lp01-11-08 .phone{width:18px;height:32px;background:#fff;border:2px solid #3b4dbf;border-radius:5px}
        .lp01-11-08 .ttl{font-size:8px;font-weight:bold;color:#3b4dbf;align-self:flex-start}
        .lp01-11-08 .fn .row{display:flex;gap:4px}
        .lp01-11-08 .fn .row i{width:20px;height:14px;background:#dfe3ff;border-radius:3px}
        .lp01-11-08 .dl{flex-direction:row;gap:6px}
        .lp01-11-08 .store{background:#111;color:#fff;font-size:7px;padding:4px 8px;border-radius:3px}

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