ここではリンクの基本を学びます
リンクタグの「a href」（エー・エイチレフ）は、リンク先を指定する役割
<a href="リンク先のＵＲＬ">アンカーテキスト</a>
hrefとはhypertext reference（ハイパーテキスト）
練習用ファイルDL／link-rensyu.zip
01 テキストリンクで別ページへ（相対パス）
HTML
<a href="second.html">セカンドページへ</a>
DEMO
セカンドページへしかし、このままだと現在のページが消えてしまいます。
このページをキープしたままセカンドページへリンクさせるために「target」を使います。
HTML
<a href="second.html" target="_blank">セカンドページへ</a>
DEMO
セカンドページへ02 テキストリンクで他のURLページへ（絶対パス）
HTML
今すぐ<a href="https://www.colordic.org/" target="_blank">カラーサンプル</a>を見てみよう
DEMO
今すぐカラーサンプルを見てみよう03 画像を使ったリンク
gazou.png のところには使いたい画像の名前を入れます
alt のところへはテキストで画像の説明を入れます
HTML
<a href="second.html" target="_blank"><img src="second.png" alt="セカンドページへ"/></a>
DEMO
マウスオーバー時に画像を変化させるために以下のスタイルシートを入れておくとよいでしょう
リンクのある画像全部に適応されます。
CSS
a:hover img {
filter: alpha(opacity=70);
-moz-opacity: 0.6;
opacity: 0.6;
}
04 メールリンク
メールリンクの場合は「mailto:」
HTML
<a href="mailto:info@xyzz.com">メール</a>
DEMO
メール05 電話リンク
電話リンクの場合は「tel:」
HTML
<a href="tel:000-000-4567">TEL.000-123-4567</a>
DEMO
TEL.000-123-4567※PCの場合は電話リンクが使えません。
スマホの時だけリンク出来るようにCSSに以下を入れてください。
こうすることによって、スマホの時だけリンク表示されタップして電話ができるようになります。
CSS
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}
06 電話番号に画像を使う場合
HTML
<a href="tel:000-000-0000"><img src="tel.png" alt="電話番号"></a>
DEMO
07 スムーズスクロールを設定しておこう
ページ内リンクをクリックすると、リンク先へスルスルッと移動するスムーズスクロール。
ページ内リンクの方法は「ZOO」のページを参考にしてください
CSS
html{
scroll-behavior: smooth;
}
08 リンク参考ページ
テキストリンクのデザイン
https://p1room.com/ref/file/text-link/
ボタン、リストデザイン
https://p1room.com/ref/file/button/