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

マークアップ言語 - アンカー
前: マークアップ言語 - フレーズ要素 オリジナルソース 第 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 はマウスインとマウスアウトによるカード切り替えコンテンツを実装します

推薦する

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

Ubuntu 20.04 に MySql5.7 をインストールして構成するための詳細なチュートリアル

目次1. Ubuntuソースの変更2. MySQLをインストールする3. 新しいユーザーを作成し、権...

Vue で配列をクリアするいくつかの方法 (要約)

目次1. はじめに2. データを消去するいくつかの方法2.1 ref() の使用2.2 スライスの使...

js における浅いコピーと深いコピーの詳細な説明

目次1. jsメモリ2. 譲渡3. 浅いコピー4. ディープコピー序文:以下の記事を読む前に、記憶に...

MySQLを閉じることができない問題を解決する方法

mysql が閉じない場合の解決策:コンピュータのタスクバーを右クリックしてタスクマネージャーを開き...

Windows サービス 2016 Datacenter\Stand\Embedded アクティベーション方法 (2021)

管理者権限でcmdを実行する slmgr /ipk CB7KF-BWN84-R7R2Y-793K2-...

MySQL はパスワード強度の検証をオフにします

パスワード強度検証について: [root@mysql mysql]# mysql -uroot -p...

MySQL で sum 関数を使用する例のチュートリアル

導入今日は、MySQL の sum 関数の使い方を紹介します。この関数は、MySQL データベースを...

JavaScript の find() メソッドと filter() メソッドの違いのまとめ

目次序文JavaScript find() メソッドJavaScript filter() メソッド...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...

CSSで記事の区切り線のスタイルを実装するさまざまな方法のまとめ

この記事では、CSS で記事の区切り線を実装するさまざまな方法をまとめています。区切り線はページを美...

HTMLテーブルタグの詳しい解説(初心者向け)

表> <TR> <TD> <TH> <キャプション&...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

mysql5.7.22 ダウンロードプロセス図

1. 公式ウェブサイト www.mysql.com にアクセスし、ダウンロードを選択します。 2. ...