<a> タグは、 リンクを表示するタグ です。
文章や画像を、この <a> タグで囲むことで、リンクを表示することができます。
■ <a> タグの記述例
<a href="https://toretama.jp/">ホームページに掲載する文章</a>
|
■ ホームページ上の表示
上記のように、<a> タグを使うことで、 リンクを表示すること ができます。
なお、href で、https://toretama.jp/ を指定していますが、ここで指定するものが、リンク先になります。
たとえば、上記では、https://toretama.jp/ をリンク先に指定しているため、上記のリンクをクリックすると、https://toretama.jp/ に移動する、という形ですね。
ちなみに、同じホームページ内にリンクを貼るのであれば、URLを指定するのではなく、「ファイル名」を指定しても良いです。
たとえば、同じホームページ内であれば、、、
<a href="tag19.html">ホームページに掲載する文章</a>
|
というように、 「ファイル名」 を記載しても、リンクを貼ることができます。
このような書き方も、ぜひ覚えておいてくださいね。
あと、これも覚えておいていただきたいのですが、、、
リンクをクリックしたときに、今見ているページを残したまま、新しくリンク先のページを開くこと(別ウィンドウを立ち上げること)もできます。
具体的には、下記のような書き方をします。
■ 別ウィンドウを立ち上げる時の <a> タグの記述例
<a href="https://toretama.jp/" target="_blank">ホームページに掲載する文章</a>
|
■ ホームページ上の表示
上記のように、 target="_blank" という記述を入れることで、リンクをクリックしたときに、「別ウィンドウ」が立ち上がって、その別ウィンドウで、リンク先が表示されるようになります。
試しに、上記のリンクをクリックしてみてください。
別ウィンドウが立ち上がって、その別ウィンドウで、ホームページが表示されますよね?
別サイトにリンクをする場合は、このようにした方が良いので、ぜひ覚えておいてくださいね!
なお、このリンクの使い方については、ホームページのリンクと画像を表示させる方法 のページと動画を見てみてください。
これを見れば、ホームページのリンクの貼り方は、マスターできると思います。
(画像のリンクを張る方法もお伝えしています)
そして最後に、リンクの貼り方で、もう1つ覚えておいていただきたいことは、リンクをクリックすると、ページの途中に移動する方法 です。
リンクをクリックしたときに、「ページの途中に移動するようにしたい!」という場合もあると思いますので、ぜひこのやり方も覚えておいてください。
まず、移動したい場所に、下記の一行を記載します。
そして次に、下記のようにリンクを表示させます。
<a href="tag19.html#koko">ページの途中に移動する</a>
|
こうすることで、リンクをクリックすると、tag19.html ページ内の、 <a name="koko"></a> の記述がある場所に、移動することができます。
ちなみに、上記の koko という記述は、特にどんな文字列でも問題ありません。
ここでは分かりやすいように、 koko と記述しましたが、これはただの目印なので、別の文字列に変えても大丈夫です。
あとは、ポイントとしては、リンクを貼るときに、 tag19.html#koko という形で、 ファイル名の後ろにシャープ ( # ) を入れて、その後ろに目印である koko を記述する 、ということですね。
こうすることで、目印の場所に移動するリンクを表示させることができます。
それでは、実際にやってみましょう!
下記のリンクをクリックしてみてください。
ページの途中に移動する
リンクをクリックすると、この場所にページが移動しましたよね?
ページの途中に移動するためには、このような方法で行いますので、
ぜひ覚えておいてくださいね。