イベント告知カード
左に大きな日付ブロック、右にタイトル・場所・申込ボタンを並べた横長のイベント告知カードです。全体を display:flex で 2 カラムに分け、左側の日付エリアは flex-shrink:0 で幅を固定し、右側の本文が flex:1 で残りを占めます。
解説
左に大きな日付ブロック、右にタイトル・場所・申込ボタンを並べた横長のイベント告知カードです。全体を display:flex で 2 カラムに分け、左側の日付エリアは flex-shrink:0 で幅を固定し、右側の本文が flex:1 で残りを占めます。月（MAY）と日（11）を縦積みにし、font-size の差で日付を一目で読ませる構成です。オンライン・会場などのタグも色付きで添えられます。
こんな場面で使えます
- セミナー・ウェビナー・勉強会の告知
- 採用説明会やオンラインイベントの案内
- ワークショップやポップアップの開催情報
カスタマイズは左の日付ブロックの背景色を変えるとカード全体の印象が大きく変わります。max-width:480px で横幅を制御でき、スマホでは flex-direction:column に切り替えて日付を上、本文を下に積むと窮屈になりません。タグの文言を会場名や定員に差し替えれば、対面イベントにも対応できます。
使用例・適したシーン
- サービス紹介セクション
- メンバー紹介・スタッフ一覧
- 料金プラン比較
- 実績・事例カード
よくある質問
スマートフォンで横並びが窮屈になりませんか。
横幅が狭い画面では、メディアクエリで flex-direction を column に切り替えると、日付ブロックを上、本文を下に積めて読みやすくなります。日付エリアの padding も少し詰めると収まりが良くなります。
オンライン以外のタグにも使えますか。
使えます。タグは単なるテキスト要素なので、会場名や 定員30名、参加無料 などに書き換えられます。複数のタグを並べたい場合は要素を増やし、間隔を gap で調整してください。