ホームページ作成/リンクの表示・装飾 (HTML,CSS,JavaScript)

どのリンクが選択中なのかを際立たせる装飾

リンクの上にマウスを乗せると装飾が変化するデザインはよく使われていますね。では、リンクの上にマウスを乗せたときに、リンクの横や下に矢印を表示させる装飾はいかがでしょうか。選択中の場所が際立つ装飾です。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

メニューやリンクリストに活用するとおもしろいかも?

リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。 では、リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。

以下のリンクにマウスポインタを重ねてみてください。

リンクにポインタを重ねると、リンク文字の右側に赤色の矢印(←)が現れるはずです。 リンクからマウスを放すと、矢印は消えます。 動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。

ここで表示しているリンクは、通常のテキストリンク(文字で書いたリンク)です。 どんな文字を何文字表示させているリンクの横でも実現可能です。

矢印でなくても表示可能

もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能です。 リンクにマウスポインタを重ねてみてください。

今度は、「(リンク先へ)」のような画像が表示されたはずです。
同時に文字色も変化させていることから気づかれたかもしれませんが、 これらの装飾はスタイルシートの「hover疑似クラス」を使うことで実現しています。 何も特別な方法は使っていません。
※「hover疑似クラス」は、リンクにマウスが載ったときに文字色や背景色を変化させるためによく使われるスタイルシートの記述方法です。

横でなくても表示可能

もちろん、表示場所は横に限りません。以下の例では、横方向に並んだリンクの上側に矢印(↓)を表示させています。 似たような装飾でリンクが並んでいる「メニュー」項目用の装飾などとして活用するとおもしろそうです。

これらの装飾は、スタイルシートのみで実現できます。 画像の表示・非表示の切り替えにスクリプトを用いたりはしていません。 非常にシンプルなスタイルシートで実現できますから、既存のページに適用することもとても簡単です。

今回は、このようなリンクの装飾方法をご紹介いたします。

それでは、作成方法へ >>

  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます