HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説しながら、様々なaタグの使い方をまとめました。
もくじ
HTML5関連記事
jQuery UIのsortableを使ってリストをドラッグで並び替える
【HTML】アップルタッチアイコン(apple-touch-icon)とsvg形式のファビコン(favicon)を作成・設定する
HTML5のaタグのrel=”noopener noreferrer”や、ページ内リンク、JavaScript実行を解説
select・optionタグをjQueryで、プルダウンの選択値を取得、変更する
![jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する](https://mugenweb-note.com/web/wp-content/uploads/2020/08/mamechi1110022.jpg)
jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する
jQueryでチェックボックスの親子を連動させる + 選択されているかのバリデーション
Android・iOS別にブラウザからスマホアプリの受信トレイを起動する方法
cssとjQueryで値の変更・取得や、placeholderの改行などtextareaタグを使いこなす
placeholderを見やすく！jQuery+css3でつくるフローティングラベル
aタグとは？
「aタグ」は、よく別ページへのリンクをするために使われるHTML要素です。
<A>タグはアンカー（Anchor）の略で、リンクの出発点と到達点を指定するタグです。 リンクの出発点ではhref属性でリンク先を指定します。
リンク先の指定
HTML
<a href="https://mugenweb-note.com/web/">トップページへ</a>
href属性にリンク先のURI(URL)を指定します。
ページ内リンクの指定
HTML
<a href="#ps2">ポジション2</a> <h3 id="ps2">ポジション2</h3>
href属性にページ内リンクで移動したい箇所に存在する要素のidを指定します。
このaタグをクリックすると、h3までパッと移動します。
別ページの指定位置へリンクする
HTML
<a href="https://mugenweb-note.com/web/#footer">footerへ</a>
href属性に別ページのURI(URL)を指定し、最後に移動したい箇所に存在する要素のidを指定します。
このaタグをクリックすると、別ページのfooterまでパッと移動します。
スムーズなページ内リンクの指定
jQueryをしようすれば、スムーズにページ内リンクが実装できます。
リンクを別タブで開く指定
HTML
<a href="https://mugenweb-note.com/web/" target="_blank">別タブで開く</a>
target属性に_blankを指定すると、リンク先が、別タブで開かれます。
aタグをクリックを無効化する
HTML
<a href="javascript:void(0);">クリックを無効化する</a>
href属性にjavascript:void(0);を指定するとクリックしても何も起こりません。
主に、画面を遷移をせず、JavaScriptが動作するときの条件（トリガー）にしたい場合に使われます。
aタグをクリックするとJavaScriptを実行する
HTML
<a href="javascript:void(0);" onclick="alert('アラート');">クリックするとアラート</a>
onclickのイベント属性にJavaScriptを組み込むことができます。
上記の例だと、クリックすると画面遷移が起こらず、アラートが出ます。
aタグをクリックするとJavaScriptの関数を実行する
HTML
<a href="javascript:void(0);" onclick="getUrl();">クリックするとfunction実行</a>
onclickのイベント属性にJavaScriptの関数も組み込むことができます。
コードが長い場合など、予めJavaScriptで宣言しておいた関数を呼び出せます。
JavaScriptの関数の扱い方は、下記を参考にしてください。
rel属性でリンク先との関係を明示する
rel属性で、このページから見たリンク先との関係を明示できます。
rel=”noopener”で、外部リンクのセキュリティ対策をする
HTML
<a href="外部リンク" target="_blank" rel="noopener">外部リンク</a>
外部リンクにtarget="_blank"を使う場合に必須のセキュリティ対策です。
リンクをクリックした際に元ページのURLを勝手に書き換えることができてしまうという脆弱性をカバーするためにrel="noopener"を付けましょう！
また、パフォーマンス低下を防ぐという観点でも必要です。
rel=”noreferrer”で、リンク先へリファラを渡さないようにする
HTML
<a href="外部リンク" target="_blank" rel="noreferrer">外部リンク</a>
rel="noreferrer"とすると、URLに、知られたくないユーザーIDなどが含まれている場合にセキュリティ対策となります。
大体外部リンクには、rel="noopener noreferrer"のようにセットで使用されることが多いです。
WordPressも、自動で付与されるようになっています。
rel=”nofollow”で、リンク先とページを関連付けなくする
HTML
<a href="外部リンク" rel="nofollow">外部リンク</a>
rel="nofollow"とすると、リンクとサイトを関連付けたくない場合、もしくは、リンク先のページをサイトからクロールさせないようにできます。
使い方は、コメントスパム対策に使用されます。コメント欄に書き込まれたリンクに自動でnofollowを付与することにより、コメント欄を悪用してPageRankを獲得するスパム行為の対策をすることができるのです。
rel=”sponsored”の使い方
HTML
<a href="広告リンク" rel="sponsored">広告リンク</a>
基本的には、rel="nofollow"と変わりません。rel="sponsored"は広告に関連したリンクに使用します。
rel=”ugc”の使い方
HTML
<a href="ユーザーが投稿したリンク" rel="ugc">ユーザーが投稿したリンク</a>
基本的には、rel="nofollow"と変わりません。rel="ugc"は、ブログへのコメントやフォーラムに対する投稿など、ユーザーが自発的に作成したコンテンツへのリンクに使用します。
コメント