ターゲットなしの純粋なCSSクリックイベント。 Target = "_ blank"およびターゲット属性の他の値非ターゲットオブジェクトの管理

：target疑似クラスを使用すると、Web上で多くのチュートリアルを簡単に見つけることができます。しかし、私たちは他の誰かのコードに従うことはしませんが、それを理解し、それがどのように機能するかを理解しようとしますか？もちろん、例がなければうまくいきません。

とは：ターゲット？

CSSの場合：targetは、HTMLドキュメントの特定の「部分」全体を選択できる疑似クラスであり、その上で何らかのアクションが実行されます。これは、たとえば、テキストの段落または見出しにすることができます。

疑似クラスを疑似要素と混同しないでください。疑似要素は、段落の最初の文字や最初の行など、要素の特定の部分のみを選択できます。

疑似クラス:

a：リンク（色：＃111）
a：ホバー（色：＃222）
div：最初の子（色：＃333）

疑似要素：

p ::最初の文字（色：＃444）
p ::最初の行（色：＃555）

構文から、これまたはその疑似クラスまたは疑似要素が何をするかは明らかだと思います。最も人気のある疑似クラスは次のとおりです。ホバー、すべてのWebマスターが遭遇し、ホバー上の要素のスタイルを記述します。ターゲットは同様に機能し、特定の状況が発生したときの要素のスタイルを記述します。

フラグメントID

要するに、これは私たちの疑似クラスが結びついているようなものです。これは、アドレスの末尾に単語またはフレーズが付いたハッシュタグです。これは次のようになります。

この手法は、記事内を移動するために使用できます。たとえば、記事の冒頭で、ユーザーが識別子を追加しながら、リンクがリンクされているセクションに移動する要素をクリックすると、小さな目次を作成します。

これは純粋なHTMLで機能し、微調整は必要ありません。小さな識別子。

クリックの処理：ターゲット

次に、即席メニューから目的のセクションをクリックすると、見出しのスタイルが変更され、現在アクティブな段落が表示されることを確認してみましょう。

H1（font：30px Arial sans-serif;）h1：target（font-size：50px; text-decoration：underline; color：＃37aee4;）

コードは非常に単純です。クリックすると、タイトルのサイズ、色、下線が変わります。ライフ（Ruslan、hello）を追加して、タイトルの色の変更をアニメーション化できます。

H1（フォント：30px Arial sans-serif; -webkit-transition：カラー0.5sイーズ; -moz-transition：カラー0.5sイーズ; -o-transition：カラー0.5sイーズ; -ms-transition：カラー0.5sイーズ;トランジション：色0.5秒簡単;）

アクティブな見出しを強調表示するのは良いことですが、それに続くテキストの外観を変更する必要がある場合はどうでしょうか。 CSSは私たちにこの機会を与えてくれます。これは次のようになります。

H1：ターゲット+ p（背景：#eaeaea;パディング：10px;）

この場合、プラスは、見出しに続く段落にスタイルを適用する必要があることを示します。したがって、 アクティブなタイトルを変更する場合-セクションのデザインも変更します「彼のもの」というテキストで。

ブラウザのサポート

ターゲットの疑似クラスはCSSの第3リビジョンのものであり、バージョン9より古いIEを除くすべてのブラウザーで完全にサポートされています。したがって、対象者がこのブラウザーを使用している場合は、実装しないでください。ただし、解決策はあります。これは、IEをCSS3で動作させることができるJSライブラリであるSelectvizrです。スクリプトを追加するだけで、機能します。

唯一のことは、JQueryまたはMooToolsを使用しない場合、このスクリプトを機能させるためにそれらを接続する必要があります。公式サイトには、どの図書館がどれをサポートしているかの表があります。興味のある方はお読みください。それ。

結論

