CSSの書き方/コメントとセレクタの一覧

CSSの書き方とコメントとセレクタの一覧です。

CSS	CSSの書き方
	CSSのコメントの書き方
	CSSを記述する場所
セレクタ	IDセレクタとクラスセレクタ
	セレクタの一覧

CSSの書き方

CSSを使用すると文字の色や背景色を変えることができます。
CSSの構造は以下のようになっています。

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

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

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

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

2行目の#a1がセレクタです。
セレクタは、CSSを適用する場所です(どこに)。→IDの"a1"という箇所に。
#がついているセレクタはIDセレクタといいます。htmlの中にあるIDを指します。

3行目は、プロパティと値です。
プロパティは、CSSの項目です(なにを)。→文字の色を。
値は、プロパティに対する指定です(どうする)。→赤色にする。

7行目は、Pタグの中にid="a1"があります。2行目とひも付きます。
画面を表示すると7行目の「あいうえお」という文字が赤色になります。

プロパティが複数の例

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

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

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

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

CSSのコメントの書き方

コメントされた箇所は、プログラムの実行に影響を与えません。
コメントは、/* で始まり、 */ で終了します。

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

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

CSSを記述する場所

CSSは以下の場所に記述できます。

・外部のファイルにCSSを記述する
・HTML内部でCSSを記述する
・タグ内で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>

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

セレクタの一覧

セレクタの一覧です。

セレクタ名	書式	適用する対象
ユニバーサルセレクタ	*(アスタリスク)	すべての要素
タイプセレクタ (要素セレクタ)	要素名	指定した要素 <h1>や<p>などです。
IDセレクタ	#ID名	ID名が指定されている要素 ※ID名はhtml文書内で１つだけにします。
クラスセレクタ	.クラス名	クラス名が指定されている要素 ※クラス名は、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の要素