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数値文字参照を表示します。

HTML文字参照

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

キーボードショートカット一覧

macOS、Windows、Linux向けに、VS Code、Chrome、GNU Readlineを使うBashの公式資料に基づく既定ショートカットを検索できます。

HTML フォーマッター

ブラウザ内で HTML を 2 または 4 スペースで整形します。HTML はアップロードも検証もされません。

カラーパレットジェネレーター

基準のHEXカラーから、モノクロマティック、類似色、補色、トライアド、テトラードのパレットを生成し、コピーしやすいCSS変数として書き出します。

バイナリからASCIIへの変換ツール

バイナリ（スペース区切りのバイト、または長いビット列）を貼り付けると、それが表すASCIIテキストを8ビットずつ復号して取得できます。