Softonic

CSSカードジェネレーター

ステップ 1 / 2

カードのタイトル

これはあなたのカードのプレビューです。

次へ

カードは、商品タイル、ブログのプレビュー、プロフィール、ダッシュボードウィジェットの背後にあるコンテナです。このジェネレーターはそのコンテナのスタイルを作成します。背景色と枠線の色、角丸、内側余白、ソフトなドロップシャドウを選ぶと、結果がページ上にすぐ表示されます。プレビューにはプレースホルダーコンテンツが表示されるので、自分の見出し、テキスト、操作に置き換えてください。出力はすぐ使えるCSSクラス1つです。

カードコンテナのスタイル設定方法

  1. 1

    色を選ぶ

    カードの背景色と枠線の色を選択します。

  2. 2

    形を決める

    レイアウトに合う角丸と内側余白を選びます。

  3. 3

    影を追加する

    カード下のソフトなドロップシャドウのぼかしと不透明度を調整します。

  4. 4

    プレビューしてコピー

    ライブプレビューを確認し、生成された.cardのCSSをスタイルシートにコピーします。

生成されるCSSの内容

ツールは.cardという1つのクラスを出力します：

.card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
  • backgroundは選択した背景色
  • borderは選択した色の1pxの実線
  • border-radiusとpaddingは選択したpxの値
  • box-shadowは、選択したぼかしと不透明度の値で、下方向に固定の4pxオフセットを使用

プレビューはプレースホルダー

プレビューには見出しと段落が表示され、比率を確認できます。ツール自体はHTMLを出力しません。クラスを自分のコンテナに適用し、内側に見出し、テキスト、画像、操作ボタンを追加してください。カードが色付きのページ背景の上に置かれる場合は、プレビューだけでなくその場所でも枠線のコントラストを確認してください。

適切な制限

0未満の値は0に丸められ、影の不透明度は0から1の間に保たれます。余白やぼかしの値が大きすぎると想定外の結果になることがあるため、実際のレイアウトで使う範囲にコントロールを収めてください。

自分のマークアップと組み合わせる

ページ用の最小限の例：

<div class="card">
  <h3>商品名</h3>
  <p>短い説明</p>
</div>

コンテナのスタイルは中身を制限しません。背景、枠線、余白、影だけを処理します。

よくある質問

いいえ。.cardのCSSクラスのみを出力します。見出し、テキスト、操作を囲むdivやarticleなど、マークアップは自分で作成してください。

生成される枠線は常に1pxの実線です。別の太さやスタイルが必要な場合は、CSSのborder行を編集してください。

固定の4px縦オフセットにより、影が控えめで読みやすい状態を保ちます。柔らかさ（ぼかし）と強さ（不透明度）は自分で調整できます。

いいえ。プレビューのテキストは表示用のみです。コピーされるCSSにコンテンツは含まれず、コンテナのスタイルだけが含まれます。

関連ツール

ASCII表リファレンス

0から127までの完全なASCII表です。NUL、LF、DELなどの制御コードを含め、各文字の10進数、16進数、8進数、2進数、HTML数値文字参照を表示します。

JavaScript圧縮ツール

変数名のリネーム、空白の削除、デッドコードの除去、定数畳み込みでJavaScriptを圧縮し、より小さなバンドルを作成します。

HTML文字参照

HTMLエンティティの検索可能なリスト、その名称コードおよび数値コード、および特殊文字や記号のワンクリックコピー機能を提供します。

FPS カウンター

requestAnimationFrame でブラウザーの FPS を測定。平滑化、最小・最大フレームレート、警告しきい値、任意のグラフに対応。ローカルで動作し、アップロードも API も不要です。

プレースホルダー画像ジェネレーター

1〜4000 pxの画像に色と文字を設定し、PNGで保存できます。外部URLとHTMLもコピーできます。

HTML 圧縮ツール

通常のコメントを削除し、空白を整理して、ブラウザ内で HTML をコンパクトにします。使用前に結果を確認してください。

このツールは他の言語でも利用できます