前: マークアップ言語 - フレーズ要素 オリジナルソース 第 7 章 アンカー HTML のリンクの正しい用語は「アンカー」です。アンカーを使用すると、ドキュメントを指すだけでなく、ページ内の特定の段落を指すこともできます。また、「正確なリンク」の便利なツールとしても使用できます。リンクオブジェクトをフォーカスの近くに配置します。この章では、4 つの異なるアンカー方法を見て、各方法の利点を説明し、タイトル属性がリンクの使いやすさを向上させる方法を紹介します。さらに、CSS を使用してリンクのスタイルを設定します。ページの特定の部分を指定する必要がある場合は、アンカーをマークするのが最適な方法です。これは、Web サイトを設計するときによくある状況です。ページの特定の部分にリンクしたいが、ユーザーは別のページを読んでいる可能性があります。以下に説明する 4 つの方法のいずれかを使用して、目的を達成できます。 この例では、同じページ内の特定のタイトルにリンクしたいとします。方法A: 空のタイトル
特定のリンク ポイントをマークするには、name 属性を持つ空のアンカー タグを使用します。おそらく、この方法はよくご存知でしょう。タイトルの前に空の <a> を配置してリンクすると (# 記号の後に name 属性の値を使用)、ページの特定の部分にリンクできます。ページにスクロールする必要のある項目の長いリストが含まれている場合は、この方法を使用して特定の項目にリンクできます。 図 7-1 は、「Oranges について」リンクをクリックした結果を示しています。このリンクをクリックすると、タイトルのすぐ上にある <a name="oranges"></a> とマークした場所に移動します。 ![]() 図7-1. 特定のアンカーリンクをクリックするとうまくいきますが、リンクの位置を示すために空白のラベルを無駄にするのは少々意味がありません。方法Bはこれを改善することができます。方法B: 名前にすべて
方法 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」を表します)。
この機能は、英語のアルファベットに含まれない文字を扱うときに非常に重要です。 しかし、言及する価値のある方法がいくつかあります。次の方法では、アンカー ポイントを設定するために <a> を使用する必要がありません。方法 C を見てみましょう。 方法C: 名前を消す
なるほど、id 属性は name 属性と同じように機能し、ページのアンカーも指定できます。さらに、メソッド C では、メソッド A と B で name 属性を使用するために必要だった余分な <a> タグが不要になります。ソース コードが削減されましたが、これは常に良いことです。 id 属性はどのタグにも追加できるため、ページ内の必要な要素に簡単にアンカーを追加できます。この例では、タイトルにアンカーを追加することを選択しましたが、<div>、<form>、<p>、<ul>... など、他のすべてのタグにも簡単にアンカーを追加できます。一石二鳥 ほとんどの場合、既存の id 属性にスタイルやスクリプトを追加できるという事実は、方法 C のもう 1 つの利点です。このため、アンカーを設定するためだけに余分なコードを追加する必要はありません。 たとえば、長いページの下部にコメントを残すためのフォームがあり、それをページの上部にリンクしたいとします。フォームには、独自のスタイル設定のために id="comments" が与えられています。これにより、name 属性を持つ <a> タグを追加する代わりに、id をアンカーとして使用できます。 コードは次のようになります。
また、ページが長い場合は、ユーザーが「先頭に戻る」ことができるように、上部のアンカーにリンクするリンクを下部に含めることをお勧めします。 アンカー名を指定するときに「top」を使用するのは適切であるように思われますが、使用を避けることをお勧めします。一部のブラウザでは、この名前を特別な目的のために予約しており、この名前を使用すると一貫性のない結果が生じる可能性があります。問題が発生しない類似の名前を選択することをお勧めします。#gemesis はどうでしょうか。それとも #utmost でしょうか。決めてください。 古いブラウザとID属性 id属性のみをアンカーとして使用する場合、言及する価値のある重要な欠点があります。それは、一部の古いブラウザがこのメソッドをサポートしていないことです。これは確かに、独自のアンカーを識別するときに考慮する必要がある問題であり、また、前方互換性の残念な例でもあります。最後の例、メソッドDを見てみましょう。メソッドD:1つにまとめる
アンカーをマークアップする際に前方互換性と後方互換性の両方を実現したい場合は、おそらくこのアプローチが適しています。名前付きアンカー タグは、古いブラウザーと新しいブラウザーの両方で正しく認識されますが、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> からアンカー タグに移動します。 前のページ1 2 3 次のページ 続きを読む |
<<: DockerイントラネットはDNSを構築し、ip:port操作の代わりにドメイン名アクセスを使用します
>>: js はマウスインとマウスアウトによるカード切り替えコンテンツを実装します
1. MySQLサービスをシャットダウンする# service mysqld stop 2. rpm...
/************************ * Linux メモリ管理 *********...
序文Tomcat は優れた Java コンテナですが、避けられない小さな落とし穴もいくつかあります。...
参考までに、HTMLフォームの使い方を9つの簡単な例で分析します。具体的な内容は次のとおりです。 1...
HTML5 のドラッグ アンド ドロップ機能は誰もが知っていますが、これを使用するとドラッグ アンド...
目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...
設定は非常にシンプルですが、毎回確認しないといけないので、記録だけ残しておきます。 1. インストー...
表のキャプションは表の上または下に配置でき、プロパティで調整できます。デフォルトのテーブル タイトル...
MySQL 一貫性ログMySQL データベースの電源が切れた場合、コミットされていないトランザクシ...
日常業務でファイルをダウンロードする一般的な方法は 2 つあります。 1 つ目は、サーバーのファイル...
1. 構造部品1. フォームには、入力コントロール、標準フォーム フィールド、ラベル、ドロップダウン...
Web ページを作成する過程では、<h1>、<h2>、<h3> ...
目次背景DHCPの設定DHCP ファイル (動的ホスト構成プロトコル) の編集tftp 設定sysl...
1. MMMの紹介: MMM は、Multi-Master Replication Manager...
この質問に関連するニーズはまだないかもしれませんし、面接でこの質問をされたことがないかもしれませんが...