cssのターゲットは何ですか。ターゲットなしの純粋なCSSクリックイベント。 hrefを使用してHTMLでハイパーリンクを作成する方法

今日は関連する主な機能についてお話します疑似クラス付き ：目標そして、それを使用して見事な純粋なCSS効果を作成する方法、cssを使用してスライドショーを作成する方法などを学びます。

とは：ターゲット？

h1（font：bold 30px / 1.5 "Helvetica Neue"、Arial、Helvetica、Geneva、sans-serif;）h1：target（font-size：50px; text-decoration：underline; color：＃37aee4;）

アニメーションを追加する

効果にスパイスを加えて、色を変更するためのちょっとしたトランジションのようなアニメーションを追加しましょう。それがどのように機能するかをご覧ください。

h1（font：bold 30px / 1.5 "Helvetica Neue"、Arial、Helvetica、Geneva、sans-serif; -webkit-transition：color 0.5s ease; -moz-transition：color 0.5s ease; -o-transition：color 0.5 s ease; -ms-transition：color 0.5s ease; transition：color 0.5s ease;）h1：target（font-size：50px; text-decoration：underline; color：＃37aee4;）

非ターゲットオブジェクト管理

選択した見出しに続く段落のスタイルを変更するとします。

次のコードでこれを行うのは非常に簡単です。デモを参照してください。

h1：ターゲット+ p（背景：＃f7f7f7;パディング：10px;）

CSSを使用した簡単なスライドショーの作成

開発者は、疑似クラスを使用して大量のアプリを考え出しました ：目標..。この疑似セレクターは、タブやスライドショーを作成するときに便利です。後者を実装する方法を見てみましょう。

順序付けられていないリストを作成しましょう。リスト内の各アイテムには、スニペットIDを指すアンカータグと、対応するIDを持つ画像が含まれます。

一つ

二

三

四

五

それでは、スタイルを追加しましょう。

*（マージン：0px;パディング：0px;）＃slideshow（マージン：50px自動;位置：相対;幅：400px;）ul（リストスタイル：なし;）li（フロート：左;オーバーフロー：非表示;マージン：0 20px 0 0;）li a（color：＃222; text-decoration：none; font：15px / 1 Helvetica、sans-serif; -webkit-transition：color 0.5s ease; -moz-transition：color 0.5s ease; -o-transition：カラー0.5sイーズ; -ms-transition：カラー0.5sイーズ;トランジション：カラー0.5sイーズ;）li a：ホバー（カラー：＃50b0df;）li img（位置：絶対;トップ：50px;左：0; z-index：-1; -webkit-transition：不透明度1sイーズインアウト; -moz-transition：不透明度1sイーズインアウト; -o-transition：不透明度1sイーズインアウト; -ms-transition：不透明度1sイーズインアウト;遷移：不透明度1sイーズインアウト;）li img：ターゲット（z-index：1;）li img：not（：target）（不透明度：0;）

まず追加しましょう フロート：左リストのすべての要素。要素には絶対配置と相対配置を使用しました。

次に、インストールします z-index：-1すべての画像に対して、次に設定します z-index：1ターゲット画像用。これにより、リストアイテムをクリックしたときに画像が変化します。遷移をスムーズにするために、他の画像の不透明度の値を設定します。 0 .

純粋なCSSスライドショーのデモをご覧ください。

クロスブラウザの互換性

疑似クラス ：目標はレベル3のCSSセレクターです。つまり、IEを除くほとんどすべてのブラウザでサポートされています。古き良きロバは、バージョン9および10のCSS3セレクターのみをサポートします。

IEのCSS3セレクターレンダリングの問題と同様に、これはSelectivizrでかなり簡単に修正できます。

このプラグインとブードゥーの魔法のおかげで、必要なCSS3セレクターはIE6でもサポートされます。

結論

