リンク手法の基本

リンクがひとつもないWebページは存在しないといえます。必ずありますので基本的なことは覚えておきたいものですね

リンクの設定方法

[HTML]

<a href="リンク先URL">～</a>

「～」の部分は、画面表示部分でテキスト、画像、その他タグを設定できます。

テキストリンク 例

[HTML]

<p>関連リンク<a href="リンク先URL">タイトル</a></p>

画像リンク 例

[HTML]

<a href="リンク先URL"><img src="./images/image.jpg" alt="イメージ画像"></a>

箇条書きリストのリンク 例

[HTML]

<ul>
    <li><a href="リンク先URL1">タイトル1</a></li>
    <li><a href="リンク先URL2">タイトル2</a></li>
    <li><a href="リンク先URL3">タイトル3</a></li>
</ul>

title属性を追加するとマウスがリンクにホバーした際にtitle属性で設定したテキストが表示されます。

[HTML]

<a href="リンク先URL" title="お問合せ">こちらへ</a>

※スマホやタブレットではホバーしても表示されませんので何か別なことを表示する必要がない限り使わないでよいかと思います。

リンク先を別のサイトへリンクする

ユーザーが自サイトから離れることになりますのでWindowは別タブで開くべきですね。戻ってきてくれればいいですが戻れない場合もありますので。

リンク先を別タブで開くようにするには「target="_blank"」というtarget属性を入れましょう。

[HTML]

<a href="リンク先URL" target="_blank">～</a>

同じページ内の特定の場所にリンクする

ページ内リンクをする（ページ内で指定した場所に飛びたい）場合は、リンク先のタグにid属性を追加しておきます。

指定方法はhref属性に#をつけたid名を指定します。

[HTML]

<a href="#id名">～</a>

このリンク手法は瞬時にページ内の該当箇所に移ります。ページが流れるように該当箇所へ移動させたい場合などはjavascript等を使いましょう。

移動した場所を分かりやすくするために「:target」セレクタに特別なスタイルをつけてみてもよいでしょう。リンクから移動したときだけ背景色を変えるとかですね。

[CSS]

:target {

}

別ページの特定の場所にリンクする

ページ内リンクと同様にリンク先のタグにid属性を設定する必要がありますが別ページを指定する場合にはリンク先URLの後ろに#id名を付けて指定します。

[HTML]

<a href="リンク先URL#id名">～</a>

自サイトではid属性を設定すればよいだけですが、他サイトではid属性が設定されているとは限りませんよね。id属性が設定してあった場合に限り使える手法です。

ファイルをダウンロードさせるリンク

ファイル所在のURLでPDF等のファイルを指定すると通常はブラウザ上で表示されます。ファイルをダウンロードする形にしたいときにはdownload属性を指定しましょう。

[HTML]

<a href="ファイル所在URL" download="保存ダウンロードファイル名">～</a>

download属性の値は保存されるときのファイル名を指定します。hrefで指定したファイル名と異なってもOK。

リンクテキストのスタイル

CSSにてスタイルを変更することができます。

サイトのイメージと合わない場合はスタイルを変えます。スタイルを適用する順番も関係あるようなのでCSS記述する際には注意しましょう。（上から順）

[CSS]

a {

}
a:link {

}
a:visited {

}
a:hover {

}
a:active {

}

リンクの下線を消す

サイトのイメージに合わなくてテキストリンクの下線を消したい場合はtext-decorationプロパティをnoneにすると下線を消すことができます。

[CSS]

a {
    text-decoration: none;
}

マウスがホバーしたとき半透明にする

半透明にするには要素の透明度を設定するopacityプロパティを使います。

:hoverセレクタのスタイルにopacityプロパティを追加しておくことでマウスホバー時に半透明にすることができます。

[CSS]

a:hover {
    opacity: 0.75;
}

値は単位なしで0～1の少数を指定します。0は完全な透明で見えません。1は透明にしないデフォルト値です。