疑似クラスを使用することは困難な作業のように思えるかもしれませんが、それらがどのように機能するかを理解すれば、CSSだけで驚くべきことを行うことができます。 ：ターゲット疑似クラス-これの優れた確認。その助けを借りて、あなたは訪問者とのページの相互作用を根本的に変えることができます。上記の例は最も単純ですが、ページに少しの双方向性も追加します。しかし、これはほんの数行のコードです。

美しさとブラウザのサポートでそれをやり過ぎないでください、そしてあなたは大丈夫でしょう。

良い1日を

デフォルトでは、リンクをクリックすると、ドキュメントが現在のウィンドウまたはフレームで開きます。必要に応じて、この条件はタグのターゲット属性によって変更できます。 ..。 XHTMLはこの属性を使用しません。

構文

...

必要な属性

その価値

値は、name属性で指定されたウィンドウまたはフレームの名前です。存在しない名前が設定されている場合は、新しいウィンドウが開きます。予約名は以下のとおりです。

空白ページを新しいブラウザウィンドウにロードします。 _selfページを現在のウィンドウにロードします。 _parentページを親フレームにロードします。フレームがない場合、この値は_selfのように機能します。 _topすべてのフレームをキャンセルし、ブラウザウィンドウ全体にページをロードします。フレームがない場合、この値は_selfのように機能します。

デフォルト値

検証

この属性の使用はHTML仕様で非推奨になりました。有効なコードは、一時的なものを使用することによってのみ取得されます。 .

HTML5 IE Cr Op Sa Fx

タグ、ターゲット属性

新しいウィンドウで開く

JavaScriptを使用せずにCSSでクリックイベントを処理する方法はありますか？あなたはでメソッドを使用することができます ：目標..。しかし、それが使用できない場合はどうなりますか？別の方法があります。

デモをご覧ください。これは、JavaScriptの1行ではなく、CSSで完全に実行されます。これは、：activeおよび：hoverセレクターの元の使用法に基づいています。

説明

まず、マウスをクリックして表示されるボタンとブロックを含むコンテナを作成する必要があります。マークアップ構造は次のようになります。

Lorem ipsumdolorはアメットに座っています。

Consectetur adipiscingelit。

ボタン

.wrapperでマウスボタンが押されるまで、.contentを非表示にする必要があります。この問題を解決するには、.contentのdisplay：noneプロパティを設定します。次に、.wrapperをクリックすると、.contentのdisplay：blockプロパティが有効になります。これを行うには、.wrapper：active .contentのdisplay：blockプロパティを設定します。この状態では、.contentはマウスボタンが押されたときにのみ表示されます。手放すと、.contentは再び消えます。修正のために、マウスカーソルが.contentの上にあるときに、display：blockプロパティが要素に割り当てられるようにします。つまり、.content：hoverのdisplay：blockプロパティを設定します。 CSSコードは次のようになります。

コンテンツ（表示：なし;）。ラッパー：アクティブ.content（表示：ブロック;）。コンテンツ：ホバー（表示：ブロック;）

外観を「くし」、明快にするだけです。

ラッパー（位置：相対;）。button（背景：黄色;高さ：20px;幅：150px;）。content（位置：絶対;パディングトップ：20px;）。content li（背景：赤;）

上記のコードのボタンテキストの背景は黄色になり、マウスボタンを押したときに表示される情報の背景は赤になります。

ブログサイトの読者の皆様、こんにちは。私は今日の出版物をウェブマスタリングの最も重要な側面に捧げることに決めました。そこでは、ハイパーリンクが何であり、密接にリンクされているのか、そしてそれがインターネットの基礎であるのかを詳細に説明しようと思います。

ただし、ハイパーリンクを正しく作成してWebページのコード（サイトなど）に挿入するには、ハイパーテキストマークアップ言語（）の対応する領域を調べる必要があります。これらの要素はHTMLを使用して形成されているためです。タグ。目的の種へのリンクを更新する機能があります。

