CSSのclassセレクターの使い方

    • このページをはてなブックマークに追加

    公開日:2016年08月16日 最終更新日:2019年10月23日

    CSSの「class(クラス)セレクター」を使うとその「クラス名」を付けた要素に共通のスタイルを適用することができます。HTMLの特定の要素全てのスタイルを指定するのではなく、一部分のスタイルを適用したい場合などに使います。

    1. class(クラス)セレクターとは?

    class(クラス)セレクター」とは、HTML文書の特定要素のスタイルを作成する時に用いるセレクターです。通常CSSファイルにクラスセレクターを記述して、HTML文書中の「class属性」にCSSで作成した「クラス名」を指定します。

    1.1 classセレクターの基本書式

    CSSに記述する「クラスセレクター」は、通常のセレクターとは違い、セレクター名の前にドット(.)をつけて記述します。HTML文書中でclass属性の値としてセレクターのクラス名を指定します。

    .クラスセレクター名{ プロパティ:値 }

    セレクターの文字は、半角英数とハイフン( - )、アンダースコア( _ )のみ使用可能です。クラスセレクターの名前に大文字・小文字を使うことはできますが、HTML文書の属性値に設定する時は大文字小文字の区別をします。正しく設定しないと動作しないので気をつけましょう。

    ※サンプルの「class.html」をPC上に保存して動きを見てみましょう。ファイルの保存形式はmetaタグにあわせて"uft-8"で保存します。CSSは外部ファイルとして保存することが推奨されています。例では分かりやすさを優先し、HTML文書内に埋め込んであります。

    ●class.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="uft-8">
    <title>HTML入門-「classセレクター」の使い方</title>
    <style>
    body {
    	font-family: "メイリオ", meiryo, sans-serif;
    	}
    .font_question{
    	color: #006dd9;
    }
    </style>
    </head>
    <body>
    	<p class="font_question">
    		Q: HTML文書の同じ要素で、異なるスタイルにしたいときはどうすればよいのでしょうか?
    	</p>
    	<p>
    		A: クラスセレクター名をCSSに記述する事で、同じ要素でも異なるスタイルを適用することができます!
    	</p>
    </body>
    </html>

    CSSの「クラスセレクター(.font_question)」でスタイルを設定し、HTML内の要素のclass属性に「クラス名」を指定します。CSSではクラス名の前にドット(.)を付けますが、HTML文書で"class属性"にクラス名を指定する時にはドットはつけません。

    ●ブラウザーの表示

    ▲ページトップへ戻る

    1.2 段落要素に異なるクラスのスタイルを適用する方法

    CSSのメリットの一つは、共通のスタイルをまとめて指定できることです。classセレクターを使用してスタイルを指定する際には、ページのどの要素をまとめたい(分類したい)のかということを考えて設計しましょう。ページの構成と統一したスタイルを決めることで、後々の管理もしやすくなります。

    ページ内で共通の意味を持つ要素などに使ってみて下さい。サンプルの「class.html」は「質問(Q)」の段落のフォントカラーを青色(color: #006dd9)、「答え(A)」の段落の背景色をグレー(background-color: #aaaaaa)にしています。

    ページの設計に合わせて色などを変更したい場合は、スタイルシートのプロパティを変更することで、一括してスタイルの変更ができます。

    ●class.html

    <style>
    body {
    	font-family: "メイリオ", meiryo, sans-serif;
    	}
    .font_question{
    	color: #006dd9;
    }
    .font_answer{
    	background-color: #aaaaaa;
    }
    </style>
    </head>
    <body>
    	<p class="font_question">
    		Q: HTML文書の同じ要素で、異なるスタイルにしたいときはどうすればよいのでしょうか?
    	</p>
    	<p class="font_answer">
    		A: クラスセレクター名をCSSに記述する事で、同じ要素でも異なるスタイルを適用することができます!
    	</p>
    	<p class="font_question">
    		Q: 具体的にはどこに設定するのですか?
    	</p>
    	<p class="font_answer">
    		A: CSSとHTML文書内のclass属性として設定します。
    	</p>
    </body>

    ●ブラウザーの表示

    ▲ページトップへ戻る

    2. 特定要素のclassセレクターを作成する方法

    HTMLのclass属性は「グローバル属性」ですので、"pタグ"や"divタグなど、HTML文書内のどの要素(タグ)にも使えます。

    CSSで作成した「クラスセレクター」を特定の要素だけに設定したい場合、セレクターのドット(.)の前に、特定要素の名前をつけると、その要素でしか使えないクラス名を設定することができます。

    要素名.クラスセレクター名{ プロパティ:値 }

    ●class.html

    <style>
    ・・・略・・・
    .font_answer{
    	background-color: #aaaaaa;
    }
    h1.faq_title { 
    	border-width: 0px 0px 2px 15px;
    	border-color: #326693;
    	border-style:solid;
    }
    </style>
    </head>
    <body>
    <h1 class="faq_title">よくあるお問い合わせ</h1>
    <h2 class="faq_title">class属性について</h2>
    	<p class="font_question">
    		Q: HTML文書の同じ要素で、異なるスタイルにしたいときはどうすればよいのでしょうか?
    	</p>
    	<p class="font_answer">
    		A: クラスセレクター名をCSSに記述する事で、同じ要素でも異なるスタイルを適用することができます!
    	</p>
    ・・・略・・・
    </body>

    例えば、お問い合わせページの大見出し(h1)に特定のスタイルを適用したい場合、クラスセレクターのドット(.)の前に、要素名「h1」をつける事で、「h1タグ」のみに適用するクラスセレクターを作成することができます。

    "h1.faq_title"セレクターに適用したいプロパティを記述し、HTML文書中の「h1タグ」のクラス属性値に"faq_title"を設定します。「h1タグ」のテキストはセレクターで設定したボーダー(border-xxx)が表示されます。 「h2タグ」のクラス属性に同じ"faq_title"を設定していますが、このクラス名はh1タグ用のクラスの名前なので、スタイルは適用されません。

    ●ブラウザーの表示

    ▲ページトップへ戻る

    最新案件情報をチェック!

    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    正社員

    【PHP】WEBエンジニア|アパレルサイトの開発

    年収 :350万円〜

    アパレル、食品ECサイトなどの開発

    株式会社LOWCAL

    フリーランス

    【Ruby on Rails/HTML/CSS】サーバーサイドエンジニア★BtoBマッチングSaaS開発

    同社は決裁者向けのマッチングプラットフォームを展開する企業です。 今回はBtoBマッチングSaaSの開発...

    フリーランス

    【Java(Spring Boot)/React/HTML/JavaScript他】フルスタックエンジニア★セキュリティ関連企業向け新規サービス開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は大手セキュリティ関連企...