CSSを使用して疑似クラスを作成する方法
序章
このチュートリアルでは、CSS pseudo-classes を作成し、それらを使用する方法と理由を学習します。 また、:hover
疑似クラスを使用して練習します。これにより、ユーザーのカーソルが要素にカーソルを合わせたときに要素のスタイルを変更できます。
疑似クラスは、特定の状態でのみアクティブ化されるCSSクラスです。 たとえば、疑似クラス:hover
を使用して、ユーザーのカーソルを要素の上に置いたときの画像またはテキスト要素の外観を変更できます。 疑似クラス:visited
は、ユーザーがリンクをクリックした後にリンクの色を変更するためによく使用されます。
疑似クラスは、:
と疑似クラスの名前をタグ、クラス、またはIDセレクターに追加することによってCSSで宣言されます。 この疑似クラスは、疑似クラスのタグ、クラス、またはIDが割り当てられたHTMLコンテンツに自動的に適用されます。 疑似クラスを機能させるために、HTML要素にコードを追加する必要はありません。
前提条件
このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。
CSSを使用した疑似クラスの作成
それでは、疑似クラスがどのように機能するかを調べるための実践的な演習を試してみましょう。 まず、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法の説明に従って必要なファイルとフォルダーを設定していることを確認してください。
styles.css
ファイルのすべてを消去し(前のチュートリアルのコンテンツを追加した場合)、以下の疑似クラスをドキュメントに追加します。
img:hover {
border: 10px solid red;
}
このコードスニペットでは、強調表示された疑似クラス:hover
を<img>
タグセレクターに追加しました。 ファイルを保存してindex.html
ファイルに戻り、すべてを消去します(コードの最初の行:<link rel="stylesheet" href="css/styles.css">
を除く)。 次に、次のHTMLコードのスニペットをindex.html
ファイルに追加します。
<img src="https://css.sammy-codes.com/images/small-profile.jpeg">
便宜上、オンラインの場所から画像を調達していることに注意してください。 チュートリアルHTMLを使用してWebページに画像を追加する方法の説明に従って、ファイルパスを指定して独自の画像を使用することもできます。
index.html
ファイルを保存して、ブラウザにロードします。 (HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください)。
次のようなものを受け取るはずです。
これで、WebページにSammytheSharkの画像が表示されます。 画像の上にカーソルを置いてみてください。 カーソルを画像上に移動すると、画像の周囲に幅10ピクセルの赤い実線の境界線が表示されます。 styles.css
に追加したルールに基づいて、カーソルがimg
要素と対話すると、ブラウザは自動的に疑似クラス:hover
を適用します。
:hover
疑似クラスをテキスト要素で使用することもできます。 :hover
をテキスト要素に適用する場合は、styles.css
ファイル内のすべてを消去し、以下の疑似クラスをドキュメントに追加します。
p:hover {
font-size:100px;
color:red;
}
styles.css
ファイルを保存します。 index.html
ファイルに戻り、すべてを消去し(コードの最初の行を除く:<link rel="stylesheet" href="css/styles.css">
)、次のコードスニペットを追加します。
<p>Some text</p>
ファイルを保存してブラウザにロードし、結果を確認します。 「Sometext」というテキストが表示されたページが表示されます。このページにカーソルを合わせると、色とサイズが変わります。
結論
このチュートリアルでは、疑似クラスを使用する方法と理由について説明しました。 また、テキストおよび画像ベースのHTML要素にそれらを適用することも試みました。 このチュートリアルシリーズの後半に従う場合は、疑似クラスを使用して、デモWebサイトのフッターを作成します。
次のチュートリアルでは、Webページのレイアウトを構造化するために使用できるHTML<div>
要素の作成とスタイル設定について学習します。