htmlのリンクの設定 aタグの使い方
htmlのリンクの設定 aタグの使い方
aタグの使い方
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570515__480.webp)
すみれ
う〜ん、どうやったらWebサイトから別のサイトに行ったり、サイトの中を移動したりできるのかしら?
どこかに教えたがりの地味な先生はおられませんかしら?
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
あの、、すみれちゃん、、、
えっと、あの〜aタグのことで良いのかな?
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595957__480.webp)
すみれ
そうですわ! そのaタグと言う子のことを教えていただけませんか?
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
aタグはリンクタグとも言い、別のページや任意の場所に移動することができるタグだよ。
<a href=”~”></a>
<a href=”リンク先のURL”>xxx</a>
xxxの部分をクリックするとhref=”~” ~の部分に記述したリンク先に行きます。
例えば、Yahoo!へのリンクを設定する場合は
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAJ9AQAAAAD87VILAAAAAnRSTlMAAHaTzTgAAACrSURBVHja7cEBDQAAAMKg90/tZg6gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAbV8sAAV+LoE8AAAAASUVORK5CYII=)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/8169d426c0ed518a184c525c54680928.png)
上記のように記述すると、
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAGeAQAAAABd1SG6AAAAAnRSTlMAAHaTzTgAAAB4SURBVHja7cEBDQAAAMKg909tDjegAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA4NUAhc0AAYaTMJ0AAAAASUVORK5CYII=)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/1a8641c0e0b58c8a8b47fdb4fe0c6f1b.png)
aタグの中の文字がリンクになるので、クリックすると、
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAGLAQAAAAAOzrKSAAAAAnRSTlMAAHaTzTgAAABySURBVHja7cEBAQAAAIIg/69uSEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANwac+oAAaNMvgUAAAAASUVORK5CYII=)
href=”~~~” ~~~のURLに飛びます。
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/e298ea240c846873317b78433b9daa9c.png)
href=”~~~” ~~~のURLに飛びます。
別ウィンドウで開くリンク
<a href=”https://www.yahoo.co.jp/” target=”_blank”>Yahoo!</a>
赤の部分を記述すると、
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAJ7AQAAAAAqtLEWAAAAAnRSTlMAAHaTzTgAAACrSURBVHja7cGBAAAAAMOg+VNf4QBVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHAaVekAAYj5FLwAAAAASUVORK5CYII=)
赤の部分を記述すると、
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/b03fc841c38e67d383fc9d9552ffd03e.png)
リンクをクリックしたら、
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAHBAQAAAACgDZuYAAAAAnRSTlMAAHaTzTgAAACASURBVHja7cExAQAAAMKg9U9tCy+gAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAmwGmwAABkIaOSwAAAABJRU5ErkJggg==)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/c8388a8b3de1f237f71fcebb9b9f2461.png)
別のタブでリンクを開くことが出来ます。
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAF8AQAAAAAGWZszAAAAAnRSTlMAAHaTzTgAAABvSURBVHja7cEBAQAAAIIg/69uSEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwKcBZcsAAVvMos0AAAAASUVORK5CYII=)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/654b7b9c4d3243950edb070916f027c1.png)
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
ただ、あんまり多用し過ぎるとウインドウがたくさん開いてしまい、サイトを見ている人が不愉快になってしまうことがあるため多用には気を付けましょう。
ページ内を移動するリンク
<a href=”#xxx”>同じページの指定した場所</a>
<h2 id=”xxx”>指定されている場所</h2>
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAHoAQAAAACArs9mAAAAAnRSTlMAAHaTzTgAAACISURBVHja7cEBDQAAAMKg909tDwcUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwast3AAGDC0+MAAAAAElFTkSuQmCC)
<h2 id=”xxx”>指定されている場所</h2>
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/e2464aa938a837e6403e0092e6d6f285-1.png)
例えば下記の画像のリンク部分をクリックすると
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAEtAQAAAADBi0BhAAAAAnRSTlMAAHaTzTgAAABdSURBVHja7cGBAAAAAMOg+VNf4QBVAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHAbG2wAAdOtFM4AAAAASUVORK5CYII=)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/f2cecf0587053c0efacb47fc1d9ba534-1.png)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/613e387cef4ac0677ad0c29b016e2670.png)
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/76594ea498b74e576ea62f51200ee797.png)
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
htmlのタグに固有の名前(id)を付けて、<a>タグで#固有の名前と記述し任意の場所に移動するように設定します。
idは<p>タグや今後使うことになる<div>タグなど様々なタグに付けることが出来ます。
画像ファイルをリンクにする場合
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
<a>タグは画像をリンクにすることも出来るよ。
<a href=”リンク先のURL”><img src=”画像の場所”></a>
![](https://hiros-hobby-house.com/wp-content/uploads/2021/09/71c957def9da99a5490621cc691839f5.png)
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
このように簡単に画像をリンクにすることが出来るよ。
-
- リンクを設定する時に使用するのが<a href=”~~~”></a>タグ
- <a href=”リンク先のURL”>xxx</a> xxxの部分をクリックするとリンク先のURLに飛ぶ。
- <a href=”リンク先のURL” target=”_blank”>target=”_blank”を追記するとリンク先のURLを別タブで開く(多用厳禁)
- タグにidで固有の名前を付けて<a>タグの行き先を#固有の名前、とするとページ内を移動出来る。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-570514__480.webp)
すみれ
先生、ありがとうございます!!
何となくわかった気がしますわ。
![先生](https://hiros-hobby-house.com/wp-content/uploads/2022/07/man-1459246__480.webp)
先生
何となく、、?
まぁ、雰囲気だけでもわかってもらえて良かったよ。
僕、教えたがりだから、また何かわからないことがあったらいつでも聞いてね。
![すみれ](https://hiros-hobby-house.com/wp-content/uploads/2022/07/moe-595956__340.webp)
すみれ
は〜い、ありがとうございました!!