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

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

最終更新日：2017年10月31日　（初回投稿日：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文字分にしています。
同ページ内のリンクは、ページの高さが無いと変化がないので、このような細工をしました。

プレビューしてみよう

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

次回予告

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

関連記事

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

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

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

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

最終更新日：2017-10-31（Tue）│
投稿日：2010-11-05（Fri）│
カテゴリ：はじめてのHTML

Pagetop ↑

« next ホーム prev »

コメントの投稿

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

喜夛様
ご丁寧にありがとうございます。
個人のブログですので、途中から書き方が乱暴になったり（単なる自分のメモになったり）していますが、引き続き読んでいただけると幸いです。
こちらこそ、コメントをいただいて、たいへん励みになります。
読みやすく、わかりやすい記事を書くように心がけてまいります。
ありがとうございます！

2016-03-12 11:29 :
yuki★hata

Pagetop ↑