ほんっとにはじめてのHTML5とCSS3：[11-1] 他のページにリンクしよう

[11-1] 他のページにリンクしよう

最終更新日：2019年03月22日　（初回投稿日：2010年11月01日）

絶対URLと相対URL を理解したところで、他のページにリンクしてみましょう。
リンクは「a要素」を使います。「a」は「anchor（アンカー）」の略です。

anchor（アンカー）とは、船の錨（いかり）。
アンカーは、リレーの最終走者、登山でザイルで繋がった最後の人にも使われ、いずれも「錨（いかり）」が由来なんだそうです。「最後に繋ぎ止めるモノ」ってわけらしい。

使用する要素	`<a> 〜 <a>`

使用する属性	`<a href="URL">`

属性の href は「Hyper Text Reference」の略です。エイチレフとかハイレフとか読みます。「Reference（リファレンス）」は「参照」って意味。
<a>要素は href属性が必須。この属性でリンク先のURLを指定します。

<a>にはその他いろいろ属性がありますが、覚えておいた方がいいのは title属性。
これを使えば、リンク先の表題や説明を書く事ができます。

使用する属性	`<a href="URL" title="テキスト">`

<a>要素にはこの他たくさん属性があるけど、今回の内容には「href属性」「title属性」だけで十分。
この他の属性は、下の方の <a>要素で使える属性の一覧 に書いておきますので、興味のあるかたはご覧ください。

まずはリンクさせるHTMLファイルを用意

まずはリンク先になる新しい HTMLファイルを用意します。

前回作ったHTMLファイル（index.html）の複製を作り、名前を変えて保存します。ここでは「second.html」という名前にしました。
このファイルを、前回のファイルと同じ場所に保存しましょう。

a要素でリンクを指定しよう

リンク元となるファイル index.html を下記のように編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
<div> <!--本文START-->
<h1>画像を貼ってみよう</h1>
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p class="clear">
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>（島崎藤村「夜明け前」序の章より）</span>
</p>
<p>
<a href="second.html">次のページへ</a>
</p>
</div> <!--本文END-->
</body>
</html>

second.html をリンク先に指定しました。

ここでは相対URLを使ってます。
index.html と second.html は同じ場所にあるので、URLはファイル名だけですOK。

リンク先のファイルにも戻るリンクをしてみよう

リンク先の second.html にも、リンクの指定をして index.html に戻れるようにしてみましょう。

second.html の内容を下記のように本文を編集します。

<!DOCTYPE html>
<html lang="ja">
<head>
〜省略〜
</head>
<body>
<!--本文START-->
<div>
<h1>リンクしてみよう2</h1>
<!--2ページ目の写真は削除しました-->
<p>
名高い桟（かけはし）も、蔦のかずらを頼みにしたような危い場処ではなくなって、
徳川時代の末にはすでに渡ることのできる橋であった。新規にとできた道は
だんだん谷の下の方の位置へと降って来た。道の狭いところには、木を伐って並べ、
藤づるでからめ、それで街道の狭いのを補った。
</p>
<p>
長い間にこの木曽路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いと
ころを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難
にする。そのたびに旅人は最寄り最寄りの宿場に逗留して、道路の開通を待つこと
もめずらしくない。<br>
<span>（島崎藤村「夜明け前」序の章より）</span>
</p>
<p>
<a href="index.html" title="写真のあるページに戻ります">前のページへ戻る</a>
</p>
</div><!--本文END-->
</body>
</html>

index.html へのリンク部分に title属性も加えてみました（25行目）。
これでマウスオーバーしたときに、titleに書いたテキストが表示されます。

では、ファイルを保存して、ブラウザでプレビューしてみましょう。

それぞれの「次のページへ」「前のページへ戻る」のテキストリンクで、2つのファイルを行ったり来たりできるようになりました。title属性の使い方もわかりましたね。

<a>の属性一覧

<a>要素の属性をまとめました。

href="URL"

リンク先のURL。

ping="pingを送信するURL（半角スペース区切りで複数可）"　 new

ping（ピン）を送信する pingサーバ（pingサイト）のURLを指定。
半角スペースで区切ると複数のURLを指定できる。

<a href="○○.html" ping="http://blogsearch.google.com/ping http://r.hatena.ne.jp/rpc">○○○</a>

rel="関係を示すキーワード"

このHTML文書とリンク先ファイルの関係（relation）を示すキーワードを指定。
rel属性のキーワードはこちら↓

alternate =代替え文書
( hreflang属性との併用で翻訳版を、media属性との併用で別メディア版を示す)
search =検索ページを示す
help =ヘルプ
prev =前へ
next =次へ
prefetch =リンク先を事前に読み込む
bookmark =パーマリンク
tag =タグ
license =著作権
author =作者

<a href="○○.html" rel="alternate" hreflang="en">English version</a>

media="リンク先を表示する時のメディア（機器）タイプ"

初期値は all。「 , （カンマ）」で区切って複数指定可能。
メディアタイプはこちら↓

all =すべての機器
screen =パソコンのスクリーン画面
tv =テレビ画面
handheld =携帯電話などの端末
print =プリンタ
projection =プロジェクタ
tty =文字幅が固定された機器（テレタイプなど）
braille =点字ディスプレイなど
aural =音声出力機器

<a href="○○.html" media="handheld">携帯・スマホ版はこちら</a>

target="_blank"（または「_self 」「_parent 」「_top」「ウィンドウ(フレーム)名」）

リンク先ファイルを表示するウィンドウ（またはフレーム）を指定。

_blank ：新規の（別の）ウィンドウに表示します
_self：現在の（同じ）ウィンドウ（フレーム）に表示
_parent：親になるウィンドウ（フレーム）に表示
_top：フレームを解除してウィンドウ全体に表示
ウィンドウ(フレーム)名：その名前のウィンドウ（フレーム）に表示

hreflang="言語コード"

リンク先ファイルの言語コードを指定。
ja (日本語), en (英語), es (スペイン語), fr (フランス語), ko (韓国語), zh (中国語) など。
その他は「ISO 639：言語名コード一覧」参照に。

type="MIMEタイプ"

リンク先ファイルのMIMEタイプを指定。
text/html（HTML）, application/pdf（PDF）など。
「ちょっとメモ：MIMEタイプ」を参照に。

このほかグローバル属性も使います

id, class, title, style などのグローバル属性も使えます。
グローバル属性については、「[39] 全要素に使える「HTML5グローバル属性」を見てみよう」をご覧ください。

次回予告

次回は、このリンク部分の文字の色や大きさなどを変更してみましょう。
CSSを使って指定しますよ。

関連記事

やる気を保つためにランキングに参加しています。
応援してくださるとすっごいやる気を出します！ (笑)

初心者にも使いやすい（と思う）レンタルサーバー

「初心者ですがレンタルサーバーはどこがいい？」というご質問をよくいただきます。
自由にファイルをアップロードできる自分のサーバがあると便利ですよね。ローカル環境じゃなくサーバ上で試してみたい時がありますからね。
私が使っているのは、 スターサーバーや ロリポップ！です。どちらも管理画面がわかりやすく、マニュアルも充実していて、料金も安い。どちらもライトプラン以上で WordPress が使えます。
初心者が始めやすいサーバだと思います。

ちょっと料金は高いけど、さくらのレンタルサーバや、エックスサーバー は、やはり老舗なのでおすすめです。
両方とも高スペックでコスパが良く、老舗でユーザーが多いので、質問する場がたくさんあります。初心者だけど仕事でサーバが欲しい場合は、安心なのではないかと思います。

最終更新日：2019-03-22（Fri）│
投稿日：2010-11-01（Mon）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