CSSカードジェネレーター（サービスセクション）
カードを1ブロックずつ書いて、スタイルを選びます。グリッドはauto-fitを使うので、スマートフォンからパソコンまで、カードが自動で並び替わります。
使い方サイト用のサービスカード
利用できる言語: 
CSSカードジェネレーター（サービスセクション）: 用途
カードは、ページでサービス、メリット、商品を紹介する最も一般的な方法です。このジェネレーターは、タイトルと、あなたが書いたカードでセクションを作ります。各カードには、アイコンまたは画像、タイトル、テキスト、リンクがあります。
グリッドはrepeat(auto-fit, minmax())を使い、メディアクエリなしで、スマートフォンからパソコンまでカードを自動で並び替えます。影、枠、色付きの背景、最小幅、アクセシブルなリンク1つでカード全体をクリックできる設定、マウスを重ねると浮き上がる効果（マウスのある端末でのみ表示され、動きを減らしたい人の設定を尊重）を選べます。
使い方
- カードを1行に1つずつ書きます。
- スタイル、色、最小幅を選びます。
- コードをコピーして、ページに貼り付けます。
使うタイミング
- 整備工場やサロンのサービスセクション。
- 商品のメリット。
- ショップのカテゴリ一覧。
よくある質問
カードはスマートフォンでどう調整されますか？
グリッドはgrid-template-columnsとrepeat(auto-fit, minmax(...))を使います。幅が許す限りのカードが並び、それぞれ選んだ最小幅になります。スマートフォンでは1行に1つ、タブレットでは2つ、パソコンでは3つか4つで、メディアクエリは不要です。
カード全体をクリックできるようにできますか？
はい。オプションを選んで各カードにリンクを入力すると、コードはタイトルをリンクにし、疑似要素でクリック領域をカード全体に広げます。HTMLはアクセシブルなままです（カードごとにリンクは1つで、テキスト付き）。
絵文字とアイコン、どちらがよいですか？
カードには、短い記号か画像を使えます。よりプロらしい見た目にするには、同じセットのSVGアイコン（LucideやHeroiconsなど）を使い、画像のアドレスをカードの欄に貼り付けます。
本当に無料？
はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。