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

前回の「同じページ内でリンクしよう」のアレンジで、
他のページの特定の箇所にリンクしてみましょう。
URLのあとに#とid名を付けるだけ。半角スペースとか無しでくっつけて続けます。

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

今回は、前回[11-3]のサンプルを流用します。
(前回[11-3]でサンプルをダウンロードされた方は今日はダウンロード不要ですよ♪)
使うのは aaa.html です。

前回ダウンロードしてない方は、コチラから(別ウィンドウで開きます)
(別ウィンドウで開きたくない方は、コチラから)

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

今回は、以前に作った aaa.html から、 bbb.html の特定の箇所へのリンクを指定します。
下記は aaa.html です。青バック部分が、リンク指定を追加した箇所です。

<!DOCTYPE html>
<html>
<head>
〜省略〜
</head>
<body>
<!--本文START-->
<div>
<h1>リンクしてみよう</h1>
<img src="image/forest.jpg" alt="森林イメージ" width="240" height="160">
<p>
木曽路はすべて山の中にある。あるところは岨づたいに行く崖の道であり、
あるところは数十間の深さに臨む木曽川の岸であり、あるところは山の尾
をめぐる谷の入り口である。一筋の街道はこの深い森林地帯を貫いていた。
</p>
<p>
東ざかいの桜沢から、西の十曲峠まで、<span>木曽十一宿はこの街道に添うて、
二十二里余にわたる長い渓谷の間に散在</span>していた。道路の位置も幾たびか
改まったもので、古道はいつのまにか深い山間に埋もれた。
</p>
<p>
<a href="bbb.html">次のページへ</a>
</p>
<p>
<a href="bbb.html#profile">作者の紹介</a>
</p>
<!--本文END-->
</div>
</body>
</html>

青バックの部分は、

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

ここをクリックしたら「bbb.html」の「#profile」へジャンプする指定です。
このようにURLのあとに#とid名を付けるだけ。半角スペースとか無しでくっつけて続けます。

bbb.html は aaa.htmlと同じディレクトリ(階層)にありますから、URLはファイル名のみですが、
ほかのディレクトリにあれば、URLはそれなりに「ディレクトリ名/ファイル名」などと変わりますよ。
URLについての詳細は絶対URLと相対URLを参考にしてください。

プレビューしてみよう

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

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

aaa.htmlの「作者の紹介」をクリックすると、bbb.htmlの作者紹介の部分を表示できますね。

さあこれで、リンク指定することは、ひととおりマスターしました。
<a href>…</a> って書いてあればリンクだって、もうわかりますよね。

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

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

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

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

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

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

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

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

tag : HTMLソース a要素

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
05 | 2017/06 | 07
- - - - 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 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.