そこで、今日は、ハイパーリンクがどの部分で構成されているか、ターゲットの空白属性を使用して新しいウィンドウ（タブ）でページを開く方法、画像をリンクにする方法、およびその他の多くの重要な詳細を分析します。とりわけ、この情報はHTML言語の学習を促進します。

ハイパーリンクとは何ですか？リンクと呼ぶことができますか？

タイトルで尋ねられた質問に答えると、「リンク」という用語は、の概念に固有の意味を含めて、より広い意味範囲（シベリアへのリンク、支払人を識別するための銀行、本のテキストなど）を持っていると言いますハイパーテキストにのみ関連付けられている「ハイパーリンク」。これにより、情報の非線形認識が可能になります。

したがって、 ハイパーリンクはリンクの特殊なケースですしたがって、今日のトピックでそれらを同等に使用することはかなり可能です。これは、不必要なキーワードスパムを回避するためにこれらの用語の両方を使用して、今日の出版の過程で私の「利己的な利益」に利用するものです。

しかし、の助けを借りて作成された目に見えないサービスのものもありますそして制限の範囲内で、そのタスクは特定の機能を実行するためにブラウザに多数の信号とコマンドを送信することです。

たとえば、サービスハイパーリンクを使用すると、アイコンを表示できます。これらはHTMLコードの一部としてのみ表示されます（これを行うには、ブラウザで開いているページをクリックしてください）。

とりあえず、サービスリンクはそのままにして、ハイパーリンクを作成する一般的なパターンを考えてみましょう。彼らに共通しているのは、彼ら全員が持っているということです 必要なhref属性、その値はドキュメントのアドレスです（）。 HTMLリンクは、内部サイトページと外部ドキュメントの両方につながる可能性があります。

もう1つの重要な注意事項。 href属性を使用すると、ハイパーリンクをクリック可能になります。つまり、ユーザーがハイパーリンクをクリックした結果、Webサイトの対応するページに自動的に移動できるようになります。

hrefを使用してHTMLでハイパーリンクを作成する方法

したがって、リンクを作成するには、タグとhref属性が必要であり、そのパラメーターはさまざまなタイプのURLにすることができることはすでにわかっています。限り NSこれ、それからオープニングの間と閉じる Webページに表示されるコンテンツが含まれています。

それ コンテンツはアンカーと呼ばれますテキストまたは画像の形式で表示できます（画像をリンクにする方法については、以下で詳しく説明します）。すでに述べたように、アンカーはクリック可能になります。テキストコンテンツを含むハイパーリンクの例を考えてみましょう。これは、その構造がHTMLコードでどのように見えるかです。

アンカーについて少し

HTTPに加えて、安全なHTTPSプロトコルを使用できます。リンクはWebページにつながる必要はありません。それはすべて、いくつかのファイルへのパスである可能性があるhref値に依存します。

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

ダウンロード

Webページでは、このリンクは次のようになります。

ブラウザは、拡張子が.zipのオブジェクトはダウンロードにのみ使用できることを「理解」しています。これはユーザーが提案することです。

ちなみに、ファイルへのパスはFTP（）で指定される場合があります。次に、href属性のパラメーターとして使用されるURLで、HTTP（HTTPS）プロトコルをFTPに置き換えるだけです。ファイルリンクは次のようになります。

サーバーからダウンロード

しかし、それだけではありません。似たような方法で 電子メールへのリンクは、疑似mailtoプロトコルを使用して作成されますレターライティングツールにすばやくアクセスするには：

手紙を書く

このようなリンクをクリックすると、デフォルトのメールクライアントのウィンドウが表示されます。このウィンドウで、メッセージのテキストを作成し、おそらくご想像のとおり、hrefから取得した指定済みのアドレスに送信できます。

実際には、メールへのハイパーリンクは、ワンクリックでメールフォームにアクセスできるユーザーとクライアントの利便性を確保するために、以前はウェブマスターや大規模なリソースの所有者によって頻繁に使用されていました。

