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

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

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

今回のサンプルのダウンロードは、コチラから(ダウンロード用のページが別ウィンドウで開きます)
★別ウィンドウで開きたくない方は、コチラから

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

以前に作った bbb.html を編集して行きますよ。
下記のソースをみて、変更箇所をコピペしてもよし、上記のダウンロードファイルを眺めるもよし。

下記の8行目と29行目が、リンク用の指定を追加した箇所です。
29行目から48行目までは、本文を長くするために追加した部分です。

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

リンク用の指定を追加した部分、2箇所ありますね。

最初の8行目は

<a href="#profile">作者の紹介</a>

これがリンク元。
ここをクリックしたら「#profile」へジャンプする指定です。
「#」は id を表す記号。リンク先には「id名」を付けます。

2つめの29行目は

<h2 id="profile"> <!--〜略〜--> </h2>

これがリンク先です。
HTMLの要素に対して、id名を付けて、それをリンク先にします。

まとめると、
リンク元= a要素 →「a href = " # と id名 "」
リンク先= HTMLの各要素 →「id = "id名"」

と指定します。

この「#」とか「id名」は、CSSと深く関わっています。
これらは「id属性」と「class属性」と言って、id属性は、CSSの idで呼び出すセレクタになり、先頭に「# (シャープ)」を付けます。(class属性も同じくCSSのセレクタになって、先頭に「.(ピリオド)」をつけます。)
この「id属性」を利用して、同ページ内にリンクを貼るんです。

CSSの「セレクタ」についての詳細は、「CSSレイアウトメモ:TIPS [セレクタとは] 」で詳しく説明していますので、参考にしてみてください。

プレビューしてみよう

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

同ページ内のリンクをプレビュー

いかがでしたか。
上のほうの「作者の紹介」をクリックすると、ページの後半の作者紹介を表示できますね。

★今回のリンク先は、h2要素を使いました。このh2要素の体裁をCSSで整えています。
CSSの指定は下記の通りです。
h2 {
font-size:110%;
border-top:solid 1px #ccc;
margin-top:50px;
}

フォントサイズを本文の110%にし(h2デフォルトだと大きすぎるブラウザもあるので)
上部にけい線(実線 (solid)で、1ピクセル幅で、薄いグレー (#ccc) )を入れ、
上マージンを50ピクセルにしました。
CSSの指定は、やってるうちにだんだん慣れてきますよ。

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

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

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

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

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

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

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

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

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

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

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

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

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