にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

押し込める(押し下げられる)テキストリンクを作る [リンク,配置]

テキストリンクの上にマウスポインタを載せた際の装飾方法にはいろいろあります。配色を変化させることが多いでしょうが、配置を数pxだけずらすと「押し下げる」ような効果を出すこともできます。

テキストリンクの場合にも「押し下がる効果」を出したい

テキストリンクの場合でも、視覚的に押し下がる効果が出るように装飾すると「どの範囲のリンクを押そうとしているのか」が明示できて分かりやすいかもしれません。

例えば、以下のボックス内にはリンクが1つあります。このリンクテキストの上にマウスポインタを載せると、テキストが押し下がったように見えるはずです。

テキストリンクです。
マウスポインタを載せると、リンクが押し込まれたように見えます。

上記の例では、リンクの上にマウスポインタを載せると、右側に2ピクセル・下側に2ピクセルずれて表示されるため、リンクが「押し込まれた」ように見えます。

リンクテキストが押し込まれたように見えるスタイルシート

上記のような装飾を作るには、以下のようにCSSソースを記述します。ここでは、a要素のhover疑似クラスに対して指定しているので、a要素(リンク)の上にマウスが載った際にこの装飾が適用されます。

CSSソース

a:hover {
   position: relative;
   top: 2px;
   left: 2px;
}

まず、positionプロパティに値「relative」を指定すると、本来表示される位置から相対的に表示位置をずらすことができます。ずらす距離は、top・bottom・left・right各プロパティの中から2個を使って指定します。
上記の場合は、topプロパティとleftプロパティに2pxを指定しているため、

  • 本来表示される位置の上端から(下方向へ)2ピクセル移動
  • 本来表示される位置の左端から(右方向へ)2ピクセル移動

のように表示(=右下方向にずれて表示)されることになります。
その結果、テキストリンクが押し下がったように見えるわけです。
どれくらいの距離を移動させるかは、top・left各プロパティの値を調節すれば自由に決定できます。

※右へずらしたいからといってrightプロパティを使ってしまうと逆方向(左)へ移動してしまうので注意して下さい。「右へ3pxずらしたい」場合は、「左端から3pxの距離へ動かす」ことになるので「left: 3px;」と書く必要があります。


()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---