CSSアクティブ Webサイトをデザインするとき、ユーザーがアクティブにしている要素にスタイルを適用することをお勧めします。たとえば、ユーザーがボタンまたはリンクをクリックしたときにボタンまたはリンクの色を変更したい場合があります。 そこで、CSS：active pseudo-classが登場します。：activepseudo-classを使用すると、ユーザーによってアクティブ化された要素を選択して、スタイルを適用できます。 このチュートリアルでは、CSS疑似クラスの基本と、コードで：active疑似クラスを使用する方法を例を挙げて説明します。このチュートリアルを読み終えると、：active疑似クラスの使用に精通するようになります。 CSS疑似クラス CSSでは、セレクターを使用して、スタイルまたはスタイルのセットを適用する要素を選択します。たとえば、セレクターはWebページ上のすべてのまたはタグを選択し、それに一連のスタイルが適用されます。 多くの場合、Webサイトのスタイルを設定するときは、要素がユーザーによるクリックやマウスオーバーなどの特別な状態になったときにのみスタイルを適用する必要があります。そこで、疑似クラスが登場します。 疑似クラスは、特定の要素が特定の状態で存在する場合にその要素を選択できるようにするセレクターに追加されるキーワードです。 このチュートリアルでは、：active疑似クラスに焦点を当てます。 CSS：アクティブな疑似クラス ：active疑似クラスを使用すると、ユーザーによってアクティブ化されている要素を選択できます。 CSSの用語では、「アクティブ化」とは、ユーザーがマウスボタンを押して要素をクリックしたときを意味します。 参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。 平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。 ：active疑似クラスは通常、要素と要素で使用されます。たとえば、：active疑似クラスを使用して、リンクをクリックしたときにリンクの色を赤に変更したり、ボタンをクリックしたときにボタンの背景色を水色に変更したりできます。 ユーザーが要素のクリックを停止すると、その要素は「アクティブ化」されなくなります。したがって、ユーザーが要素のクリックを停止したときに、要素は：activeセレクターによって選択されません。 CSS：アクティブな例 ：active疑似クラスを使用する方法を説明するために、2つの例を見ていきましょう。 アクティブリンク 地元のカードゲームクラブであるWizardsoftheBoardsのWebサイトを設計しているとします。私たちは、クラブのメンバーがプレイするカードゲームを一覧表示するWebページへのリンクを含む「About」ページを作成する任務を負っています。 デフォルトでは、このリンクは水色で表示されます。このリンクをクリックすると、テキストの色がオレンジ色に変わります。このタスクを実行するために、：active疑似クラスを使用できます。リンクがクリックされたときにテキストの色を変更するために使用するコードは次のとおりです。 <html> <p>Wizards of the Boards is a Philadelphia, PA-based card game club. The club, founded by Michael Johnson and Gabriella Patel in 2004, welcomes players of all card games to come along. The club meets twice each week, on Mondays and Fridays, to discuss the latest in the card games our members play, and to sit down for a few matches of our favorite games. To learn more about the games we play at Wizards of the Boards, <a href="/games.html">click here</a>.</p> </html> <style> a { color: lightblue; } a:active { color: orange; } </style> 私たちのコードは次を返します： 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。> HTMLファイルでは、 タグを使用してテキストの段落を定義しました。これは、Wizards oftheBoardsカードゲームクラブの歴史の概要を示しています。 タグでは、「games.html」ページにリンクするタグを指定しており、ユーザーが「ここをクリック」というテキストをクリックするとトリガーされます。 CSSコードでは、2つのスタイルルールを指定しています。まず、すべてのタグのテキストの色を水色に設定するルールを指定しました。次に、すべてのアクティブなタグのテキストの色をオレンジに設定する：activeセレクターを使用してルールを指定しました。つまり、このルールは、ユーザーがリンクをクリックしたときにリンクの色を変更します。 アクティブボタン Wizards of the Boardsカードゲームクラブのフォームに取り組んでおり、人々がクラブに興味を持って提出できるようになっています。 フォームの最後に、「関心を送信」というボタンを作成します。このボタンをクリックすると、ボタンの周囲に3px幅のオレンジ色の境界線が適用されます。 このボタンは、次のコードを使用して作成できます。 <html> <button>Submit Your Interest</button> </html> <style> button:active { border: 3px solid orange; } </style> 私たちのコードは次を返します： 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。> コードを分解してみましょう。 HTMLファイルでは、タグを使用してボタンを定義しました。このボタンには、「SubmitYourInterest」というテキストが含まれています。 CSSスタイルシートでは、タグがユーザーによってアクティブにされたときに適用される1つのルールを定義しました。このルールは、ボタンの周囲に3px幅の実線の境界線を作成します。 ：activeセレクターを使用して、ボタンがアクティブな場合にのみこのルールを適用します。 したがって、ボタンをクリックするとオレンジ色の境界線が表示され、ボタンのクリックを停止するとすぐに境界線が消えます。 結論 CSS：active疑似クラスを使用すると、要素が「アクティブ」状態のときに要素を選択できます。アクティブな要素を選択したら、その要素にスタイルまたはスタイルのセットを適用できます。 ：active疑似クラスは、通常、タグおよびタグとともに使用され、リンクまたはボタンがクリックされたときにそれぞれトリガーされるエフェクトを作成します。 このチュートリアルでは、CSS疑似クラスの基本と、：active疑似クラスの使用方法について説明しました。これで、エキスパートのような：active疑似クラスの使用を開始するために必要な知識を身に付けることができます。 CSS構文 CSSブラー CSSでアクティブなHTMLアンカーを強調表示するスタイル CSSでアクティブなHTMLアンカーを強調表示するには、：targetセレクターを使用します。 例 次のコードを実行して、：target Selectorを実装してみてください： <!DOCTYPE html> <html> <head> <style> :target { border: 2px solid #D4D4D4; ：CSSのアクティブな疑似クラス 疑似クラス 要素またはcssセレクターのさまざまな状態を表示することです。アクティブな疑似クラスは、要素がアクティブな状態にあることを示すためのものです。 この疑似クラスは、主にリンクとボタン、またはアクティブにできるその他の要素に関連付けられています。 たとえば、リンクがアクティブであることがリンクに関連付けられている場合。 構文 a:active { color:green;} ：アクティブ疑似クラスの実際の使用法を確認しましょう 次のように、さまざまなシナリオで- 例 <html> <head> <style> &nbs
