ページ内移動リンクをつくる
ページ内移動リンクの見本
ページ内移動リンクってわかりますか？たまにこんなのって見かけませんか？ <最下部へ移動>
おかえりなさい。
ページ内移動リンクとは
ページ内移動リンクとは同じページ内にある、あなたが見せたい物のところまで飛ばしてくれるリンクです。ブログでよく使われているのはページの一番下に「トップに戻る」などがありますよね。
大きなサイトのFAQでは疑問がページの上にたくさんあって、そこから選択すると同じページ内の回答場所に移動してくれて、スムーズに疑問が解決するなどの経験がありませんか？
このように長いページで普通なら見つけにくいものを、このページ内移動リンクを上手に使うことで見ている人に優しいページを作る事ができます。
ページ内移動リンクのつくり方
ではページ内移動リンクが何か？をわかった所で、作り方を説明したいと思います。
<a>タグを行うと、ページ内の移動が可能になります。普通にいつもリンクを使う時に<a href="http://〜という風になっているのは知っていると思いますがこの<a href=の部分の<a>を使うんです。
この<a>とは何かというとアンカー （Anchor）と言って、意味は船の錨（いかり）の事です。
まず移動して欲しい目的地に<a name="好きな名前" id="好きな名前">ここに移動してくる</a>を書いて目印を置きます。
（nameとidの名前は同じ名前にしなければなりません。好きな名前はアルファベットで始まる文字にします。例えば”aaa”の様に名前をつけます。このaaaが目印になります。なぜ二つも名前をつけるのかというと、1つではブラウザによっては認識されなくて、クリックしても移動してくれないかもしれないからです。）
例；<a name="abc" id="abc">ここに移動してくる</a>
そして出発点に<a href="#先ほどと同じ文字">ここから移動する</a>（先ほどがaaaなら必ずaaaにして下さい。先ほどの作った目印に飛んでいくので違う文字にすると、飛んでいきません。）
例；<a href="#abc">ここから移動する</a>
すごく簡単ですよね。イメージは、まさに船がどこにふらふらいってもいかりを降ろしておけば、その場所まで戻れるので遭難しないのと同じです。
最後に注意点として、目印の文字には、半角英数字と （ - ）、（ _ ）、（ : ）、（ . ）の4つの記号が使えます。
1ページ内に複数のリンクを作りたい場合は、目印の文字を違う名前にして下さい。
<上へ戻る>
関連ページ）
・ページ内移動リンクをつくる
・ページ外移動リンクをつくる
|
｜
｜- タグのお勉強 |
- Comment (3) |
- Trackback (0) |
- ▲
コメント
- フラグメント識別子について
- HTML4.01まではname属性でいいのですが、XHTMLで出力させるようカスタマイズされている場合はid属性の方がいいでしょう（そういえば、このブログも文書型宣言はXHTML 1.0 Strictになっていますが、大丈夫でしょうか）。
参考）
http://www.kanzaki.com/works/2001/pub/wsd02.html#s2
余談：文法チェッカについて）
http://web.xii.jp/iec/note/checker - 20060622 |
Jさん ＠管理人 #zTzwXBXw
- [Edit]
- Re;フラグメント識別子について
- id属性は全然知りませんでした。
ちょうど今、文書型宣言を色々勉強しています。
なんとなくはわかるのですが、逆に言うとまだなんとなくしかわかっていません。
でも、文書型宣言を少し学んだので、今までは、できることの個別しか見えていませんでしたが、
やっと全体的に見えてくるようになりました。
文法チェックでの、点数は今まで見てみぬフリをしてきました。 - 20060623 |
- [Edit]
- 文書型宣言は重要です
- 多分、このサイトで紹介されている全てのテクニックを実際に使おうとすると、選べる文書型はXHTML1.0TransitionalかHTML4.01Transitional（どちらも「移行型」）かなと思います。Strict（厳格型）の方がもちろん望ましいのですが、WebLOGの強み（小難しいことは抜きにしてツールで自動化）には厳しいかもしれません（もちろん中にはStrictに適合させているWebLOG利用者もいらっしゃいますが）。
参考）
http://members.jcom.home.ne.jp/pctips/www/DOCTYPE.html
疑問に思ったら、最終的には仕様書に当たるのが正解ですよ。
仕様書和訳リンク集（CSSへのリンクは切れてしまっているようです））
http://www.w3.org/Consortium/Translation/Japanese
仕様書の読み方など）
http://www.kanzaki.com/works/2001/pub/wsd01.html
>>文法チェックでの、点数は今まで見てみぬフリをしてきました。
本来は点数が低い場合、ユーザーエージェントによっては閲覧すら不可能になる可能性がでるんです。仕様書でエラー処理をして「出来る限り処理可能なようにつとめる」ことがユーザーエージェント側にも求められていますが、WWWで公開する限り、HTML(XHTML)として適合した形で作る義務は文書作成者にあります（別場所のコメントで「講座」批判をしているのは、この話を無視している、または知らない「講座」の著者が少なくないからです）。WebLOGといえどその義務を免れる訳ではありませんので念のため。
あ、もちろんるんばばさんが努力していないという訳ではないです。どちらかといえば後半部分はこの文書を見ているであろう不特定多数に向けてのお話ですので。 - 20060623 |
- [Edit]
この記事のトラックバックURL
http://rgrg.blog61.fc2.com/tb.php/89-1572e1da
』をクリックするとメニューが開きます。
