リンクの表示・装飾 (HTML,CSS,JavaScript)

リンク先を新規ウインドウで開くよう記述されているリンクに限定して、アイコンが付加されるようスタイルシートを書いてみましょう。target属性に値「_blank」が指定されているリンクに自動的に画像を表示させます。

一度移動するとブラウザの「戻る」ボタンを使っても元のページには戻れないリンクを作ることができます。移転メッセージの表示や閲覧条件の確認ページなどのような「戻っても意味がないページ」などに活用できます。

ちょっと変わったリンクのデザイン方法をご紹介。項目の少ないメニューや、目立たせたいリンクに良いかも。周辺の余白も含めて上下の文字列全体がリンクになっているため、クリック可能範囲の広いリンクです。

ニュースサイトなどでたまに見かける箱形のページ移動リンクを作ってみましょう。ただ数字を並べるよりも幅が広くて見やすく、クリックしやすいメリットがあります。画像ではなく文字なので、サイズ変更も可能です。

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

リンク文字の直後に、リンク先のファイル種類を示したアイコンを付加してみましょう。毎回画像ファイルを指定しなくても、スタイルシートを使えば楽にアイコンを付加できます。

「a:hoverを使っても色が変わらない」というトラブルの原因は、多くの場合、スタイルシートの記述順に原因があります。ここでは、正しいCSSの記述順を初心者にもわかりやすく解説します。

特定のリンクをクリックして移動する前に、移動して良いかどうか確認ダイアログを表示させてみましょう。HTMLファイルへのリンクだと勘違いして、PDFやDOCへのリンクをクリックしてしまうことを防ぐのに良いかも。

ボタンはクリックすると押し下がりますね。でも、テキストリンクは押し下がったりしません。テキストリンクもボタンのように押し下げられるようにしてみませんか？ 方法はとっても簡単。スクリプトは使いません。

通常のリンクでは、クリック可能なのは下線部分だけですね。周囲の説明文字や余白部分などもクリック可能にすると、クリックしやすくなって便利です。スクリプト不使用で手軽にクリック面積を拡大させてみましょう！