支笏湖の画像

linkリンクを設定してサイト内を移動する!aタグとの違い!

リンクとは繋ぐとか関連させるという意味の言葉です、ページ同志を繋げたりCSSのファイルなどを参照したりするときなどに使用します。

linkタグの使い方

linkタグはhead要素内で使用します、CSSを外部ファイルで作成したものを参照するために使ったり、ファビコンを設定するために使用したりします。

<link rel="stylesheet" href="css/style2.css">がCSSを参照してねとなります。
<link rel="icon" href="favicon.icon">がファビコンを設定するものになります。

このようにlinkタグはhead要素内に記述します、これは検索エンジンに「このページは、別の外部ファイルやページと関係があります」と伝えるものです。

relとhrefの関係は

linkタグの中にrelとhrefがあります、その意味は

relでファイルとの関係性を表し、hrefでそのファイルがある場所(URL)を指定しています。

<link rel="ファイルとの関係性" href="ファイルのある場所">このようになります。

aタグの使い方

aタグはインライン要素で、「Anchor(アンカー)」の略です

aタグはハイパーリンクを指定する時に使用します、リンクの出発点と到着店を指定するタグです。

リンクの出発点を示す場合は、href属性でリンク先を指定します。

到着店を示す場合は、name属性やid属性を使用しその場所の真名前(識別子)を指定します。

aタグは文章だけでなく、画像などの要素もリンクとして指定できます。

aタグを使ってリンクさせてみよう

div要素全体にリンクを貼る

<a>要素で囲った部分がリンクとして扱われるので<div>要素を<a>要素で囲んだらdivのブロック全体にリンクが貼られた状態になります。

赤で囲んだ範囲にカーソルが来るとリンクにのった状態を示します。

画像にリンクを貼る

画像のimg要素を挟むと画像にリンクが貼られた状態になります。

赤枠で囲んだところがリンクになります。

リンク先を指定します href属性

href属性を使ってリンク先を指定してリンクを貼った文字をクリックすればリンク先に飛んでいきます。

下の「#」はリンク先がまだ決まっていない場合に指定しておきます、これをクリックするとそのページの先頭に行くというものです。

linkリンクを設定してサイト内を移動する!aタグとの違い!

このようにlinkタグはhead要素内使用し外部のファイルを参照したり検索エンジンに伝えたりする働きがあります。

aタグは自分のサイト内にハイパーリンクを設定したりしてページ内の移動や文字以外の画像や要素などにもリンクを貼ることができます。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事