CSSの書き方とセレクタの一覧

CSSの書き方とセレクタの一覧です。

目次

CSS CSSの書き方
  CSSを使用したコードの例
  プロパティが複数の例
  コメントの書き方
  style属性でCSSを指定する
セレクタ IDセレクタとクラスセレクタ
  セレクタの一覧

CSSの書き方

CSSを使用すると文字の色や背景色を変えることができます。

そのCSSの構造は以下のようになっています。

セレクタとは?→CSSを適用する場所です(どこに)。→IDの"a1"という箇所に

プロパティとは?→CSSの項目です(なにを)。→文字の色を

値とは?→プロパティに対する指定です(どれくらい)。→赤色にしろ

CSSを使用したコードの例

以下は、HTMLに実際のCSSを使用したコードの例です。

<style>
#a1{
	color:red;
}
</style>

<p id="a1">あいうえお</p>

1行目の<style>から5行目の</style>の間にCSSを記述します。

2行目は、IDセレクタです。html内にある"a1"の箇所(=7行目)を指定しています。IDセレクタは先頭にシャープ(#)がついています。

3行目のcolorはプロパティで、redは値です。文字の色を赤色にしろという命令です。

7行目は、Pタグの中にid="a1"があります。2行目と繋がります。

画面を表示すると7行目の「あいうえお」という文字が赤色になります。

プロパティが複数の例

上記のサンプルでは、プロパティは1つのみですが、以下のようにプロパティを複数設定することもできます。

<style>
#a1{
	color:red;
	font-weight:bold;
	background:LightSkyBlue;
}
</style>

<p id="a1">あいうえお</p>

3行目は、文字の色は赤を指定しています。
4行目は、文字を太字にしています。
5行目は、背景色は水色にしています。

コメントの書き方

コメントは、/* で始まり、 */ で終了します。

<style>
	/* コメントです */
	#p1 {
		color: red;
	}
	/*
	  複数行のコメントです
	*/
</style>
<p id="p1">あいうえお</p>

6~8行目のように複数行のコメントも可能です。

style属性でCSSを指定する

上記の例では、<style>から</style>の間にCSSを書きましたが、タグの中にCSSを埋め込むこともできます。

以下は、その例です。

<p style="color:red;background:blue;">あいう</p>

<p sytle="・・・の点々の箇所からがCSSの命令です。colorは文字の色で赤色に、backgroundは背景色を意味し、青にしろという命令です。

構造は以下のようになっています。

style = "プロパティ:値 ; [プロパティ:値;] ・・・"
  • プロパティは、CSSの項目です(なにを)。→文字の色を
  • 値は、プロパティに対する指定です(どれくらい)。→赤色にしろ
  • CSSの命令が及ぼす範囲は埋め込んだタグ内です。→「あいう」という文字の箇所
  • セミコロン(;)で区切って複数のプロパティと値を記述します。

IDセレクタとクラスセレクタ

セレクタは、CSSを適用する場所を指定するものでいろいろな種類があります。

覚えておきたいのは、IDセレクタとクラスセレクタです。
IDセレクタは、1つのhtml文書内で1つだけのユニークなものである必要があります。
クラスセレクタは、1つのhtml文書内に複数設定しても問題ありません

IDセレクタの例です。

<style>
#a2{
	color:red;
}
</style>

<p id="a1">あいうえお</p>
<p id="a2">あいうえお</p>
<p id="a3">あいうえお</p>

2行目は、IDセレクタです。先頭にシャープ(#)がついています。
7~9行目までid=がありますが、id="a2"がある8行目の文字の色が赤になります。

クラスセレクタの例です。

<style>
.a1{
	color:red;
}
</style>

<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>
<p class="a1">あいうえお</p>

2行目は、クラスセレクタです。先頭にドット(.)がついています。
7~9行目には、それぞれclass="a1"があります。7~9行目の文字の色が赤色になります。

セレクタの一覧

以下は、セレクタの一覧です。

セレクタ名 書式 適用する対象
ユニバーサルセレクタ  *(アスタリスク) すべての要素
タイプセレクタ
(要素セレクタ)
 要素名 指定した要素
<h1>や<p>などです。
IDセレクタ  #ID名 ID名が指定されている要素
※ID名はhtml文書内で1つだけにします。
クラスセレクタ  .クラス名 クラス名が指定されている要素
※クラス名は、html文書内の複数の箇所にあっても良いです。
属性セレクタ 要素名[属性名] 指定した属性を持つ要素
要素名[属性名="値"] 指定の属性の値がある要素
要素名[属性名~="値"] 属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素
要素名[属性名|="値"] ハイフン(-)で区切られた属性の値が複数ある場合で、指定の属性の値で始まっている要素
要素名[属性名^="値"] 指定の属性の値で始まる要素
要素名[属性名$="値"] 指定の属性の値で終わる要素
要素名[属性名*="値"] 指定の属性の値が含まれている要素
疑似クラス 要素名:link まだ見ていないページのリンク
要素名:visited すでに見たページへのリンク
要素名:hover マウスカーソルが重なっているとき
要素名:active 要素を選択した時
要素名:focus フォーカスした時
要素名:target 移動先の要素
要素名:lang() lang属性値が指定された言語コードで始まっている要素
要素名:enabled 有効な要素
要素名:disabled 無効な要素
要素名:checked ラジオボタンやチェックボックスが選択されたとき
要素名:indeterminate ラジオボタンやチェックボックスが不確定な状態のとき
要素名:root ルート要素
要素名:first-child 最初の子要素
要素名:last-child 最後の子要素
要素名:nth-child() n番目の子要素
奇数の行にスタイルを適用 (:nth-child(2n+1))
偶数の行にスタイルを適用 (:nth-child(2n))
指定した行にスタイルを適用 (:nth-child (数値))
要素名:nth-last-child() 後ろからn番目の子要素
要素名:only-child 唯一の子要素
要素名:first-of-type 最初の子要素
要素名:last-of-type 最後の子要素
要素名:nth-of-type() n番目の子要素
要素名:nth-last-of-type() 後ろからn番目の子要素
要素名:only-of-type 唯一の子要素
要素名:empty 子要素や要素内容を持たない要素
要素名:not() 指定の条件と一致しない要素
疑似要素 要素名::first-line 最初の1行目
要素名::first-letter 最初の1文字
要素名::before 指定した要素の開始タグの後
要素名::after 指定した要素の終了タグの前
子孫セレクタ セレクタ1 セレクタ2 セレクタ1の子孫のセレクタ2の要素
子セレクタ セレクタ1 > セレクタ2 セレクタ1の子のセレクタ2の要素
兄弟セレクタ セレクタ1  +  セレクタ2 セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の直後にあるセレクタ2の要素
セレクタ1  ~  セレクタ2 セレクタ1とセレクタ2が同じ親要素を持つ兄弟の要素で、セレクタ1の後にあるセレクタ2の要素

関連の記事

CSSを記述する場所のサンプル
CSSを適用する優先順序のサンプル
CSS スタイルの継承のサンプル(inherit)
CSS ボックスモデルについて
CSS 長さの単位(px,em,rem)のサンプル

△上に戻る