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

マークアップ言語 - アンカー
前: マークアップ言語 - フレーズ要素 オリジナルソース 第 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&#233;">私の履歴書&#233;</a></p>
...テキスト...
<h2><a name="resum&#233;">ダンの履歴書&#233;</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 はマウスインとマウスアウトによるカード切り替えコンテンツを実装します

推薦する

Linux での MySQL のインストールに関する詳細なチュートリアル

1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

Tomcatのデフォルトパスの設定によって発生するプロジェクトURLの競合を解決する方法の詳細な説明

序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...

複数の例で HTML フォームを使用する方法

参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...

Vueカスタムディレクティブを使用してドラッグアンドドロッププラグインを構築する方法

HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...

Node.jsはSTMPプロトコルとEWSプロトコルに基づいてメールを送信します

目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...

Linux のような環境で jdk1.8 をインストールし、環境変数を設定する方法の詳細な説明

設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...

HTML テーブルタグチュートリアル (17): テーブルタイトルの垂直配置属性 VALIGN

表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...

MySQL データベースは XA 仕様をどのように実装しますか?

MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...

Vue プロジェクトはファイルダウンロードの進行状況バー機能を実装します

日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...

React で Antd の Form コンポーネントを使用してフォーム機能を実装する方法

1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...

h1、h2、h3タグを適切に使用する

Web ページを作成する過程では、<h1>、<h2>、<h3> ...

PXEを使用してLinuxシステムを自動的に展開する方法

目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...

インタビュアーはCSSで固定アスペクト比を実現する方法を尋ねました

この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが...