どうも！ニシドラ(@nishidorablog)です。
この記事ではHTMLでのリンクの挿入方法について解説します。
リンクを挿入するために使うHTMLタグは「aタグ」です。
このaタグは、WEBサイトにとってリンクを挿入することは必須要素です。
ニシドラブログのトップページはこちら！
↑の「ニシドラブログ」の部分がリンクになっています。
青文字にアンダーバーが表示されているかと思います。
このリンクの作成方法を解説します。
その他に、aタグの使い方や画像をリンクにする方法(画像がリンクになっていてクリックすると任意のページにジャンプする)、細かいテクニックを解説していきます。
前回の、箇条書きリストの作成方法については、【ul・olタグ】箇条書きリストの作成方法を解説！でまとめています。
リンクの指定方法
リンクを挿入する際に使うタグは「aタグ」です。
aタグの「a」は「anchor」の略で、HTMLでは始発点や終着点を意味しています。
aタグはリンク(ファイル名やURLなど)を指定する「href属性」を共に使います。
href属性
href属性の「href」は英語で「hypertext reference」を略して表しています。
直訳すると「ハイパーテキストを参照」という意味です。
ハイパーテキスト
直訳で「テキストを超えた文章」という意味。
コンピューターを利用した文書作成・閲覧システムの1つで、複数の文書を相互に関連付け、結び付ける仕組み。文書のほか、画像、図表、音声、動画、3次元グラフィックなどもリンクできる。
上記の通り、href属性は「テキストと画像や動画、音声など」を関連付けさせることが出来るようになります。
a href …タグ
hrefの後に「=”ファイル名やURL”」を書くことでリンクを指定することができます。
実際にhref属性でリンクを指定したコードが以下のものです。
このコードではGoogleのトップページにジャンプするようにしたかったので「GoogleのURL(https://www.google.co.jp)」をhref属性で指定しました。
開始タグと終了タグの間に「Google」というテキストを書いています。
こうすることでブラウザ上でこのテキストを表示させると「Google」というテキストがリンクになり、クリックすることで指定したGoogleのトップページにジャンプすることができます。
画像にリンクを挿入する方法
画像にリンクを挿入することで、画像をクリックすると任意のページにジャンプするように設定することが出来ます。
画像を挿入する場合に使う「imgタグ」をaタグで囲うことで画像にリンクを挿入することができます。
画像の挿入方法については、【imgタグ】画像の挿入方法を解説！でまとめています。
実際にコードを書いてみると以下のようになります。
<img src=”sample.jpg” alt=”サンプル画像”>
</a>
これで画像をクリックするとにジャンプするようにできました。
メールアドレス宛てのリンクを作成する方法
メールアドレス宛てのリンクを作成するには、href属性に「mailto:」と「送り先のメールアドレス」を記述します。
書き方は以下のコードのようになります。
ユーザーが「お問い合わせ」をクリックすると使用しているメールクライアントが立ち上がり、送信先に今回コードに書いたメールアドレスが入力されます。
ページ内リンクを指定する方法
aタグを使って「#○○」へのリンクを作成することで、ページ内のid属性で指定した「○○」へジャンプすることができます。
<a href=”#title”>ジャンプする</a>
<h2 id=”title”>ここにジャンプ</h2>
例として上のような2つのコードがあったとします。
aタグのhref属性に「#」を加えて「#title」という値を付けています。
このリンクをクリックすることで右の「id＝”title”」を目印にして、ページ内の別の場所にジャンプすることができるようになります。
id属性については、【クラス名とID名】ID・CLASS属性を使ったスタイルを個別で指定する方法で解説しています。
リンク先を別のタブで表示させる方法
これまで解説してきた方法はリンクをクリックすると同じタブ上に表示されていましたが、別のタブに表示させる方法もあります(タブの場所は下の画像で確認)。
別のタブに表示させるにはhref属性を書いた後に、一つスペースを空けて「target」属性を書くことでできます。
target属性はリンク先の内容をどのフレーム(ウィンドウ)で開くか指定することができます。
別ウィンドウで表示させるには「_blank」という値を指定します。
Googleのトップページを別ウィンドウで開いてみたいと思います。
上のコードをブラウザ上で表示させ、「Google」をクリックすると別ウィンドウで開くことができます。
まとめ
今回の内容をまとめると以下のようになります。
- リンクの挿入には「aタグ」を使い「href属性」で指定する
- 画像のリンクを作成するにはimgタグをaタグで囲う
- メールアドレス宛てのリンクを作成するにはhref属性で「mailto:メールアドレス」を指定する
- 「target属性」を使うことで別ウィンドウで表示させることができる(賛否あり)
aタグを使うことでリンクを作成できると解説してきました。
WEBサイト作成にはリンクを挿入することで使い勝手がよくなります。
また、同ページ内に別ページのリンクを張り巡らせることで集客効果があり、SEO対策にもなるのでしっかりマスターしましょう。
次回は、「表の作成方法」について解説しています。
コメント