aタグにできることのおさらい！別タブで開く際は「noopener」設定も忘れずに

aタグにURLを指定する

まずはaタグの基本的な使用方法であるリンクの貼り付けをおこないます。URLの指定方法は2種類あって、「絶対URL」と「相対URL」のどちらかで指定します。

例えばチェピレアのトップページ（https://chepirare.com/）から、今ご覧のこのページ（https://chepirare.com/html/a/）へのリンクを絶対URLで指定するなら…

            

                
<a href="https://chepirare.com/html/a/">aタグにできることのおさらい！別タブで開く際は「noopener」設定も忘れずに</a>
            
        

という形になります。これが一般的なリンクの指定方法なのでよく見る形かと思います。ページのURLである「https://chepirare.com/html/a/」が絶対URLです。

続いて相対URLですが、これはリンク先から見た目的地のURLの事です。チェピレアのトップページからこのページを見るなら「/html/a/」となり、記述は下記のようになります。

            

                
<a href="/html/a/">aタグにできることのおさらい！別タブで開く際は「noopener」設定も忘れずに</a>
            
        

何となく違いがわかってもらえるかと思いますが、絶対URLと相対URLはどちらで指定しても構いません。僕もどちらか一方だけというワケじゃなくどちらも使用します。

リンクは画像に付ける事もできますが、テキストに付けるほうがSEO的に評価されます。

aタグとは「Anchor（アンカー）」の略で日本語で船のイカリを意味します。なのでリンクを貼られたテキストの事を「アンカーテキスト」って言ったりします。

デザインを優先するとバナーなどの画像にリンクを付けてしまいがちなんですが、その分、サイドナビやフッターナビなどにアンカーテキストを設置しておけばSEO対策にもなるんです。

aタグに指定したURLを別ウィンドウで開く

次は別のサイトへ遷移する際の注意点をご紹介します。aタグのhref属性にはリンクするサイトの絶対URLを指定します。そして別サイトへリンクを貼る場合は別ウィンドウで開きましょう。

なぜ別ウィンドウで開くのかというと、同じウィンドウで別サイトにリンクしてしまうと元のページに戻れなくなるからです。ネットに詳しい方でしたら「戻る」のアイコンで戻れますが、そうじゃないと戻ってきてくれません。

せっかくホームページを見に来てくれた方たちを、ほかのサイトに誘導して終了っていうのは悲しいですよね？なので元のページは残しつつ、新規で別タブを開く方法をとれば簡単に元のページへ戻ってこれます。

            

                
<a href="https://www.yahoo.co.jp/" target="_blank" rel="noopener">Yahoo! JAPAN</a>
            
        

例として「Yahoo! JAPAN」へのリンクを設置してみました。こちらをクリックしてもらうと別ウィンドウでヤフーのサイトが開きますので試してみてください。

別ウィンドウを開く際のaタグには「target=”_blank”」と「rel=”noopener”」を記述しておきましょう。数年前までは「target=”_blank”」の記述だけでしたが、最近では「rel=”noopener”」も併記します。

どうやら「target=”_blank”」には脆弱性（セキュリティ上の欠陥）があるようで、それをカバーするために「rel=”noopener”」を付けるようになったようです。

という事で別サイトへ「target=”_blank”」を使ってリンクを設定する場合は、セキュリティ対策として「rel=”noopener”」も忘れずに付けるようにしておきましょう。

aタグにページ内アンカーを指定する

続いては同じページ内の指定した場所へリンクさせる方法です。このページ内アンカーを使用するには、あらかじめ目的の場所に印を付けておかなければいけません。

            

                
<a href="#section03">aタグにページ内アンカーを指定する</a>
            
        

すでにこのページにはページ内アンカーが設定されていますので、そちらを使ってサンプルを作ってみます。aタグに記述するコードは上記の通りです。

            

                
<div id="section03">
                
・
                
・
                
・
                
</div>
            
        

目的のリンク先にはあらかじめidを指定しておきます。そしてaタグのhref属性にはリンクさせたい箇所のid名を記述すればOKです。その際、id名の前には「#（シャープ）」を付けるのをお忘れなく。

