ホームページ作成

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

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

HTMLやスタイルシート（CSS）、JavaScriptを使ったリンクの表示、装飾方法について解説しました。

リンクリストの先頭画像もクリック可能に

HTMLのリストを使ってリンクリストを作成した場合、リストの先頭記号はクリックできません。リストの先頭記号を画像に置き換えた場合、その画像もクリック可能にしたいことがあります。CSSで実現する方法をご紹介。

ガイド：西村文宏
別ウインドウで開くリンクにアイコンを付加

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

ガイド：西村文宏
元のページに戻れないリンクを作る

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

ガイド：西村文宏
リンクの表示先ウインドウを選択可能にする

リンクを「新規ウインドウで開く」か「既存ウインドウで開く」かを閲覧者が自由に選択できるようにする方法をご紹介。表示先をJavaScriptで切り替えれば、同じリンク先へのリンクを2つ作らなくても済みます。

ガイド：西村文宏
周囲の余白や文字も含めてリンクをデザイン

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

ガイド：西村文宏
箱形のページ移動リンクを作る

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

ガイド：西村文宏
どのリンクが選択中なのかを際立たせる装飾

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

ガイド：西村文宏
リンク文字の直後にアイコンを加える

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

ガイド：西村文宏
実は重要！スタイルシートの記述順！

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

ガイド：西村文宏
PDFへのリンクに便利。リンク移動前に確認させる方法

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

ガイド：西村文宏

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！