序章

このチュートリアルでは、CSS pseudo-classes を作成し、それらを使用する方法と理由を学習します。 また、:hover疑似クラスを使用して練習します。これにより、ユーザーのカーソルが要素にカーソルを合わせたときに要素のスタイルを変更できます。

疑似クラスは、特定の状態でのみアクティブ化されるCSSクラスです。 たとえば、疑似クラス:hoverを使用して、ユーザーのカーソルを要素の上に置いたときの画像またはテキスト要素の外観を変更できます。 疑似クラス:visitedは、ユーザーがリンクをクリックした後にリンクの色を変更するためによく使用されます。

疑似クラスは、:と疑似クラスの名前をタグ、クラス、またはIDセレクターに追加することによってCSSで宣言されます。 この疑似クラスは、疑似クラスのタグ、クラス、またはIDが割り当てられたHTMLコンテンツに自動的に適用されます。 疑似クラスを機能させるために、HTML要素にコードを追加する必要はありません。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

CSSを使用した疑似クラスの作成

それでは、疑似クラスがどのように機能するかを調べるための実践的な演習を試してみましょう。 まず、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトの設定方法の説明に従って必要なファイルとフォルダーを設定していることを確認してください。

styles.cssファイルのすべてを消去し(前のチュートリアルのコンテンツを追加した場合)、以下の疑似クラスをドキュメントに追加します。

styles.css
img:hover {
 border: 10px solid red;
}

このコードスニペットでは、強調表示された疑似クラス:hover<img>タグセレクターに追加しました。 ファイルを保存してindex.htmlファイルに戻り、すべてを消去します(コードの最初の行:<link rel="stylesheet" href="css/styles.css">を除く)。 次に、次のHTMLコードのスニペットをindex.htmlファイルに追加します。

index.html
<img src="https://css.sammy-codes.com/images/small-profile.jpeg">

便宜上、オンラインの場所から画像を調達していることに注意してください。 チュートリアルHTMLを使用してWebページに画像を追加する方法の説明に従って、ファイルパスを指定して独自の画像を使用することもできます。

index.htmlファイルを保存して、ブラウザにロードします。 (HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください)。

次のようなものを受け取るはずです。

Gif of cursor hovering over image to make red border appear

これで、WebページにSammytheSharkの画像が表示されます。 画像の上にカーソルを置いてみてください。 カーソルを画像上に移動すると、画像の周囲に幅10ピクセルの赤い実線の境界線が表示されます。 styles.cssに追加したルールに基づいて、カーソルがimg要素と対話すると、ブラウザは自動的に疑似クラス:hoverを適用します。

:hover疑似クラスをテキスト要素で使用することもできます。 :hoverをテキスト要素に適用する場合は、styles.cssファイル内のすべてを消去し、以下の疑似クラスをドキュメントに追加します。

styles.css
p:hover {
  font-size:100px;
  color:red;
}

styles.cssファイルを保存します。 index.htmlファイルに戻り、すべてを消去し(コードの最初の行を除く:<link rel="stylesheet" href="css/styles.css">)、次のコードスニペットを追加します。

index.html
<p>Some text</p>

ファイルを保存してブラウザにロードし、結果を確認します。 「Sometext」というテキストが表示されたページが表示されます。このページにカーソルを合わせると、色とサイズが変わります。

Gif of cursor hovering over text to make it have larger size and red color

結論

このチュートリアルでは、疑似クラスを使用する方法と理由について説明しました。 また、テキストおよび画像ベースのHTML要素にそれらを適用することも試みました。 このチュートリアルシリーズの後半に従う場合は、疑似クラスを使用して、デモWebサイトのフッターを作成します。

次のチュートリアルでは、Webページのレイアウトを構造化するために使用できるHTML<div>要素の作成とスタイル設定について学習します。