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

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

anchor(アンカー)とは、船の錨(いかり)。
anchorは、リレーの最終走者、登山でザイルで繋がった最後の人にも使われ、いずれも「錨(いかり)」から来ている言葉です。
「最後に、繋ぎ止める者(モノ)」ってわけ。 Web上でも、リンク指定はそれだけ重要だという事ですねぇ。

使用する要素 <a> 〜 <a>
使用する属性 <a href="URL">

hrefは「Hyper Text Reference」の略です。エイチレフとかハイレフとか読みます。

上の記述でa要素のリンク機能OKですが、ほかの属性を加えることもできます。
その中で、便利なので覚えておいた方がいいのは「title」。
これを使えば、リンク先の表題や説明を書く事ができます。

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

<a>要素には、このほかにもたくさん属性があります。
ですが、今回の内容には、上の「href属性」と「title属性」だけで十分です。
このほかの属性は、リンク先ファイルのメディアタイプを指定したり、リンク先を表示するウィンドウやインラインフレームを指定したりできます。
これらに関しては、今後の記事に詳細を書いて行きますので、今回は触れません。
一応、<a>要素で使える属性の一覧を「続きを読む」に書いておきますので、興味のあるかたはご覧ください。

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

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

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

bbb.htmlをaaa.htmlと同じ場所に保存

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

前回保存したファイル aaa.html を下記のように編集します。

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

bbb.html をリンク先に指定しましたよ。(bbb.html はこれから作ります)

a要素を、p要素で囲んで段落にしていますが、これは、マージンなどを付けてリンクとして目立たせるためです。

それと、ここでは相対URLで説明していますよ。
ここでは bbb.html と aaa.html は同じ場所にあるので、URLはファイル名だけです。
bbb.html が他のフォルダに入っていたら「フォルダ名/bbb.html」になりますよ。OK?
(URLの書き方は絶対URLと相対URLを参考にしてください)

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

リンク先の bbb.html にも、リンクの指定をして aaa.html に戻れるようにしてみましょう。
こうしとけば、2つのファイルを行ったり来たりできますからね。

このとき、2つのファイルが全く同じ内容だと、変化がわかりづらいので、
bbb.html の中身は少し変えましょう。
下記のように本文を編集しましたのでコピペしてください。(青バックの文字の部分

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

aaa.html へのリンク部分に「title属性」も加えてみましたよ(27行目)。
これで、カーソルがロールオーバーしたときに、titleに書いたテキストが表示されます。

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

互いにリンクして行ったり来たりできるようになった

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

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

「続きを読む」に、<a>要素の属性を一覧にまとめました。

この記事をはてなブックマークに追加

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

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

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

<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グローバル属性」を見てみよう」をご覧ください。
関連記事

テーマ : webサイト作成
ジャンル : コンピュータ

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
07 | 2017/08 | 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.