Showcase

ホバーで切り替わるコンテンツUI

内容1タイトルダミー

内容1のテキストです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

内容2のテキストです。長めの文章も入れられます。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

内容3のテキストです。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。

操作に連動するコンテンツ切り替え

サイドメニューにマウスを乗せる、またはクリックすることで、対応するコンテンツを切り替えます。操作に応じて表示内容をスムーズに変更でき、複数の情報を限られたスペースに整理して見せることができます。
技術的なポイント

・柔軟なコンテンツ連動：メニューと表示内容を属性で紐づけ、項目の追加・変更にも対応しやすい構成
・動的な高さ調整：コンテンツごとに高さが異なる場合も、画面サイズに応じてレイアウトを調整
・マルチデバイス対応： PCのマウス操作だけでなく、スマートフォンのタップ操作にも配慮

一覧を見る