CSSこんにちは!本気のパソコン塾の三浦です。今回はHTMLのaタグ(リンクタグ)についてです!リンクと言ってもさまざまな使い方があり、全て覚えるのは大変です。今回はまとめ記事のような感じで作ってみましたので、辞書代わりに利用してみてください!aタグ(リンク)ってなに?まずはじめに、Web上の文章の一部をクリックすると、別ページに移動するものをリンクと言います。このようなやつですね↓(クリックするとトップページに移動するので戻ってきてくださいね!)本気のパソコン塾に移動します。このリンクを作るためのHTMLタグをリンクタグ又はaタグと言います。aタグという名前に統一して説明していきます。基本的な使い方を理解しようまずは基本のサンプルをみてください。href="https://honki-pc.jp">本気のパソコン塾</a>に移動します。</body></html>表示結果(クリックするとトップページに移動するので戻ってきてくださいね!)本気のパソコン塾に移動します。href=””></a>が基本的なaタグになり、href=””の中にリンク先のページURLを入れると完成です。href=“https://honki-pc.jp”>本気のパソコン塾</a>に移動します。9行目のように、aタグにはリンクする部分に文字をいれることができます。書いてあるからクリックしやすいんじゃないかな.....と考えてはいけません!この場合は2番の方法でaタグを利用するほうが望ましいです。いうのも、aタグのキーワードはSEO(GoogleやYahooサイトでの表示順位をあげる方法)に影響を与えます。「こちら」の方がわかりやすいかもしれませんが、googleなどの検索エンジンは「こちら」の意味がわかりません。意味分かんないよ!と嫌がられてします。Webサイトを公開する以上、アクセスがたくさんくるサイトを作りたいですよね。そのためにはSEOを意識しておいて損はありません。リンクのキーワードは意味のわかるものを利用していきましょう!リンクを新規タブで開こうリンクは通常同じページで移動しますが、別のタブで画面を開くこともできます。target="_blank">本気のパソコン塾</a>に移動します。本気のパソコン塾に移動します。クリックすると新規タブで、ページが開きましたね。自分のサイトで移動する場合は同じタブで外部サイト(他人のサイト)に移動する場合は別タグで開くのが一般的です。画像にリンクを適応してみる画像をリンクにしたい場合は、画像タグ(imgタグ)をaタグで囲ってあげましょう。/></a></body></html>この時に、alt属性を忘れずに入れておきましょう!画像をリンクにする場合、aタグのキーワード部分がなくなるので、その変わりに画像のalt属性をいれてあげましょう。Googleなどの検索エンジンはその画像がどんな画像なのかalt属性から判断できるようになります。CSSがわかる方は!CSSが理解できる場合は、aタグにこちらを適応しておきましょう!マウスが画像の上に来た時に画像が半透明になります。サイトを見ている人も「これはリンクだな」とわかるのでおすすめです。}ページ内リンクをつくってみるお次は同じページ内で移動したい場合に利用する、ページ内リンク(内部リンク)の使い方です。移動したい部分のタグにidで名前を付けます。aタグでリンク先を#end(#idの名前)にしましょう。同じページ内の移動が可能になります。注意idは各ページに一箇所までとなっているので、注意して利用しましょう!いっぱいあるとどの部分に移動したらいいかわからなくなります。リンクに電話番号をいれる!(メールアドレスも)最近はスマホの利用者が圧倒的に増えてきて、スマホ向けのサイトを作ることも増えてきましょた。スマホ利用者向けに、タップしたらすぐに電話ができるようにすることができます。これもaタグで作ることができます。protected]">メール問い合わせはこちらへ</a></body></html>hrefの中に”tel:電話番号”を入れると、スマホの場合はタップで電話がかけれるようになります。”mailto:メールアドレス”を入れると、メールが送れるようになります。電話番号はHTML5からこの電話ができる機能に関しては、HTML5からになっています。それ以前のHTMLバージョンで作られているサイトでは機能しないので、注意ください。メールアドレスは載せないほうがいい?最近では迷惑メール対策として、お問い合わせフォームに誘導する流れが一般的になっています。メールアドレスを公開する際は、公開していいのかどうか検討しましょう。いかがでしたでしょうか?今回はaタグについてまとめてみました。様々な機能がありました。全てを覚える必要はありません。いうような感じで記憶に残っていればokだと思います。必要に応じてこのページに戻ってきて、コピペで利用してくださいね。現在は自分のサービス運営や企業のコンサルティングをしています。comment.上に表示された文字を入力してください。質問や相談はこちらへ!Twitter最新情報を配信しています。YouTubeライフハックやクリエイター対談Facebook最新情報を配信しています。Podcastインタビューや過去秘話など音声でお届け。質問や相談はこちらへ!Twitter最新情報を配信しています。Instagram仕事やノウハウ短編動画配信中。YouTubeライフハックやクリエイター対談Facebook最新情報を配信しています。