しかし、この方法で開かれたメールアドレスはソフトウェアによって積極的に傍受され、あらゆる種類のスパマーによって使用されるため、Webリソースでのこのタイプの通信はもはやそれほど人気がありません（特に確立できるため）。

例として、URLに含まれる最も一般的なプロトコルのみを引用しました。これは、ハイパーリンクを形成するときのhref属性のパラメーターです。 HTTP（HTTPS）、FTP、mailtoに加えて、より狭いプロファイルの問題を解決するための他のものがあります。おそらく、他の出版物でそれらをより詳細に検討するでしょう。

ハイパーリンクの種類

それでは、リンクを1つまたは別の特性に従って分類してみましょう。

彼らの行動分野別：

1. 外部の-それらが投稿されているサイトの外にあるページにつながる。

2. 内部-同じWebリソース内にあるWebページをリンクします。

フォーマット別：

2. グラフィカルに f-この場合、ハイパーリンクのアンカーは画像（サムネイルを含む）、バナー、ボタンなどです。

href属性の値として機能するURLのタイプ別：

1. 絶対、データ転送プロトコル（HTTPなど）とサイトのドメイン名（ドメインに関するすべて）の明示的な表示が含まれています。

これらのリンクは、外部リソースページにリンクするときによく使用されます。この場合、href値には、必要なファイルまたはWebページへのフルパスが含まれます。絶対ハイパーリンクの例を次に示します。

コンテキスト-それは何ですか

2. 相対的、Webサイトのルートフォルダを基準にして指定されたパスを作成するためのオプションの1つ（したがって、このタイプのハイパーリンクの名前）。この場合、プロトコル（HTTP）とサイトドメインはURLアドレスから削除されます。

コンテキスト-それは何ですか

Webページ上の相対ハイパーリンクは、内部ページへのリンクを提供できます。そのため、それらは短くなり、HTMLが使いやすくなります。もちろん、提供されたリンクをたどるとわかるように、すべてがそれほど単純ではなく、より広い範囲を必要とします。

タグ属性

次に、必要なhref以外に存在する他の属性と、それらがハイパーリンクの作成にどのように影響するかを見てみましょう。この点に関する最も完全なデータは、いわば「直接」、最新の情報が最も早く表示されるW3C国際コンソーシアムの公式Webサイトにあります。

それらは完全に同一であり、現在のタブでWebページのオープンを開始します。リンクをクリックしたときにページを新しいタブで開く場合は、リンクを形成するときに追加する必要があります パラメータが空白のターゲット属性:

コンテキスト-それは何ですか

一部のウェブマスターやSEOスペシャリストは、訪問者に選択の機会を与えた方がよいと考えていますが（つまり、ターゲットを空白にしないでください）、必要に応じて、コンテキストメニューを使用してページを新しいタブで開くことができます（移動リンクにカーソルを合わせ、右クリックして対応する項目をクリックします）：

さらに、ご覧のとおり、この場合、ユーザーには、新しいタブだけでなく、Webページを開くことができるという利点があります。 新しいウィンドウで（このオプションは、HTMLを使用して実装することはできず、スクリプトのみを使用して実装できます）。

しかし、すべての初心者ユーザーが人気のあるブラウザーの機能と設定に完全に精通しているわけではないと思います（）。外部ハイパーリンクをたどり、ソースページを見失った（代わりに受信者のドキュメントが表示される）読者が、単に心の中でタブを閉じる可能性は十分にあります。

したがって、Webリソースの所有者は、有望な訪問者を失うだけでなく、行動要因（）を悪化させ、ランキング時にページ位置を失う可能性があります。

また、隣接するタブでページを開くことは、使いやすさの観点から非常に便利です（）。ユーザーはWebページへのハイパーリンクをたどり、追加情報を受け取り、何も起こらなかったかのように、主要な資料の調査を続けます。

