[11-3] 同じページ内でリンクしよう

最終更新日:2017年09月15日  (初回投稿日:2010年11月05日)

情報量が多い(縦に長い)ページの場合、同じページの任意の位置へジャンプできるようになってると親切ですよね。
では今回は、同じページ内でリンクする方法をやってみましょう。

使用する要素 <a href="#id名">

HTMLファイルにリンク先を指定します

前回の [11-2] リンクの文字の色を変えよう(CSS使用)の second.html を編集します。
下記のソースをみて、変更箇所(青バックの部分)をコピペしてみてください

<!DOCTYPE html>
〜省略〜
<style>
〜省略〜
.longBox { /*単に縦長のボックスを作るための指定です*/
	height:120em;
	}
</style>
</head>
<body>
<div><!--本文START-->
<h1>リンクしてみよう2</h1>
<p>
名高い桟(かけはし)も、蔦のかずらを頼みにしたような危い場処ではなくなって、
徳川時代の末にはすでに渡ることのできる橋であった。新規にとできた道は
だんだん谷の下の方の位置へと降って来た。道の狭いところには、木を伐って並べ、
藤づるでからめ、それで街道の狭いのを補った。
</p>
<p>
長い間にこの木曽路に起こって来た変化は、いくらかずつでも嶮岨な山坂の多いと
ころを歩きよくした。そのかわり、大雨ごとにやって来る河水の氾濫が旅行を困難
にする。そのたびに旅人は最寄り最寄りの宿場に逗留して、道路の開通を待つこと
もめずらしくない。<br>
<span>(島崎藤村「夜明け前」序の章より)</span>
</p>
<p>
<a href="#profile">作者の紹介</a> <!--ここがリンク元-->
</p>
<p>
<a href="index.html" title="写真のあるページに戻ります">前のページへ戻る</a>
</p>
<hr> <!--hrは区切り線です-->
<h2 id="profile">島崎藤村(Toson Shimazaki 1872年~1943年)</h2> <!--ここがリンク先-->
<p class="longBox"> <!--単に縦長のボックスを作るためにクラス指定しています-->
1872年(明治5年)信州木曽の馬籠に生まれる。本名は春樹。
生家は馬籠の本陣・庄屋・問屋をつとめる名家で、父は17代当主。
</p>
</div><!--本文END-->
</body>
</html>

なんやらいろいろ追加していますが、要点は、
27行目:リンク元を追加。<a href="#profile">作者の紹介</a> としています。
33行目:リンク先を追加。<h2 id="profile">島崎藤村(略)</h2> としています

リンクさせたい要素(リンク先)に id属性id名 を付け、リンク元の <a>要素の href属性では、 id名 を「#(ハッシュ)」付きで指定します。
これでこのIDがついた要素にジャンプできるんです。

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

id名 は「#(ハッシュ)」付きで書く、クラス名は「.(ピリオド)」付きで書くのがルールです。
「#」や「.」は id か class かの区別のために付けるんです。

上のサンプルコードで、33行目に <p class="longBox"> と <p>要素にクラス名を付けています。
これは単に、テキストをいっぱいタイプするのがめんどくさかったから、この<p>を縦長にするためだけの指定。
CSSで(5〜7行目).longBox {height:120em} として高さを120文字分にしています。
同ページ内のリンクは、ページの高さが無いと変化がないので こうしました。

プレビューしてみよう

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

次回予告

次回は「違うページ」の「特定の箇所」にリンクさせましょう。
今日は「同じページ」の特定の箇所にリンクしたので、次回は今回のアレンジです。

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

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

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

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

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

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

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

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

非常に参考になります。ありがとうございます。

小生69歳で、htmlを学びたいと思い、ネットでいろいろ検索しましたが、自分の知識に対応できるものが見当たりませんでした。
今回、「ほんっとにはじめてのHTML5とCSS3」に出会えて、勉強の励みになっております。
Wordやペイントで、Print Screenし自分なりのマニュアルを作成して、特訓させていただいております。貴重な資料の御提供、本当に有難うございます。
最終章まで、じっくりと学ばせていただきます。
今後の益々の御健勝を祈っております。

Re: 非常に参考になります。ありがとうございます。

喜夛様
ご丁寧にありがとうございます。
個人のブログですので、途中から書き方が乱暴になったり(単なる自分のメモになったり)していますが、引き続き読んでいただけると幸いです。
こちらこそ、コメントをいただいて、たいへん励みになります。
読みやすく、わかりやすい記事を書くように心がけてまいります。
ありがとうございます!
スポンサーリンク
最新記事
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.