【CSS】classセレクタで指定したクラス名を持つ要素にスタイルを適用しよう!

classセレクタについて知りたい人

classセレクタについて知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること

classセレクタとは?
classセレクタの使い方
格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

この記事ではclassセレクタについて解説していきます。

よく使用する要素の一つなのでしっかりと理解して使い方をマスターしておきましょう!

気になる方は是非最後まで読んで頂ければと思います。

classセレクタの評価

頻出度

(5.0)

重要度

(5.0)

総合評価

(5.0)

1.classセレクタとは?

classセレクタはclass属性によって特定のclass名がつけられた要素を対象にスタイルを適用するセレクタです。

class属性はid属性とは異なり、1つの文書内で同じclass名を重複して指定することができます。

classセレクタを使用することで、文書内の複数箇所や異なる要素に対して同じスタイルを適用することができます。

2.classセレクタの使い方

それではclassセレクタの使い方をみていきましょう。

・・・

<h1>[CSS] classセレクタで指定したクラス名を持つ要素にスタイルを適用しよう!</h1>

<h2 class="heading">classセレクタとは?</h2>
<p class="text">classセレクタはclass属性によって特定のclass名がつけられた要素を対象にスタイルを適用するセレクタです。</p>

<h2 class="heading">classセレクタの使い方</h2>
<p class="text">それではclassセレクタの使い方をみていきましょう。</p>

・・・

.heading {
 color: red;
}

.text {
 color: blue;
}

上記の例では「h2要素の文字色を赤色にする」、「p要素の文字色を青色にする」という指定をしています。

3.格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

【コスパ最高】オススメのプログラミングスクール

侍テラコヤ
⇒ 学び応援キャンペーンでお得に申し込む!
・月額1,980円からいつでも現役エンジニアに質問できる。
・学び応援キャンペーン実施中!
ZeroPlus Gate
⇒ 受講料0円で学習をはじめる!
・受講料0円
・30日で副業レベルのWebスキルを学べる!
本気のパソコン塾
⇒ 無料相談会・無料トライアルに申し込む!
・特典1：学習コンテンツの1週間無料トライアル
・特典2：学習管理シートプレゼント
・特典3：副業収入獲得ノウハウ動画プレゼント