盗んで増やそう！CSSデザインの引き出し: 第3回 マウスオーバーでビョ～ンと情報を表示する
盗むデザインアイデア
連載も3回目となりました。今回は参考サイト「VUZUM」から、「マウスオーバー／アウトによる情報の開閉」というアイデアを盗みます。
VUZUMのWORKページにアクセスして、各事例のサムネイルにマウスを重ねてみましょう。
事例のタイトル部分が上方向にスライドするとともに、説明文と詳細ページへのリンクが表示されますね。ポートフォリオサイトなど、サムネイルを大きく扱うデザインでよく見かけるデザインアイデアです。
このデザインアイデアのメリットは、マウスオーバー／アウトをトリガーにして領域内のデザインを変更することで、多くの情報を載せることできる点です。参考サイトでは、以下の要素を小さな領域内に収めています。
- サムネイル
- タイトル
- 説明文
- 詳細ページへのリンク
説明文やリンクは必要になるタイミングまで隠しておき、サムネイルを大きく見せることで、自然にユーザを事例コンテンツに導く作りになっています。
鍵となるoverflowプロパティ
「マウスオーバー／アウトによる情報の開閉」を実現するための鍵となる技術はoverflowプロパティです。overflowは「溢れる」や「はみ出る」といった意味です。
overflowは、子要素の領域（子領域）が、親要素の領域（親領域）から溢れ出た際の扱いを決めるプロパティです。以下は、指定できる主な値です。
プロパティ値 内容 visible 親領域から溢れ出た子領域を表示します。 hidden 親領域から溢れ出た子領域を非表示にします。 scroll 親領域から溢れ出た子領域を非表示にし、親領域がスクロール可能となります。 auto 利用ブラウザーに依存。大半がscrollと同様の挙動になります。
では、親要素と子要素を用意して、各値を試してみましょう。
親要素内に子として子要素を入れます。子要素の方が親要素よりも大きいので、“溢れ”が発生します。図5は、各値を適用した場合の挙動です。
visibleの場合、溢れ出た子領域をそのまま表示しています。一方、hiddenの場合、溢れ出た子領域が非表示になり、マスク効果と同様の状態になります。scrollの場合、溢れ出た子領域は非表示になるのですが、親要素上でスクロールすると溢れ出た領域を表示することが可能です。autoは利用ブラウザー依存なので、scrollと同様の挙動になっています。
それでは、hiddenを利用して「マウスオーバー／アウトによる情報の開閉」を実装してみましょう。
サンプルでアイデアを試す
デモ完成形は以下のように、黒枠領域（親要素）にマウスオーバーすると半透明レイヤー（子要素の一部）が現れ、マウスアウトすると隠れます。
では、ひな形から作成していきましょう。
// ひな形 <!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>demo</title> <style> /* リセット */ html, body, header, footer, div { margin: 0; padding: 0; } #box { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 5px solid #333; } #thumbnail { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: url(‘./images/properties_child_bg.png’) repeat center center; background-size: 32px 32px; } #overlay { position: absolute; left: 0; width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.5); } </style> </head> <body> <div id=”box”> <div id=”thumbnail”></div> <div id=”overlay”></div> </div> </body> </html>
親要素（id名：box）があり、その子要素としてサムネイル表示用要素（id名：thumbnail）とオーバーレイ用要素（id名：overlay）が格納されています。
親要素を基準（position:relative）にして、サムネイル表示用要素とオーバーレイ用要素が絶対配置（position:absolute）されています。よって、サムネイル表示用要素とオーバーレイ用要素は重なり合うように配置されます（オーバーレイ用要素が前面、サムネイル表示用要素が背面）。
オーバーレイ用要素は親要素がマウスオーバーされるまで表示したくないので、配置座標を変更しましょう。
#overlay { position: absolute; top: 300px;// 垂直方向の配置座標を指定 left: 0; width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.5); }
オーバーレイ用要素が親要素から溢れ出る形で配置されましたが、溢れ出た領域が見えています。溢れ出た領域を非表示にするために、今回の鍵となる技術であるoverflowプロパティを利用しましょう。
#box { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 5px solid #333; overflow: hidden;// 溢れ出た領域を非表示にする }
溢れ出たオーバーレイ用要素が見えなくなりました。次に、マウスオーバーされた時にオーバーレイ用要素を親要素領域内に移動させましょう。新しく以下のスタイルを追記します。
#box:hover #overlay { top: 0; }
これで、
- マウスオーバー時、オーバーレイ用要素が表示される。
- マウスアウト時、オーバーレイ用要素が隠される。
を実現することができました。このままだとオーバーレイ用要素の開閉がチカチカするので、最後にオーバーレイ用要素の開閉を前記事で扱ったステートフルなアニメーションにしてみましょう。
#overlay { position: absolute; top: 300px; left: 0; width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.5); transition-property: top;// 対象プロパティ transition-duration: 300ms;// アニメーションにかかる時間 transition-timing-function: ease-out;// イージング }
これでオーバーレイ用要素がアニメーションで開閉するようになりました。以下、デモの完成コードです。
<!doctype html> <html lang=”ja”> <head> <meta charset=”utf-8″> <title>demo</title> <style> /* リセット */ html, body, header, footer, div { margin: 0; padding: 0; } #box { position: relative; width: 300px; height: 300px; margin: 50px auto; border: 5px solid #333; overflow: hidden; } #thumbnail { position: absolute; top: 0; left: 0; width: 300px; height: 300px; background: url(‘./images/properties_child_bg.png’) repeat center center; background-size: 32px 32px; } #overlay { position: absolute; top: 300px; left: 0; width: 300px; height: 300px; background-color: rgba(0, 0, 0, 0.5); transition-property: top; transition-duration: 300ms; transition-timing-function: ease-out; } #box:hover #overlay { top: 0; } </style> </head> <body> <div id=”box”> <div id=”thumbnail”></div> <div id=”overlay”></div> </div> </body> </html>
最後に
overflowプロパティの利用例として、サムネイルへのマウスオーバー／アウトによる開閉を挙げましたが、overflowは他にも多くの場面で利用できる有用なプロパティです。例えば、「ナビゲーションやメニューの開閉」や「視覚効果」などです。使うのが楽しくなるプロパティですので、みなさんもいろいろ試してみてください。