マークアップ言語 - アンカー

前: マークアップ言語 - フレーズ要素オリジナルソース第 7 章アンカー
HTML のリンクの正しい用語は「アンカー」です。アンカーを使用すると、ドキュメントを指すだけでなく、ページ内の特定の段落を指すこともできます。また、「正確なリンク」の便利なツールとしても使用できます。リンクオブジェクトをフォーカスの近くに配置します。この章では、4 つの異なるアンカー方法を見て、各方法の利点を説明し、タイトル属性がリンクの使いやすさを向上させる方法を紹介します。さらに、CSS を使用してリンクのスタイルを設定します。ページの特定の部分を指定する必要がある場合は、アンカーをマークするのが最適な方法です。これは、Web サイトを設計するときによくある状況です。ページの特定の部分にリンクしたいが、ユーザーは別のページを読んでいる可能性があります。以下に説明する 4 つの方法のいずれかを使用して、目的を達成できます。
この例では、同じページ内の特定のタイトルにリンクしたいとします。方法A: 空のタイトル

<p><a href="#oranges">オレンジについて</a></p>
...テキスト...
<a name="オレンジ"></a>
オレンジはおいしい
...続きを読む...

特定のリンクポイントをマークするには、name 属性を持つ空のアンカータグを使用します。おそらく、この方法はよくご存知でしょう。タイトルの前に空の <a> を配置してリンクすると (# 記号の後に name 属性の値を使用)、ページの特定の部分にリンクできます。ページにスクロールする必要のある項目の長いリストが含まれている場合は、この方法を使用して特定の項目にリンクできます。
図 7-1 は、「Oranges について」リンクをクリックした結果を示しています。このリンクをクリックすると、タイトルのすぐ上にある <a name="oranges"></a> とマークした場所に移動します。

図7-1. 特定のアンカーリンクをクリックするとうまくいきますが、リンクの位置を示すために空白のラベルを無駄にするのは少々意味がありません。方法Bはこれを改善することができます。方法B: 名前にすべて

<p><a href="#oranges">オレンジについて</a></p>
...テキスト...
オレンジはおいしい
...続きを読む...

方法 A と同様に、name 属性を持つ <a> タグを使用しますが、今回はリンク先のタイトルを囲みます。これは、より意味的に優れているようです。方法 A では、リンクオブジェクトは... まあ、何もありませんが、方法 B では、このテキストがタイトルタグの一部であることを示すだけでなく、このページのリンクアンカーの 1 つでもあることを示します。<a> のグローバルスタイルに注意してください方法 B を使用する場合、注意しなければならないことが 1 つあります。すべての <a> 要素 (色、テキストサイズ、テキスト装飾など) にグローバル CSS スタイルを指定すると、これらのスタイルによって <h2> 要素に指定したスタイルが上書きされます。このようになる理由は、この例では、<a> タグがそれを囲む <h2> タグの子要素であるためです。
たとえば、CSS に次のような宣言がある場合:

{
色：緑;
フォントの太さ:太字;
テキスト装飾:下線;
}

この CSS を使用した方法 B では、ページ上の他の <a> タグと同様にタイトルが緑色、太字、下線付きになりますが、期待する <h2> スタイルとは異なる場合があります。
<a> の :link 疑似クラスを使用すると、この問題を回避できます (また、他の利点も得られます)。詳細については、この章の後半の「拡張テクニック」で説明します。より豊富な名前属性メソッド B (およびメソッド A) を使用する利点の 1 つは、name 属性でより豊富なアンカー名を処理できることです。具体的には、名前内でシンボルを使用できることです。たとえば、メソッド B を使用すると、次の操作を実行できます (& はシンボル「e」を表します)。

<p><a href="#resumé">私の履歴書é</a></p>
...テキスト...
<h2><a name="resumé">ダンの履歴書é</a></h2>
...続きを読む...

この機能は、英語のアルファベットに含まれない文字を扱うときに非常に重要です。
しかし、言及する価値のある方法がいくつかあります。次の方法では、アンカーポイントを設定するために <a> を使用する必要がありません。方法 C を見てみましょう。

方法C: 名前を消す

<p><a href="#oranges">オレンジについて</a></p>
...テキスト...
オレンジはおいしい
...続きを読む...

なるほど、id 属性は name 属性と同じように機能し、ページのアンカーも指定できます。さらに、メソッド C では、メソッド A と B で name 属性を使用するために必要だった余分な <a> タグが不要になります。ソースコードが削減されましたが、これは常に良いことです。
id 属性はどのタグにも追加できるため、ページ内の必要な要素に簡単にアンカーを追加できます。この例では、タイトルにアンカーを追加することを選択しましたが、<div>、<form>、<p>、<ul>... など、他のすべてのタグにも簡単にアンカーを追加できます。一石二鳥ほとんどの場合、既存の id 属性にスタイルやスクリプトを追加できるという事実は、方法 C のもう 1 つの利点です。このため、アンカーを設定するためだけに余分なコードを追加する必要はありません。
たとえば、長いページの下部にコメントを残すためのフォームがあり、それをページの上部にリンクしたいとします。フォームには、独自のスタイル設定のために id="comments" が与えられています。これにより、name 属性を持つ <a> タグを追加する代わりに、id をアンカーとして使用できます。
コードは次のようになります。

<p><a href="#comments">コメントを追加してください!</a></p>

...たくさんの言葉...

<form id="コメント" action="/path/to/script">
...フォーム要素...
</フォーム>

また、ページが長い場合は、ユーザーが「先頭に戻る」ことができるように、上部のアンカーにリンクするリンクを下部に含めることをお勧めします。
アンカー名を指定するときに「top」を使用するのは適切であるように思われますが、使用を避けることをお勧めします。一部のブラウザでは、この名前を特別な目的のために予約しており、この名前を使用すると一貫性のない結果が生じる可能性があります。問題が発生しない類似の名前を選択することをお勧めします。#gemesis はどうでしょうか。それとも #utmost でしょうか。決めてください。
古いブラウザとID属性 id属性のみをアンカーとして使用する場合、言及する価値のある重要な欠点があります。それは、一部の古いブラウザがこのメソッドをサポートしていないことです。これは確かに、独自のアンカーを識別するときに考慮する必要がある問題であり、また、前方互換性の残念な例でもあります。最後の例、メソッドDを見てみましょう。メソッドD：1つにまとめる

<p><a href="#oranges">オレンジについて</a></p>
...テキスト...
オレンジはおいしい
...続きを読む...

アンカーをマークアップする際に前方互換性と後方互換性の両方を実現したい場合は、おそらくこのアプローチが適しています。名前付きアンカータグは、古いブラウザーと新しいブラウザーの両方で正しく認識されますが、W3C は XHTML 1.0 勧告 ( http://www.w3.org/TR/xhtml1/#C_8 ) で name 属性の使用を非推奨にしているため、将来のブラウザーをサポートするには id 属性も使用する必要があります。
方法 B と同様に、<a> タグに影響するグローバルスタイルに注意する必要があります。

共有名方法 D を使用する場合、id 属性と name 属性の両方に同じ名前を使用することは完全に許容されます (おそらく便利です)。ただし、これらが同じタグ内にある場合に限ります。さらに、これが許可されるのは、<a>、<applet>、<frame>、<img>、<map> などの特定のタグのみです。したがって、id="oranges" を <h2> からアンカータグに移動します。
アンカーポイントを確立するための 4 つの方法を見てきましたので、各方法の長所と短所をまとめてみましょう。

前のページ1 2 3 次のページ続きを読む

<<: DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します

>>: js はマウスインとマウスアウトによるカード切り替えコンテンツを実装します