客観的な画像を作成するには、外部リンクに「target = "_ blank"」を適用すると、セキュリティ上のリスクが伴うことが判明したことを追加する必要があります。興味のある方は、ターゲットブランクを使用する際の問題を解消するための推奨事項が示されている場所や、新しいタブでWebページを開くタスクを実装するための代替オプションが示されている場所を読むことができます。

空白の値を使用して新しいタブでハイパーリンクを開くことの長所と短所をすべて指摘したようです。私のブログの記事を読んでいるなら、おそらく、ターゲット属性のこのパラメーターに対する私の態度についてすでに推測しているでしょう。

現時点では、私にとって、そのプラスはマイナスを上回っており、私はそれを無条件に支持しています。上記の事実に基づいて、あなたはこの問題についてあなた自身の意見を形成することができます。しかし...新しい状況の出現を考えると、それは変わるかもしれません。

ハッシュリンク、アンカーを作成する方法と、それらが必要な理由は何ですか？

次に、Webページの資料が非常に大量であり、ナビゲーションを改善するように構成する必要がある場合に役立つ、別のタイプのハイパーリンクに注意を向けます。

例として遠くまで行く必要はありません。最初にこの出版物の目次を見てください。ほら、記事のセクションのリストがありますか？これらのセクションへのハイパーリンクは単なるハッシュリンクです。それらのいずれかをクリックすると、ブラウザは対応する部分が始まるポイントまでページをスクロールします。

このようなリンクは非常に単純に設計されています。まず、作成する必要があります アンカー適切なラベルをページの必要な場所にIDの形式で配置します。これは、HTMLタグに適用されるグローバル属性の1つです。

IDの普遍性により、このようなアンカータグはWebページのほぼどこにでも配置できます。テキストは通常段落に分割されているので、それらを適用することができます。私は主に記事を論理的な部分に分割するアンカーを置きます：

このようにしてHTMLコード内の必要なすべての場所にマークを付けたら、それらへのハイパーリンクを作成します。これを行うには、URLの最後のスラッシュ「/」（すでにご存知のとおり、href属性の値）の後の最後に、ポンド記号「＃」とタグの名前（ ID）：

ハッシュリンクとアンカーを生成する方法は？

さらに、そのようなアンカーリンクがアンカーと同じページに配置されている場合、ハッシュを含む前の最後のスラッシュまでのURLの一部を省略でき、「＃」とID名のみをhrefパラメーターとして使用できます。（実際、これは相対リンクの1つです）：

ハッシュリンクとアンカーを生成する方法は？

つまり、HTMLコードを最適化するためにマニュアルの目次をコンパイルする場合、この軽量オプションを簡単に使用できます。識別子の名前なしでURLとしてポンド記号を1つだけ入力すると、そのようなリンクが配置されている場所から、ページが一番上までスクロールします。

頂点に

実際、これは最も単純なオプションであり、訪問者の生活を楽にするため、リソースの使いやすさの追加の利点としても機能します。魅力的な画像をボタンを作成するためのアンカーとして使用できます。

下線を削除し、リンクの色を変更します

HTML開発者は、ある側面または別の側面を最適化するのに役立つほとんどすべてのニュアンスについて考えてきました。同じことがハイパーリンクにも当てはまります。たとえば、別のWebページへのハイパーリンクをたどってから戻ると、ユーザーはハイパーリンクの色が変わったことがわかります。

このようなアクションを複数回繰り返す必要がある場合は、既にクリックしたリンクとクリックしていないリンクをすばやく判断できます。このオプションは、ほとんどすべてのブラウザに含まれています。それがどれほど便利でどれだけの時間を節約できるかを説明する必要はありません。

デフォルトでは、CSSハイパーリンクを使用しません 下線と3つのカラーオプションで強調表示、それぞれに次の独自の属性があります。

link-Webページ上のハイパーリンクの色を設定します（デフォルトでは青、＃0000ffで示されます）。
alink-Webブラウザで処理されている限りアクティブなハイパーリンクの色（赤＃ff0000）。
vlink-ユーザーがアクセスしたリンクの色（紫、＃800080）。

