上：マークアップ言語 - フレーズ要素
元のソース第7章アンカーポイント
HTMLのリンクを言う正しい方法は、アンカーと呼ばれる必要があります。ドキュメントを指すだけでなく、ページ内の特定の段落を指すこともでき、正確なリンクのための便利なツールとしても使用できます。リンクオブジェクトをフォーカスに近づけます。この章では、4つの異なるアンカープラクティスを確認し、各メソッドの利点を説明し、タイトル属性がリンクの使いやすさを改善する方法を紹介します。さらに、CSSを使用してリンクにスタイルを設計します。ページの特定の部分を指定する必要がある場合、アンカーをマークすることが最良の方法です。
これは、ウェブサイトを設計する際の一般的な状況です。特定のページの特定の部分にリンクする必要がありますが、ユーザーは別のページで読んでいる場合があります。次に説明する4つの方法のいずれかを選択して、目標を達成できるようにします。
この例では、同じページの特定のタイトルにリンクするつもりであると仮定します：方法A：ホールの名前
<p> <a href =＃oranges>オレンジについて</a> </p>
...いくつかのテキスト...
<a name = oranges> </a>
<h2>オレンジはおいしい</h2>です
...その他のテキスト...
空白のコンテンツと名前属性を備えたアンカータグを使用して、特定のリンクポイントをマークします。おそらくこれはあなたがよく知っている方法です。タイトルの前に空白のコンテンツ<a>を入れて接続します（＃シンボルを使用して、その後の名前属性の値が続きます）。これにより、ページの特定の部分に接続できます。ページにスクロールする必要があるアイテムの長いリストが含まれている場合、この方法を介して特定のプロジェクトに簡単に接続できます。
図7-1は、About Orangesリンクをクリックした後の結果を示しています。これは、<A Name = Oranges> </a>を識別する場所にジャンプすることを意味します。これはまさにタイトルにあります。
図7-1。特定のアンカーリンクに接続するためにクリックの例
効果は良いですが、リンクの場所を識別するために空白のタグを無駄にすることは、セマンティクスとは少し矛盾しています。方法Bはこれを改善できます。方法B：すべて名前内
<p> <a href =＃oranges>オレンジについて</a> </p>
...いくつかのテキスト...
<h2> <a name = oranges> orangesはおいしい</a> </h2>です
...その他のテキスト...
メソッドAのように、名前属性を使用して<a>タグを使用していますが、今回はリンクしたいタイトルの外にラップします。これはよりセマンティックに見えます。方法Aでは、接続オブジェクトは...まあ、何もありませんが、方法Bでは、このテキストがタイトルタグの一部であるだけでなく、このページの接続アンカーの1つであることを説明します。 <a>のグローバルスタイルに注意してください
方法Bを使用する場合、注意を払わなければならない場所があります。すべての<a>要素（色、テキストサイズ、テキスト装飾など）にグローバルCSSスタイルを指定すると、これらのスタイルは<h2>要素に指定したスタイルをオーバーライドします。これが起こる理由は、この例では、<a>タグがそれを囲む<h2>タグ内にある子要素であるためです。
たとえば、CSSにこのようなステートメントがある場合：
{
色：緑;
font-weight：bold;
テキスト装置：下線;
}
方法BとこのCSSは、他のページの<a>のように緑色で太字で下線が引かれ、おそらく<h2>スタイルとは異なる<h2>スタイルとは異なります。
この現象を避けるために（そして他の利点も得られる）ために、<a>のリンク擬似クラスを使用できます。これについては、この章の後半で詳しく説明します。より豊富な名前の属性
メソッドB（および方法A）を使用する利点の1つは、名前属性がより豊富なアンカー名を処理できることです。具体的には、名前内でシンボルを使用する機能です
たとえば、メソッドBを使用する場合、これを行うことができます（ここではシンボルeを表します）：
<p> <a href =＃resum＆＃233;>私のresum＆＃233; </a> </p>
...いくつかのテキスト...
<h2> <a name = resum＆＃233;> dan's Resum＆＃233; </a> </h2>
...その他のテキスト...
この関数は、英語の手紙に属さないキャラクターを扱うときに非常に重要です。
しかし、言及する価値のある方法はいくつかあります。次の方法では、アンカーポイントを設定するために<a>の使用を必要としません。方法Cを見てみましょう。
方法C：名前を破棄します
<p> <a href =＃oranges>オレンジについて</a> </p>
...いくつかのテキスト...
<h2 id = oranges>オレンジはおいしい</h2>です
...その他のテキスト...
ああ、ID属性の関数は名前属性のようなもので、ページのアンカーポイントも指定できます。さらに、メソッドCはメソッドAを排除し、Bは名前属性を追加<a>タグとして使用します。ソースコードを削減しましたが、これは常に良いことでした。
ID属性は任意のタグに追加できるため、ページ内の任意の要素に簡単にアンカーを追加できます。この例では、タイトルにアンカーを追加することを選択しますが、アンカーを<div>、<form>、<p>、<ul> ...およびその他すべてのタグに簡単に追加することもできます。 1人の殺人、1羽の鳥で2羽の鳥
実際、ほとんどの場合、既存のID属性にスタイルまたはスクリプトを追加できます。これは、メソッドCのもう1つの利点です。このため、アンカーを設定するために追加のコードを追加する必要はありません。
たとえば、長いページの下部にコメントを残すフォームがあると仮定し、ページの上部にリンクを追加する必要があります。このフォームには、一意のスタイルを指定するためにID =コメントを設定しています。これは、<a>タグをname属性で追加せずに、AnchorsとしてIDを直接接続する方法です。
コードは次のようになります：
<p> <a href =＃コメント>コメントを追加！</a> </p>
...多くのテキスト...
<form id = comments action =/path/to/script>
...フォーム要素...
</form>
また、ページが長い場合は、下部のトップアンカーにリンクを追加して、ユーザーが上部に戻ることができます。
非常に適しているように見えますが、アンカー名を指定するときにトップを使用することを避けることが最善であることに言及する価値があります。一部のブラウザは、特別な目的でこの名前を保持しています。この名前を使用すると、一貫性のない結果が生じる可能性があります。同様の名前を選択するのが最善ですが、問題は発生しません。多分#gemesisを使用しますか？または＃最小？あなたはあなた自身の考えを持っています。
ID属性を備えた古代のブラウザ
ID属性のみをアンカーとして使用する場合、言及する価値のある重要な不利益があります。つまり、一部の古代のブラウザはこの方法をサポートしていません。ああ、これは確かにあなた自身のアンカーを識別するときに必須の検討されていることであり、それはまた、将来の互換性の不幸な例でもあります。最後の例、方法D.メソッドD：一緒に見てみましょう
<p> <a href =＃oranges>オレンジについて</a> </p>
...いくつかのテキスト...
<h2> <a id = oranges name = oranges> orangesはおいしい</a> </h2>
...その他のテキスト...
アンカーにタグを付けるときに、前向きな互換性と後方互換性を達成したい場合は、おそらくこの方法が好きになるでしょう。古代と未来のブラウザの両方が名前のアンカータグを正しく識別できますが、W3CはXHTML1.0推奨の名前属性（http://www.w3.org/tr/xhtml1/#c_8）を推奨していないため、将来の兄弟をサポートするためにID属性も使用します。
方法Bと同じように、<a>タグに影響を与えるグローバルなスタイルに注意を払う必要があります。
共有名
メソッドDを使用することを選択した場合、IDと名前属性の同じ名前を選択することは許容されます（非常に便利な場合があります）が、これは同じタグにある場合にのみ可能です。さらに、これを許可する特定のタグしかありません。これには、正確には<a>、<plept>、<frame>、<img>、<map>が含まれます。したがって、ID = Orangesを<h2>からアンカータグに移動します。
アンカーポイントを確立する4つの方法が見られたので、各方法の利点と短所を要約しましょう。
前のページ1 2 3次のページ全文を読む