ほんっとにはじめてのHTML5とCSS3：[11-4] 別のページの特定の箇所にリンクしよう

[11-4] 別のページの特定の箇所にリンクしよう

最終更新日：2022年08月26日　（初回投稿日：2010年11月08日）

今回は他のページの特定の箇所にリンクしてみましょう。
前回の [11-3] 同じページ内でリンクしようのアレンジです。

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

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

今回は index.html から、 second.html の特定の箇所へのリンクを指定します。
下記は 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>
東ざかいの桜沢から、西の十曲峠まで、木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。<br>
<span>（島崎藤村「夜明け前」序の章より）</span>
</p>
<p>
<a href="second.html#profile">作者の紹介</a>
</p>
<p>
<a href="second.html">次のページへ</a>
</p>
</div><!--本文END-->
</body>
</html>

22行目：リンク元を追加しています。
<a href="second.html#profile">作者の紹介</a> と、URLのあとに「#id名」を付けるだけ。半角スペースとか無しでくっつけて続けます。
ここをクリックしたら「second.html」の「#profile」へジャンプする指定です。

リンク先は、前回すでに second.html の中に <h2 id="profile">島崎藤村（略）</h2> としていますから、その id を目指して飛んで行くわけです。

second.html は index.htmlと同じディレクトリにありますから、URLはファイル名のみですが、ほかのディレクトリにあれば、URLは「ディレクトリ名/ファイル名」などと変わります。
URLについての詳細は [10] 絶対URL と相対URL（絶対パスと相対パス）を参考にしてください。

プレビューしてみよう

ファイルを保存して、ブラウザでプレビューしてみましょう。
index.htmlの「作者の紹介」をクリックすると、second.htmlの作者紹介の部分を表示できますね。

次回予告

今のところ「テキスト」にリンク指定をしただけですね。
「画像」にもリンクを付けられます。画像でボタンも作ってみたいですよね。
次回から、それをやってみましょう。

関連記事

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

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

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

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