あなたのサイトのブラウザによって表示されるリンクの色をどのように置き換えますか？さて、ページが手動で形成される単純なHTMLサイトの場合（そして、単純な日記とランディングページを除いて、現代の現実にはこの種のフル機能のリソースは事実上ないと思います）、開始タグを見つける必要がありますそれに必要なパラメータを規定します（ちなみに、その名前を使用して色を指定できます）。次に例を示します。

Webリソースを管理するためのコンテンツ管理システム（）をインストールしている場合は、使用しているエンジンの種類に関係なく、ヘッダー（ヘッダー）の出力を担当するファイルを編集するために開く必要があります。タグが存在します .

リソースがWordPressの制御下で実行されている場合、このアイデアを実際に実装するために、ハイパーリンク内に画像を自動的に挿入するためのツールとして使用できます。最初にライブラリから選択するか、目的の画像を読み込んで挿入します。テキストにそれを：

次に、結果の画像コードを選択し、エディターの「リンク」ボタンを押して、表示されるウィンドウに目的のコピーされたハイパーリンクを貼り付けます。

ドキュメントの選択されたフラグメントに移動するには、アドレスに＃記号が書き込まれ、識別子の名前が示されます。たとえば、アドレスで http://www.w3.org/TR/css3-selectors/#target-pseudo要素への遷移があり、そのid属性はtarget-pseudoとして設定されています。このアドレスレコードは「ターゲットアイテム」と呼ばれます。：target疑似クラスは、ターゲット要素、つまりブラウザのアドレスバーで指定された識別子に適用されます。

指定

	説明	例
<тип>	値のタイプを示します。	<размер>
A && B	値は、示されている順序で表示する必要があります。	<размер> && <цвет>
A \| NS	提案された値の1つだけを選択する必要があることを示します（AまたはB）。	通常\| 小さな帽子
A \|\| NS	各値は、単独で使用することも、他の値と組み合わせて任意の順序で使用することもできます。	幅\|\| カウント
	値をグループ化します。	[作物\|\| クロス]
*	0回以上繰り返します。	[,<время>]*
+	1回以上繰り返します。	<число>+
?	指定されたタイプ、単語、またはグループはオプションです。	はめ込み？
（A、B）	少なくともA回、ただしB回以下を繰り返します。	<радиус>{1,4}
#	カンマで区切って、1回以上繰り返します。	<время>#

例

目標

ストーリー1
ストーリー2

ストーリー1

墓を作る必要があったという話、彼らはそれを掘り始め、それからそれを埋め始めました、そしてそれから何が起こったのか。

ストーリー2

6本の指で不思議なピンクの足跡がダイニングルームの近くにどのように現れたか、そしてなぜこれが起こったのかについての物語。

この例では、ターゲット要素が背景色で強調表示されています。

ノート

3.0より前のSafariでは、ユーザーがブラウザナビゲーション（[戻る]ボタンと[進む]ボタン）を使用する場合、スタイルルールは適用されません。

仕様

各仕様は、承認のいくつかの段階を経ます。

推奨事項-この仕様はW3Cによって承認されており、標準として推奨されています。
候補者の推薦（考えられる推奨事項）-標準を担当するグループは、標準がその目的に沿っていることに満足していますが、標準を実装するには開発者コミュニティの支援が必要です。
提案された推奨事項（推奨される推奨事項）-この時点で、ドキュメントは最終承認のためにW3C諮問委員会に提出されます。
ワーキングドラフト-コミュニティレビューのための議論と修正の後のドラフトのより成熟したバージョン。
編集者のドラフト（エディトリアルドラフト）-プロジェクト編集者が編集した後の標準のドラフトバージョン。
下書き（ドラフト仕様）は、標準の最初のドラフトです。

ブラウザ

ブラウザテーブルでは、次の規則が使用されています。