テスト(マウスオンの処理)

ひとつ前のページに戻る


マウスオンの動作サンプル
スマートフォンではタップ操作!
経緯と状況
 マウスオンで表示が変わると、見ている場所がわかりやすくなるなど視認性が良くなり使いやすいサイトになると思いサンプルを用意しました。
 個々のシチュエーションにより、もう少し違った動作などが必要になると思います。そういった場合に応じたカスタマイズも可能です。
【サンプル1】 ボタン
 このボタンは、環境によりスマートフォンでは無意味な動作となる場合があります。

【画像使用なし】 背景色だけを変更
【画像使用1】 2つの画像ファイルを使った変更
【画像使用2】 1つの画像ファイルで実現
【サンプル2】 ツールチップ表示
 この機能は、リンクとして使用するとスマートフォンでは動作が冗長になったり無意味になる場合があるため、使いどころに注意が必要になります。

【ツールチップ】 吹き出し表示1
マウスを上に(スマホはクリック)
サンプル表示
このように、フキダシのようなツールチップが表示されます。簡単な注釈として使用したりできます。
【ツールチップ】 吹き出し表示2 画面幅対応
i

ツールチップは、PCではかなり使い勝手の良いテクニックです。しかし、スマホでは「マウスオン」という概念が無いので、タップ動作が必要になります。注釈表示するだけであれば問題ないのですが、リンクする場合は2回タップの必要があったり、ツールチップ表示前にリンク先へ飛んだりしてしまいます。環境によっては、ツールチップを見る暇もないというわけです。 しかし便利ですが ›

【サンプル3】 テーブル
 PCではマウスオン、スマホではタップすることで、背景色が変わります。
 横一列全体を着色するタイプは、行単位の把握が容易になります。クリックで色固定するタイプは、ちょっとした選択を覚えておくなどに使えます。

横一列をすべて着色するサンプル
ダミー ダミー
ダミー ダミー
ダミー ダミー
ダミー ダミー

 

個々のセル単位で着色するサンプル。クリック色固定付き。
ダミー ダミー ダミー
ダミー ダミー ダミー
ダミー ダミー ダミー
ダミー ダミー ダミー



長浜市立 湖北病院

住所:〒529-0493
滋賀県長浜市
木之本町黒田1221番地

TEL:(代表)0749-82-3315

FAX:0749-82-4877

ページ上へ