HTMLの基礎。サイトの外部やページ内部のリンク先に飛ぶ【href属性・id属性でリンクを貼る】

こんにちは、いどはるです。

私は、無料で学べるプログラミング学習サイトドットインストールHTML基礎文法入門で勉強中です。

HTML(エイチティーエムエル)の学習が進んだので、「リンク」について2種類紹介します。

一つはサイトの「外部」に飛ぶもの、もう一つはページの「内部」の別の場所に飛ぶものです。

WordPressは、2パターンのエディターを選ぶことができます。「ビジュアルエディター」と「コードエディター」。

「コードエディター」で以下に紹介するコードを入力すると、カスタマイズができます。

コードエディターを使う

投稿画面右上からコードエディターを使えます。ぜひ試してみてください。

HTML「外部サイトへのリンク」(Twitterや、メールも)

外部サイトにリンクを貼る

テスト用のサイトで作ったものですが、↑ Twitterに飛んだり、mailを作成するところへ自動で飛びます。

書き方は、a(エー)タグとhref(エイチレフ)属性というものを使います。このコードを設定してリンクをクリックすると、飛びたいところのサイトに切り替わるようになります。

<a href="飛びたいところのURL">飛びたいところのサイト名</a>
  • aはアンカー(錨 いかり。しっかり固定するという意味です)
  • href属性の「href(エイチレフ)」は、hypertext referenceの略で、直訳すると「ハイパーテキストの参照」

たとえばTwitterなら、href属性に単にURLを書けばOK。 ↓ たとえば私のTwitterURLで書いています。

<a href="https://twitter.com/idoharu_">Twitter</a>

Eメールの場合

href属性に「mailto:」として、宛先のメールアドレスを入れる。

<a href="mailto:〜@〜">表示させたい言葉</a>

という感じ。たとえばこんな感じ。

<a href="mailto:darekanomeado@darekanomeado.co.jp">Mail</a>

( ↑ 「だれかのメアド@だれかのメアド.co.jp」架空のアドレスです笑)

「別タブ」で開きたい場合

上のコードでは、画面が切り替わってしまいます。そうではなく、別タブで開きたい場合は、target(ターゲット)属性を指定します。

target属性の値(「=」の右の部分)は、別タブで開く場合「_blank」(ブランク)とすればOK。

つまり、「target=”_blank”」となります。

<a href="https://twitter.com/idoharu_" target="_blank">Twitter</a>

Eメールの場合、

<a href="mailto:darekanomeado@darekanomeado.co.jp" target"_blank">Mail</a>

HTML「ページの内部へリンク」を貼る

ページの内部にリンクを貼る

たとえば「HTML内部リンク手順①へ飛びます。」みたいな感じになります。

HTML内部リンク手順①:飛ぶ前のクリックされる部分

↓ まず最初に、こんな感じで作ります。<a href=”#”>と</a>の間に、クリックされる(青くなる言葉)。””の中の「#(パウンド記号)」を忘れずに。

<a href="#">クリックされる言葉</a>

HTML内部リンク手順②:飛び先にidをつける

飛びたい要素にid(アイディー)をつけます。id属性の値は好きな言葉を使うことができますが、同じページ内でのid属性の場合、名前が被らないように。

今回は「kurikku」(クリックをローマ字表記したものですが、ほんとうは英単語で名前をつけるのが一般的。)とします。↓ 見出し2でコードを書いています。

<h2 id="kurikku">ここに飛ぶよ</h2>

HTML内部リンク手順③:飛ぶ前のクリックされる部分に情報を追加

手順①で作った、「飛ぶ前のクリックされる部分」のaタグのhref属性に手順②でつけた好きな言葉つまり、idの名前をつけてあげればOK。

<a href="#kurikku">クリックされる言葉</a>

内部リンクその他:TOPへ戻る

その他、トップに戻るリンクも作れる。トップに戻るには、href属性にパウンド記号を使ってあげればOK。

<a href="#">TOPへ</a>

または、パウンド記号の後に、TOPとつけてもOK。つまりhref属性が#topとなるということですね。

<a href="#top">TOPへ</a>

ただし、先ほど紹介した内部リンクを「id=”top”」という名前をつけておくと、そのように名前をつけた「id=”top”」に優先して飛びます。

以上となります。試してみてください。ドットインストールHTML基礎文法入門いい感じです。では!
(最後にTOPへ ← TOPへ戻れます)