疑似クラスを使用することは、最初は気が遠くなるように思えるかもしれませんが、なぜそれらが作業を容易にし、サイトをより面白くすることができるかを理解しているのですか。疑似セレクター

：目標良い例です。スタイルでやりすぎないように注意してください。

もう1つの興味深いユースケース ：目標

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

構文

...

必要な属性

その価値

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

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

デフォルト値

検証

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

HTML5 IE Cr Op Sa Fx

タグ、ターゲット属性

新しいウィンドウで開く

：ターゲット疑似クラスはCSS3の優れた機能の1つです。これは、ドキュメントURIの識別子が指す要素と一致します。

URIの識別子には、「＃」文字と、それに続く属性の値に一致する識別子名が含まれます idドキュメント内の要素。

サポート

CSS3について話しているので、疑似クラスはIE 6から8を除くすべての最新のブラウザーでサポートされています。通常のフラストレーションは、使用することを決定するのを妨げることはありません：target。 IE9はすでに：ターゲット疑似クラスをサポートしています。

使用方法：ターゲット？

この疑似クラスは、疑似クラスと同じように、独自のスタイルを持つことができます。 ：ホバー, ：アクティブまた ：集中リンク用。前述の疑似クラスと同様に ：目標ウェブサイトで特定のアクションで使用されます。特に次のようなフラグメント識別子を使用する場合：http：//example.com/index.html#lorem-ipsum。

デモンストレーション

デモページは、いつどのように使用するかについての非常に明確な例を提供します ：目標..。疑似クラス ：目標リソースの使いやすさを向上させることができます。

HTMLマークアップ

以下はデモの例です。 4つのリンクと同じ数のブロックがあります。各グループには独自の識別子があります。

ブロック1
ブロック2
ブロック3
ブロック4

Lorem ipsum dolorは、amet、consectetur adipiscingelitに座っています。 Donec tempus、varius eleifendのfelis、neque orci porta magna、consequat aliquam ligula velit quiserat。 Aenean porttitor pellentesque risus、eu tincidunt ipsum blanditin。

Sed lobortis placerat elit tincidunttempor。 Nam dignissim euismod quam nectempor。 Sed tortor lorem、ultricies auctor nec、auctor utneque。 Aenean varius、urna eget adipiscing feugiat、nunc ligula molstie massa、id accumsan turpis metus acante。 Cum sociis natoque penatibus et magnis dis parturient montes、nascetur ridiculusmus。

Pellentesque quis tortor vitae elit cursus vulputate et veldui。 ultriciesのNuncコモドプレティウムアルク。 Nunc vel velit enim、et tinciduntleo。 conubia nostraごと、inceptos himenaeosごとに、クラスの適切なtaciti sociosqu adlitoraトルクント。

風変わりなエゲテンポサピエン。 Cras convallis tempor orci pulvinarscelerisque。 Nullam et erat eu nibh sollicitudin congue sit amet iddiam。 lectus ut augue euismodportaでsed。風変わりな非lacusオディオ。 Nunc ornare adipiscingegestas。

CSS

次のCSSコードを使用すると、対応するIDを持つブロックを選択することで目的の効果を実現できます（長方形の周りに影が表示されます）。

/ *スペースを追加* / ul、div（margin-bottom：10px;）/ *デフォルトのブロックスタイル* / div（padding：10px; border：1px solid #eaeaea; -moz-border-radius：5px; border- radius ：5px;）/ *一致する場合は出力のビューを変更します* / div：target（border-color：＃9c9c9c; -moz-box-shadow：0 0 4px＃9c9c9c; -webkit-box-shadow：0 0 4px＃9c9c9c;ボックスシャドウ：0 0 4px＃9c9c9c;）

以下は、コードアクションの結果です。リンクをクリックすると、対応するブロックが強調表示され、アクティブになります。

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（背景：赤;）

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