それでは「aタグにページ内アンカーを指定する」をクリックしてみてください。この項目の先頭まで戻ります。すでにチェピレアでは滑らかに移動する設定を加えていますが、デフォルトでは一瞬で移動する仕様です。

滑らかに移動する動きを実装する場合は「jQueryでスムーズスクロールを実装！ページ内リンクに動きを付け加える」で紹介していますので参考になさってください。

こちらも見てください

jQueryでスムーズスクロールを実装！ページ内リンクに動きを付け加える

aタグにメールアドレスを指定する

次からはちょっと変わったaタグの使用方法をご紹介します。まずはaタグに「mailto」を設定してメールソフトを立ち上げます。実際のサンプルとコードを表示しますのでご確認ください。

            

                
<a href="mailto:info@chepirare.com">メールを送る</a>
            
        

ちなみに「info@chepirare.com」というメアドは存在しないので、「メールを送る」からは正常にメールが送れません。ちゃんとメーラーが立ち上がるかの確認だけおこなってください。

最近でもたまに見かけますが、これはひと昔前によく使われていました。フォームシステムが浸透していない頃は、簡単に実装できるこの手法で「お問い合わせ」をおこなっていたんです。

この「mailto」には付加要素がいくつかあるんですが、今ではあまり使わないですかね。ガラケー時代によくあった「このまま空メールを送信してください」みたいな事ができます。

            

                
<a href="mailto:info@chepirare.com?subject=会員登録&body=このまま空メールを送信してください">空メールを送る</a>
            
        

参考のためにこちらも紹介しておきます。「空メールを送る」でメーラーが立ち上がるとすでにメールの「タイトル」と「本文」が記載されているハズです。

「subject=○○○○」と記述するとタイトルを指定する事ができ、「body=○○○○」と記述すると本文を指定する事ができます。メールアドレスの後には「?」を記述し、2つ以上の設定をおこなう場合は「&」で繋げます。

aタグに電話番号を指定する

メールの次は電話です。aタグに「tel」を設定して電話アプリと連動させます。こちらの設定はパソコンでは確認できないので、スマホで試してもらえればと思います。

            

                
<a href="tel:117">電話する</a>
            
        

こちらの電話をかけると時報に繋がります。時報は有料ですので、かけ放題じゃない方は「電話する」でアプリが起動するかの確認だけにしておいてください。

「tel」の設定は今でもよく使います。今回は「117」を指定しましたけど、電話番号はハイフンを付けても外してもどちらでも機能します。例えば、「tel:000-1111-2222」でも「tel:00011112222」でもOKってコトです。

最近のスマホでは電話番号に「tel」の設定をしていなくても、自動で電話番号を認識して電話アプリと連動する事があります。ただ、電話番号ではない数字まで電話アプリと連動する事があるのでその機能を無効化したりします。

            

                
<meta name="format-detection" content="telephone=no">
            
        

上記のコードで自動認識は無効化されます。これはmetaタグなので追加する場合はheadタグ内に記述しましょう。こうすればaタグを設定した電話番号のみが電話アプリと連動するようになります。

aタグにファイルダウンロードを指定する

最後にaタグを使ってファイルをダウンロードする事もできますのでご紹介します。

            

                
<a href="https://chepirare.com/wp-content/themes/Chepirare/img/homepage/bn_present.jpg" download="bn_present.jpg">ファイルをダウンロードする</a>
            
        

こちらの「ファイルをダウンロードする」をクリックしてもらうとバナーがダウンロードされますので、ここはパソコンの画面から動作をご確認ください。

まぁ、通常のサイトではあまりファイルをダウンロードしてもらう事はないでしょうけど、資料や申込書などのPDFファイルをダウンロードしてもらったりする場合に使用できます。

細かく見ればaタグにできる事は他にもあるんですが、この辺りを押さえておけば大丈夫です。特に「target=”_blank”」を使って別ウィンドウを開く際には「rel=”noopener”」も記述するってコトを覚えておきましょう。