ロールオーバーを使おう

Webデザイン講座 > ロールオーバーを使おう

: フォルダ内のコンテンツ

01.全般とレイアウト
01.ページは統一を

02.カラー
01.配色で雰囲気が決まる
02.無彩色を使おう

03.イメージ
01.画像には質感を
02.ロールオーバーを使おう

04.ユーザーフレンドリー
01.文字の大きさ
02.行間を設定しよう

:: あなたのWebサイト作成にヒントを与えるWebサイト講座。デザインのトリックと工夫をあなたに。

│目次│ヘルプ│

: まえおき

ロールオーバーは、マウスを画像にのせることによって画像が入れ替わる効果を指します。ここではマウスに反応するものとして扱います。

: ロールオーバーの必要性

マウスに反応することでインタラクティブ、楽しいページを作ることができます。インタラクティブ、相互作用は動作に対して反応してくれるちょっとした楽しさ、この根本には、人間工学的な部分があるのでしょう。

ちなみにこのロールオーバー、最近のOS、AppleのOS XやMicrosoftのWindows XPなどにも多く使われています。わかりやすく親切なインターフェイス構築という点では必須な効果といえるかもしれません。

: 使うときのポイント

まず、リンクの文字列にポイントしたときには必ず反応するようにしておきましょう。これはスタイルシートで適応することで、Webサイトのすべてのページのリンクが適応されるのでわかりやすくなります。そして、メニューなどに使用する場合は動作の軽いテーブルセルの色のロールオーバーを考えてみるのもいいでしょう。

画像のロールオーバーも同様に他のサイトから拾ってきたコードを参考にhtmlに記述して完成します。ちなみにDSSの上のコンテンツタブとナビゲーションバーのロールオーバー後のスムーズな画像の動きは、ロールオーバーのhtml記述とアニメーションのgifを組み合わせてこのような効果を生み出しています。工夫によっておもしろいロールオーバーができそうですね。

: 関連するページ

画像編集ソフトウェア - 画像編集ソフトウェアの一覧ページ

戻る

ホーム

Design Studio SR Version 3.5