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>
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の違い(長さの単位)