イベント告知カード
左に日付ブロック、右にタグ・タイトル・日時・申込ボタンを配置したイベント告知カードです。 display:flex で日付列と本文列を横並びにし、日付は濃紺地に大きなセリフ体の数字を置いて視認性を高めています。日時アイコンはインライン SVG で、外部フォントに頼らず自己完結している点が特徴です。
解説
左に日付ブロック、右にタグ・タイトル・日時・申込ボタンを配置したイベント告知カードです。display:flex で日付列と本文列を横並びにし、日付は濃紺地に大きなセリフ体の数字を置いて視認性を高めています。日時アイコンはインライン SVG で、外部フォントに頼らず自己完結している点が特徴です。CSS のみで構成され、JavaScript は使いません。
向いている用途
- セミナーや勉強会、ウェビナーの開催告知
- 店舗のキャンペーンやワークショップの案内
- 一覧ページに複数並べるイベントカード
日付・タイトル・タグ・ボタン文言を差し替えるだけで使え、複数並べると告知一覧になります。配色はブランドに合わせて日付ブロックとボタンの背景色を変更できます。注意点として、申込ボタンは見た目だけでなく実際のリンク先（フォームや予約ページ）を必ず設定してください。アクセシビリティの観点では、SVG アイコンに aria-hidden を付け、日付や場所はテキストとしても読めるようにしておくと、スクリーンリーダー利用者にも内容が正しく伝わります。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
カードを横にいくつも並べられますか
並べられます。このカードを親要素でグリッドやフレックスに包めば、イベント一覧として複数枚を整列できます。各カードの日付やタイトルを変えるだけで、そのまま告知リストになります。
アイコンは画像ファイルが必要ですか
必要ありません。カレンダーなどのアイコンはコードの中に直接書かれたSVGなので、別途画像を読み込まなくても表示されます。色は文字色に追従するため、テーマに合わせて自然になじみます。