Bloggerデザイン : レスポンシブ対応料金表

デザインのタイプ

【3カラム・ハイライト・料金表（レスポンシブ対応版）】
クラシックな立体感と、円形フローティング価格表示が特徴のモダン・インターフェース。中央の推奨プランを際立たせる視覚効果により、コンバージョンを促すデザインを提供します。

シンフリーサーバー￥0

Sign up

• 10GB 容量
• 10個 独自ドメイン
• 50個 サブドメイン
• 5個 MySQL

シンフリーサーバープラス￥495

Sign up

• 300GB 容量
• 100個 独自ドメイン
• 100個 独自ドメイン
• 50個 MySQL

シンレンタルサーバー￥539

Sign up

• 700GB 容量
• 無制限 独自ドメイン
• 無制限 サブドメイン
• 無制限 MySQL

デザインの特徴

• 視覚的ヒエラルキー
  中央の推奨プランを立体的に浮かび上がらせることで、ユーザーの視線を自然に誘導します。

ソースコード

<!-- HTML -->
<div id="pricing-table">
    <div class="plan">
        <h3>Enterprise<span>$59</span></h3>
        <a class="signup" href="#">Sign up</a>
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
        </ul>
    </div>
    <!-- ...以下略... -->
</div>

<style>
/* CSS */
#pricing-table {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
#pricing-table .plan {
    flex: 1;
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
}
#pricing-table h3 span {
    display: block;
    height: 120px;
    width: 120px;
    border-radius: 50%;
    margin: 10px auto -80px;
    /* ...スタイル詳細... */
}
#pricing-table .signup {
    background: #1b1c34;
    color: #fff;
}
/* ...モバイル対応メディアクエリ... */
</style>