レスポンシブ価格表を作成するための10個の無料CSSスニペット

公開: 2021-10-14

価格設定ページは、あらゆるオンラインショップの定番です。これは、Web全体のSaaS製品、サービス会社、およびeコマースショップで使用されています。

また、オプション、機能、および（当然のことながら）価格を比較する価格表がなければ、価格ページは完成しません。しかし、最初から独自に設計するのは面倒な場合があります。

そこで、これらのオープンソースの価格表が役立ちます。これらはすべて完全にレスポンシブであり、独自のカスタマイズを検討している場合でも、既存のコードを再利用して時間を節約する場合でも、テンプレートとして最適に機能します。

1. TravisWilliamsonによるアイコンテーブル

素晴らしいビジュアルは常に売れています。これらは製品の写真やカスタムイラストである可能性がありますが、ビジュアルはテキストよりも早く注目を集めます。

このアイコン化された価格表は、視覚的な表の列で可能なことの優れた例です。アイコンを追加することで、顧客が何かを読む前に、各パッケージで何を得ているかを顧客に知らせることができます。アイコンは、さまざまなパワーと機能を示しています。最小の計画には紙飛行機があり、最大の計画にはフルロケット船が使用されています。コントラストについて話してください！

ペンを見る
Travis Williamson（@travisw）による価格表

2. AgustinOrtizによるカラー付きゼブラストライピング

この例では、価格表がはるかに単純で、従来の設計ルールに従います。ゼブラストライプ、大きな価格設定ヘッダー、さまざまな色を使用して、特定の価格設定形式を他の形式から際立たせます。

色が少し濃く感じることがあるので、すべてのレイアウトに最適というわけではありません。ただし、色を簡単に変更しても同じ形式を維持して、この価格表を自分のサイトで機能させることができます。

ペンの価格表を参照してください| AgustinOrtizによるTablade Precios

3. MikeTorosianによるダークパープルテーブル

より暗くてより豊かなテーブルデザインについては、この紫色の価格表をチェックしてください。背景のグラデーションと境界線のホバー効果を使用して、Web上で最もプロフェッショナルな価格表の1つを作成します。また、完全にレスポンシブであるため、ブラウザが小さくなると、テーブル要素が行に分割されます。

MikeTorosianによるペンの価格表を参照してください

4.LittleSnippetsによるプロフェッショナルな価格設定

B2B Webサイトは、クリエイティブな配色や無関係なアイコンから離れた、よりプロフェッショナルなデザインを探すことがよくあります。この価格設定の設計は、暗い色と明るい色の典型的な配色に従ったそのような例の1つです。

1つの価格設定列では、濃い青色のハイライトを使用して、テーブルの残りの部分から飛び出します。コンバージョン率が高くなる可能性があるため、この手法に従うのが標準的な方法です。そのため、「プロフェッショナル」プランでは、ドロップシャドウを使用して他の列の上に表示します。ただし、サイズを小さくすると、閲覧しやすいようにスタック形式になります。

ペン＃1214 –LittleSnippetsによる価格表を参照してください

5. NidheeshBalachandranによるホバー効果のあるテーブル

この価格表のデザインでは、暗くなったテーブルヘッダーに色を追加するゴージャスなホバー効果がいくつかあります。それらはそれぞれ、選択した背景画像のための余地を残し、ホバー効果はCSSを介して管理されます。

私が気に入っているもう1つの点は、テーブル列全体に関連付けられたクリックイベントです。このように、訪問者が列のどこかをクリックすると、関連するサインアップページに直接移動します。

NidheeshBalachandranによるペンの価格表を参照してください

6. Sahar AliRazaによるブートストラップ価格表

フレームワークとそれに関連するテーマでできることがたくさんあるので、私はBootstrapの大ファンです。そのような例の1つは、この価格表の例です。

傾斜したヘッダーの背景やホバーアニメーションなど、このデザインの多くはカスタムコード化されています。ただし、全体的なレイアウトはBootstrapに依存しているため、デフォルトで完全に応答します。タイポグラフィは素晴らしく、各行を移動しながらホバーアニメーションも大好きです。これは、ほとんどすべてのタイプのWebサイトで機能するクリーンなテーブルデザインです。

Sahar AliRazaによるペンブートストラップの価格表を参照してください

7. MortenSrensenによるマテリアルデザインの価格表

Googleのマテリアルデザインがお好きなら、この価格表もきっと気に入るはずです。これは、ドロップシャドウホバーやフラットカラースキームなど、Googleが提案する機能の多くに準拠したマテリアルUIテーブルです。

ペンを見る
Morten Srensenによるマテリアルデザインの価格表（フレックスボックス）。

8.ダニエルハーンによるクリーンでシンプルな価格表

超クリーンで軽量は、この白い価格表を最もよく表します。それは目立つために多くの色や派手な機能に依存していません。代わりに、ヘッダーにグレーを使用し、テキストのコントラストに黒/白を使用します。 CTAボタンは強い緑色のアウトライン効果を維持するため、これは実際にうまく機能します。

テーブルの色を減らすと、色のある領域だけに注意が向けられます。これにより、通常、クリック数が増えます。これは純粋なCSSであるため、デザインに合わせてボタンの色を簡単に更新できます。

DanielHearnによるペンの価格表-1を参照してください。

9. DylanMcleodによるWIPテーブル

進行中の作業については、このカラフルな価格表セットは信じられないほどに見えると言わざるを得ません。これは、テーブルヘッダーを強調表示したり、1つの列を他の列よりも大きくしたりするなど、多くの従来の手法に従います。

しかし、私は非常によく混ざり合っているさまざまな色の選択肢に最も感銘を受けています。これらのテーブルにはいくつかの異なるヘッダーがあるようで、さまざまな理由ですべてが注目を集めています。

DylanMcleodによるペンの価格表を参照してください

10.CSSGirlによるFlexboxの価格設定

さて、実際の前向きのテーブルデザインについては、このフレックスボックステーブルをチェックしてください。テーブルの上にマウスを置くと、各列が少し大きくなり、背景色が増えます。これにより、柱が他の柱から目立ち、注目を集めるのが早くなります。これは、ブラウザーのサイズを変更しながら、テーブルのCSS遷移に引き継がれる優れた効果です。

ここでの最大の機能は、フレックスボックスを使用してテーブルの列をフォーマットすることです。この例は、flexboxがレスポンシブWebサイトの未来であることを証明しています。

LindseyによるPenFlexboxの価格プランをご覧ください