お問い合わせ情報ブロック
電話・メール・住所・営業時間といった連絡手段を、アイコン付きのカードに分けて並べる問い合わせ情報ブロックです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) で、画面幅に応じてカード数の折り返しが自動調整されます。
解説
電話・メール・住所・営業時間といった連絡手段を、アイコン付きのカードに分けて並べる問い合わせ情報ブロックです。レイアウトは grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) で、画面幅に応じてカード数の折り返しが自動調整されます。各カードはアイコン・ラベル・主情報・補足の 4 段で中央寄せに揃え、ラベルは文字間隔を広げた小さめの見出しにして情報の階層を作っています。アイコンはインライン SVG で currentColor 描画のため、文字色を変えると線の色も追従します。JavaScript は不要です。
使う場面
- コーポレートサイトの問い合わせページ
- フッター上部の連絡先まとめ
- 店舗・サービスの基本情報カード
カードは HTML を足し引きするだけで増減でき、auto-fit が幅を均します。電話番号やメールは tel: や mailto: のリンクにすると、スマホからそのまま発信・送信できて親切です。アイコンには aria-hidden が付くので、何の連絡先かは必ずラベルのテキストで伝えてください。カードの影や角丸は控えめなので、暗い配色のサイトでも背景色を変えるだけで馴染みます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
電話番号をタップで発信できるようにしたいです。
電話番号のテキストを a 要素で囲み、href に tel: を付けてください（例：tel:0312345678）。同様にメールは mailto: を使うと、スマホやメールソフトからそのまま発信・送信できます。
アイコンの色を変えられますか？
アイコンはインライン SVG で currentColor を使って描かれているため、カード内のテキスト色（color）を変えると線の色も一緒に変わります。個別に色を変えたい場合は、そのアイコンを囲む要素に color を指定してください。