マウスポインタに反応するリンクテキスト
| |
|
 | |
CSSを使うと、マウスポインタに反応して外観の変化するリンクテキストが作れます。反応するのはあくまでテキストなので、派手さはありませんが、手軽にインタラクティブな仕組みを作れます。
まず、通常通りページをレイアウトします。リンクテキストにはジャンプ先となるURLを設定しておきます。レイアウトが完成したらCSSスタイルを作成します。
【CSSスタイル】パネルから、【新規CSSスタイル】ボタンをクリックし、【新規スタイル】ダイアログを表示します。【タイプ】から【CSSセレクタと疑似クラスの使用】にチェックを入れ、【セレクタ】から「a:hover」を選択します。「a:hover」は、リンクテキスト部分にマウスポインタが重なった場合のスタイルですリンクテキストにマウスポインタが重なった場合、そのテキストをどのような状態に変化させるかを【スタイル定義】ダイアログで設定します。
次に【タイプ】カテゴリを選択し、フォントの設定を行います。
さらに、リンクテキストの背景色なども変更します。【背景】カテゴリで【背景色】を設定するだけです。ここで設定する背景色はページ全体のものではなく、あくまでもリンクテキストの背景のみが対照です。すべての設定が完了したら【OK】ボタンをくりくしてダイアログを閉じます。マウスオーバー時以外のリンクテキストのカラー設定は、【修正】メニューの【ページプロパティ】を選択し、【ページプロパティ】ダイアログから行います。【リンク】は何もしていない時、【訪問済みのリンク】は既に訪問したリンク、【アクティブリンク】はリンクがクリックされた時のテキストカラーです。ただし、ページプロパティで設定できるのはテキストカラーのみです。下線の有無やテキスト背景色など、より詳細な設定を行いたい場合は、やはりCSSが必要にまります。設定方法は「a:hover」と基本的に同じで、「a:link」が通常時、「a:visited」が訪問済み、「a:active」がクリック中となります。