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

最終更新日:2017年09月15日  (初回投稿日: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>
<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>
<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属性の使い方もわかりましたね。

次回予告

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

<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グローバル属性」を見てみよう」をご覧ください。
関連記事
この記事をはてなブックマークに追加

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

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

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

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

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

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

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
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.