macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

別ページに遷移するとき特定の項目にリンクさせる【初心者向け】

HTML プログラミング

「別ページにリンクする際に特定の場所にとばしたい」こんなニーズに答えます。

リンク先は同じだけど表示している場所が違う、そんな時ってありませんか?

大丈夫です難しくありません、HTMLだけで解決です。プログラミングを独学で勉強している方は参考にどうぞ。

スポンサードサーチ


id属性を上手く活用する

id属性を上手く使う

上記の画像がイメージです、それぞれ簡単に解説します。

id指定せずにリンクした場合【画像左】

通常通り一番上から表示されるので、一番下のpoint2が見切れていることがわかります。

id属性に「point2」を指定してリンクした場合【画像右】

point2を基準に表示されているのがわかります。

方法は簡単です。

以下、sample1.htmlからsample2.htmlにリンクさせる場合

sample1.html

<a href="sample2.html#point2">idがpoint2のところに飛ぶ</a>

リンクの後ろにidを指定するだけOKです。

一応リンク先のページも載せておきます。

sample2.html

<div id="point1">ここにはとばない</div>

<div id="point2">ここにとんでくる</div>

たったこれだけ、簡単ですね。

おまけ

リンク先がsampleフォルダのindex.phpの場合

前述したsample1.htmlはこうなる

<a href="sample/#point2">idがpoint2のところに飛ぶ</a>

マークアップは知れば知るほど深いものです、正しいマークアップを心がけていきましょう!

以上になります。