ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >個別にCSSを指定

個別にCSSを指定する

クラス、idを使用して個別にスタイルを適用することができます。 セレクタ{プロパティ:値;}のように記述すれば 記述した全てのセレクタ(要素)にスタイルが適用されてしまいますが クラス、idを使用すると目的の要素のみスタイルを適用させることがで きます。

■ クラスで個別にCSSを指定する

外部ファイル

p.iro{color:red;}
.iro{color:red;}

HTMLソース

<p class="iro">文字</p>
<div class="iro">文字</div>

要素(タグ)の後にピリオド、クラス名を記述します。 外部ファイルのiroの部分がクラス名になります。HTMLソース内でpタグにclass="iro"と指定した 部分のみが赤色になります。.iroのようにタグ名を省いた 形で書くとspanやdivなど、他の要素でも共通に使えます。
クラス名に使えるのは半角英数字やハイフン(-)です。
class="aaa"やclass="aa-a1"等。class="1abc"やclass="-abc"のように 先頭の文字が数字やハイフンで始まらないような名前でなければいけません。

■ idで個別にCSSを指定する

外部ファイル

p#iro{color:blue;}
#iro{color:blue;}

HTMLソース

<p id="iro">文字</p>
<div id="iro">文字</div>

要素の後に#、id名を記述します。 外部ファイルのiroの部分がid名になります。 pタグにid="iro"と指定した 部分のみが青色になります。 #iroのようにタグ名を省いた 形で書くとspanやdivなど、他の要素でも共通に使えます。
id名は名前の付け方はクラス名の名前の付け方と同じです。

クラスとidの違いは、クラスは同じクラス名で複数の箇所に同じスタイルを適用でき ますがidは同一ページ内でそのidは一度しか使えないという決まりがあります。

■ その他の項目

スタイルシートの記述方法
スタイルシートの記述場所
複数のセレクタで指定
@importでCSSファイルを読み込む
外部ファイルのコメント

スタイルシート一覧のページに行く


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.