(HTML,CSS,JavaScript)どのリンクが選択中なのかを際立たせる装飾リンクの上にマウスを乗せると装飾が変化するデザインはよく使われていますね。リンクの上にマウスを乗せたときに、リンクの横や下に矢印を表示させる装飾はいかがでしょうか。選択中の場所が際立つ装飾です。文宏ホームページ作成ガイドメニューやリンクリストに活用するとおもしろいかも?リンクの上にマウスポインタを載せると装飾が変化するデザインは、よく使われていますね。リンクの上にマウスを載せたときに、リンクの横や上などに矢印を表示させる装飾はいかがでしょうか。以下のリンクにマウスポインタを重ねてみてください。リンクからマウスを放すと、矢印は消えます。動的に矢印画像が表示されたり消えたりしますが、ここではスクリプトは一切使っていません。スタイルシートだけで実現しています。ここで表示しているリンクは、通常のテキストリンク(文字で書いたリンク)です。どんな文字を何文字表示させているリンクの横でも実現可能です。矢印でなくても表示可能もちろん、表示させるのは矢印である必要はありません。以下のような装飾も可能です。リンクにマウスポインタを重ねてみてください。」のような画像が表示されたはずです。これらの装飾はスタイルシートの「hover疑似クラス」を使うことで実現しています。何も特別な方法は使っていません。※「hover疑似クラス」は、リンクにマウスが載ったときに文字色や背景色を変化させるためによく使われるスタイルシートの記述方法です。横でなくても表示可能もちろん、表示場所は横に限りません。)を表示させています。似たような装飾でリンクが並んでいる「メニュー」項目用の装飾などとして活用するとおもしろそうです。]これらの装飾は、スタイルシートのみで実現できます。画像の表示・非表示の切り替えにスクリプトを用いたりはしていません。非常にシンプルなスタイルシートで実現できますから、既存のページに適用することもとても簡単です。今回は、このようなリンクの装飾方法をご紹介いたします。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。