HTMLの「a href」の使い方は？オシャレなリンク作成法あり

HTML
2023.11.01

HTMLでリンクを設定するhrefとは？

終了タグ：必須
要素：インライン要素


hrefの読み方は「エッチレフ」といい、特定のテキストや図にリンクを設置できます。

例えば当サイトのトップページへのリンクを作る場合、以下のようになります。

<a href="https://haru-haru.blog">トップページはこちら</a>

これが実際にサイトに表示される時は「トップページはこちら」の部分のみになります。
また、リンクの設定方法には絶対参照と相対参照があります。

絶対参照

絶対参照は、ウェブサイト全体のパスを指定する方法です。
つまり、リンク先のファイルやページがウェブサイトのどこにあっても表示することができます。
先ほどの、当サイトのトップページへのリンクに使用していたのも絶対参照です。
絶対参照例）https://haru-haru.blog

相対参照

相対参照は、現在のページから見たリンク先のパスを指定する方法です。
絶対参照のリンクよりも短くなります。

例えば、以下の図のような階層になっている場合、index.htmlから見たabout.htmlは「page/about.html」です。

aタグでよく使う属性

aタグでよく使う属性は3つあります。
リンク先ページやSEOに関わる部分でもあるため、最低限この3つは知っておきましょう。

href

href（Hyperlink Reference）属性は、リンク先のURLを指定します。
つまり、クリックされたときにユーザーをどのページに移動させるかを定義します。
例えば、「トップページはこちら」というテキスト部分をクリックすると当サイトのトップページ（https://haru-haru.blog）に移動するためには以下のように書きます。

<a href="https://haru-haru.blog">トップページはこちら</a>

rel

rel（Relationship）属性は、リンク先との関係性を示します。
そのためaタグにhref属性がある時のみ使います。
主に、リンク先が現在の文書とどのような関係にあるのかを指定します。
これは主にリンク先の文書の種類を示すために使用されます。

値意味
external外部サイトへのリンク
nofollow検索エンジンがこのリンクをクロールしないようにする
noreferrerリンク元の情報をリンク先に渡さないようにする

例えば、外部サイトへのリンクを指定した場合「rel=”external”」と指定します。

target

target属性は、リンク先の文書がどのように表示されるかを指定します。
主に、新しいウィンドウやタブで開くか、現在のウィンドウで開くかを制御するために使用されます。
指定できる値は4種類です。

  1. 「_blank」新規ウインドウまたはタブでリンクを開く
  2. 「_self」現在のフレームまたはウィンドウで開く（デフォルト値）
  3. 「_parent」親フレームで開く
  4. 「_top」最上位のフレームで開く

主に使うのは新しいタブで開く_blankで、記述方法は「target=”_blank”」です。

オシャレなリンクの作り方

aタグを使ったオシャレなリンクの作り方を紹介します。
htmlのみでできるリンクとcssで装飾するリンクがありますので、コピペで使う方にも勉強したい方にもオススメです。

テキストをリンクらしくする（HTMLのみ）

テキストに「>」や「<」を使うことでリンクらしく見せることができます。
以下の2つが例です。

<a href="https://haru-haru.blog">トップページはこちら>></a>

→トップページはこちら>>

<a href="https://haru-haru.blog">>トップページはこちら<</a>

→>トップページはこちら<

CSSで装飾する

CSSで装飾すると色を付けたり、カーソルを合わせた時だけ変化させることができます。
サンプルCSSの色部分を変えてアレンジしてみてください。
HTMLはすべて共通です。

▼HTML

<a href="https://haru-haru.blog">トップページはこちら</a>

①リンクの下線を消してテキストの色を変える

a{
    text-decoration: none;
    color: brown;
}

②カーソルを合わせた時に色を変える

a:hover{
    color: red;
}

③背景色を付ける

a{
    background-color: yellow;
}

④ボタン風

a{
    text-decoration: none;               /*下線を消す*/
    color: blue;                         /*文字色を付ける*/
    background-color: yellow;            /*背景色を付ける*/
    border-radius: 5px;                  /*角を丸める*/
    text-shadow: 1px 1px 2px lightgray;  /*文字に影を付ける*/
}

a:hover{
    color: red;                 /*文字色を付ける*/
    background-color: pink;     /*背景色を付ける*/
    text-shadow: none;          /*文字の影を消す*/
    margin-top: 2px;            /*2px下にずらす*/
    margin-left: 2px;           /*2px右にずらす*/
}

まとめ

aタグはHTMLで必ずと言っていいほど、使います。
また、同じページ内でいくつもリンクを設置することもあるため、cssでオシャレに装飾したい場面が出てくることも。
そんな時に基本的な装飾の仕方を知っておくと、自分の好きなデザインのリンクを作ることができます。
ホームページ制作を勉強中の方、またホームページ制作中にデザインに悩んだ方にも、この記事が参考になれば幸いです。

コメント

Copied title and URL