：ターゲット疑似クラスは、URLフラグメントが指すドキュメント内の要素を選択します。たとえば、このテキストは要素でラップされています ID＃target-testを使用します。リンクをたどると、その要素がターゲットになり、：target疑似クラスのスタイルが有効になります。

昨年、私は次のことについて書きました：5つの十分に活用されていないCSSセレクター（およびそれらのアプリケーション）のターゲット疑似クラス。最初の例は、：target疑似クラスを使用して、ナビゲートされたページのセクションを強調表示することでした。これは、たとえば、の例のように、背景色または境界線を追加することです。

しかし最近、JavaScriptを使用せずにページ上にインタラクティブな要素を作成することで、：target疑似クラスをより適切に使用できるという結論に達しました。

例1：コンテンツの非表示と表示

：target疑似クラスを使用する簡単な例は、ターゲットとするコンテンツを非表示および表示することです。したがって、ブログでは、ユーザーがクリックした後にコメント付きのセクションを表示できます。これは、targetに一致するまで要素を非表示にするだけで実行されます。

コメントを表示#comments：not（：target）（display：none;）＃comments：target（display：block;）

例2：ナビゲーションをスライドアウト

次の例は、スライド式のナビゲーションバーを作成することです。ユーザーがクリックした後にジャンプが発生しないように、ナビゲーションバーをスコープに対して固定された位置に配置します。

#nav（位置：固定;上：0;高さ：100％;幅：80％;最大幅：400px;）＃nav：not（：ターゲット）（右：-100％;遷移：右1.5秒;） #nav：ターゲット（右：0;遷移：右1s;）

例3：ポップアップモーダル

このアイデアをさらに進めると、ページ全体を埋めるモーダルを作成できます。

＃modal-container（position：fixed; top：0; left：0; width：100％; height：100％; background：rgba（0,0,0,0.8）; display：flex; justify-content：center; align-items：center;）。modal（width：70％; background：#fff; padding：20px; text-align：center;）＃modal-container：not（：target）（不透明度：0;可視性：非表示;遷移：不透明度1秒、可視性1秒;）＃モーダルコンテナ：ターゲット（不透明度：1;可視性：可視;遷移：不透明度1秒、可視性1秒;）

例4：グローバルスタイルの変更

最後の例は、セマンティクスの観点から正しいとは言えません。これは、要素へのターゲット疑似クラスの適用です。その後、スタイルまたはページレイアウトが置き換えられます。

#body：not（：target）（main（width：60％;）aside（width：30％;）。show-sidebar-link（display：none;））＃body：target（main（width：100％; ）aside（display：none;）。hide-sidebar-link（display：none;））

セマンティクスとアクセシビリティはどうですか？

「リンクまたはボタン」の記事で述べたように、要素を使用する場合ブラウザは、別のページまたはページの別のセクションに移動することを期待しています。私の例（最後の例を除く）では、これがまさに起こっていることです。唯一の秘訣は、通常の状態ではスタイル付き要素が非表示になり、動的にはターゲット状態でのみ表示されることです。

私の知る限り、この方法には2つの潜在的な欠点があります。

URLが変更され、ブラウザの履歴に影響します。これは、ユーザーが「後方」に移動すると、誤ってターゲット要素に移動する可能性があることを意味します。
ターゲット要素を閉じるには、ユーザーは別の要素または単に＃に移動する必要があります。最後のオプション（私の例で使用）はセマンティックではなく、ユーザーを記事の最初にリダイレクトする可能性がありますが、ユーザーはその準備ができていない可能性があります。

ただし、正しく使用すれば、JavaScriptが無効になっているユーザーのフォールバックとして、このメソッドを最小限で使用できます。場合によっては、最初の例のように、JavaScriptを使用するよりも好ましくて単純な場合もあります。いつものように、それはそれぞれの特定のケースに依存します。

cssのターゲットは何ですか。 ターゲットなしの純粋なCSSクリックイベント。 hrefを使用してHTMLでハイパーリンクを作成する方法