ホバー詳細展開サービスカード
これは、ふだんは見出しだけを見せ、カードにカーソルを合わせると説明文がスライドして現れるサービス紹介カード 3 枚組です。説明文を max-height:0; overflow:hidden で隠しておき、 :hover で max-height と margin-top を transition 付きで広げること…
このパーツの使いどころと実装ポイント
これは、ふだんは見出しだけを見せ、カードにカーソルを合わせると説明文がスライドして現れるサービス紹介カード 3 枚組です。説明文を max-height:0; overflow:hidden で隠しておき、:hover で max-height と margin-top を transition 付きで広げることで、なめらかに展開するアニメーションを CSS だけで実現しています。
向いている場面
サービスが 3 つ前後に整理されたコーポレートサイト、料金や機能の概要を簡潔に見せたい SaaS、制作・コンサルなどの提供メニュー紹介に向きます。一覧性を保ちつつ、興味を持った項目だけ詳細を読ませられるのが利点です。
カスタマイズと注意
- 展開時の
max-heightは説明文の量に合わせて余裕を持たせます。値が小さいと文章が途中で切れます - 3 列固定の
grid-template-columns:repeat(3,1fr)はスマホで窮屈になるため、@mediaで 1 列に折り返す指定を足してください - ホバー前提なのでタッチ端末では説明が読めません。最初から説明を見せる、またはタップで開く形を併用すると親切です
- カード全体を
aリンクにする場合はarticle内のリンク構造に注意し、入れ子リンクを避けます
よくある質問
スマートフォンでは説明文が読めないのではないですか
その通りで、ホバーのないタッチ端末では説明が開きません。スマホ向けには説明文を最初から表示するか、タップで開閉する形に切り替えるのがおすすめです。展開アニメ自体はマウス操作の付加価値として割り切る考え方もあります。
カードの枚数は 3 枚から変えられますか
変えられます。article を増減し、グリッドの列数を合わせれば 2 枚でも 4 枚でも組めます。ただし 1 行に並べすぎると 1 枚が細くなるため、画面幅に応じて折り返す指定を入れるとバランスが保てます。