CSSでクラスを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: css, Spin Up

序章

このチュートリアルでは、CSS class セレクターを作成します。これにより、クラスが割り当てられているHTML要素にのみCSSルールを適用できます。 CSSクラスセレクターは、同じHTML要素のさまざまなインスタンスにさまざまなスタイルルールを適用する場合に役立ちます。

前提条件

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

CSSクラスセレクターのしくみ

CSSクラスセレクターを使用すると、特定の要素の all インスタンスではなく、そのクラスで指定するHTML要素にスタイルルールを割り当てることができます。名前が事前に決定されているHTML要素（<p>、<h1>、<img>など）とは異なり、クラス名は開発者がクラスを作成するときに選択します。クラス名の前には常に.が付いています。これは、CSSファイルのタグセレクターとクラスセレクターを区別するのに役立ちます。

クラスセレクターのCSSルールは、クラス名の前に.が付加されていることを除いて、タグセレクターのルールと同じ方法で記述されます。

.red-text {
  color: red;
}

WebページにHTMLコンテンツを追加するときにクラスを使用するには、次のようにHTMLドキュメントのクラスattributeを使用してHTML要素の開始タグでクラスを指定する必要があります。

<h1 class=".red-text">Content.</element>

クラスセレクターを使用したCSSクラスの作成

実際にCSSクラスの調査を始めましょう。 styles.cssファイルのすべてを消去し、次のコードスニペットを追加して、クラスred-textのルールを指定します。

styles.css

.red-text {
  color: red;
}

コードスニペットをstyles.cssファイルに追加したら、ファイルを保存します。

index.htmlに戻り、CSSスタイルシートにリンクしているコード<link rel="stylesheet" href="css/styles.css">の最初の行を除くすべてを消去します。次に、次のHTMLコードスニペットを追加します。

index.html

<p class="red-text">Here is the first sample of paragraph text.</p>

ここでは、CSSルールのセレクターとして使用されている場合のように、クラス名の前に.が付いていないことに注意してください。 index.htmlファイル全体には、次の内容が含まれている必要があります。

index.html

. . .
<link rel="stylesheet" href="css/styles.css">
<p class="red-text" Here is the first sample of paragraph text.</p>

このコードスニペットでは、HTML<p>タグを使用してテキストを追加しています。ただし、強調表示されたクラス attribute class="red-text" inside の開始HTMLタグを追加して、red-textクラスも指定しました。

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

赤いテキストのWebページが表示されます。

Webpage output with red paragraph text

CSSクラスを追加して、<p>テキストコンテンツのさまざまな部分をさまざまなクラスでスタイリングする方法を調べてみましょう。次のコードスニペットをstyles.cssファイルに追加します（「red-text」のCSSルールの後）。

styles.css

.yellow-background-text {
  background-color: yellow;
}

このCSSルールは、クラスyellow-background-textにbackground-colorプロパティのyellow値が割り当てられることを宣言します。このクラスに割り当てられたHTMLテキスト要素は、背景が黄色になります。クラスyellow-background-*text*でのtextという単語の使用は、人間が読みやすいようにするためだけのものであることに注意してください。 HTMLテキストに割り当てられたクラスのクラス名にtextという単語を含める必要はありません。

この新しいCSSクラスを適用するには、index.htmlファイルに戻り、次のコード行を下部に追加します。

index.html

<p class="yellow-background-text"> Here is the second sample of paragraph text.<p>

このコードスニペットでは、<p>要素を使用してテキストコンテンツを追加し、yellow-background-textクラスを指定しています。ファイルを保存して、ブラウザにリロードします。 2つの異なる文のWebページが必要です。最初の文は赤で、2番目の文は黄色の背景です。

Webpage with text styled by two classes

HTMLタグに複数のクラスを追加できることに注意してください。 index.htmlファイルに次の行を追加して、両方のクラスを1つのテキスト要素に追加してみてください。

index.html

<p class="red-text yellow-background-text">Here is a third sample of text.</p>

クラス名はスペースでのみ区切られていることに注意してください。ファイルを保存して、ブラウザにリロードします。次のようなものを受け取るはずです。

IWebpage with text styled by three classes

これで、テキストの3行目は、red-textクラスとyellow-background-textクラスで設定されたプロパティ値に従ってスタイル設定され、赤いフォントと黄色の背景になります。

画像へのCSSクラスの追加

CSSクラスは、画像などの他のHTML要素にも適用できます。画像にCSSクラスを使用する方法を調べるには、styles.cssファイルのコンテンツを消去し、次のコードスニペットを追加します。

styles.css

.black-img {
  border: 5px dotted black;
  border-radius: 10%;
}

.yellow-img {
  border: 25px solid yellow;
  border-radius: 50%;
}

.red-img {
  border: 15px double red;
}

ここでは、HTML<img>タグに適用できる3つの異なるクラスのCSSルールを作成しました。先に進む前に、各ルールセットで宣言した内容を簡単に調べてみましょう。

最初のCSSルールは、クラスblack-imgにblack、dottedの境界線を5ピクセル幅、border-radiusのサイズを10％にすることを宣言しています。要素の丸みを帯びた角。
2番目のCSSルールは、クラスyellow-imgにyellow、solidの境界線の幅を25ピクセル、border-radiusのサイズを50％にすることを宣言しています。要素は円形です。
3番目のCSSルールは、クラスred-imgにred、doubleの境界線を15ピクセル幅にする必要があることを宣言しています。境界線の半径を設定していないため、境界線は要素の形状に一致します。

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

index.html

<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="black-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="yellow-img">
<img src="https://css.sammy-codes.com/images/small-profile.jpeg" class="red-img">

これらの3行のHTMLコードはそれぞれ、HTMLドキュメントに画像を追加し、styles.cssファイルに追加した3つのクラスのいずれかに割り当てます。オンラインの場所から画像を調達していることに注意してください。チュートリアルHTMLを使用してWebページに画像を追加する方法の説明に従って、ファイルパスを指定して独自の画像を使用することもできます。

index.htmlファイルを保存して、ブラウザにロードします。次のようなものを受け取るはずです。

Webpage with images styled with three classes

これで、Webページに3つの画像が表示され、それぞれに割り当てられたクラスの異なる仕様でスタイルが設定されます。

CSSクラスの調査を続けるには、さまざまなルールセットを使用して新しいクラスを作成し、それらをさまざまな種類のHTMLコンテンツに適用してみてください。クラス宣言ブロックで指定されたプロパティと値は、それらが意図されている要素でのみ機能することに注意してください。たとえば、font-color宣言は、画像の境界線の色を変更しません。同様に、height宣言はフォントのサイズを変更しません。

結論

これで、クラスを作成し、それらに特定のプロパティ値を割り当て、それらをテキストおよび画像コンテンツに適用する方法について説明しました。このチュートリアルシリーズの後半でWebサイトの構築を開始すると、クラスの使用に戻ります。

次のチュートリアルでは、CSS ID セレクターを作成します。これは、いくつかの固有の機能を除いて、クラスセレクターと同様に機能します。

getdocs

13036