その他

ホームページ作成関連
css 設定の覚書き

基本的なセレクタの書き方で、時々cssを編集した時、思い出せなかったり勘違いしたものをメモしています。

特定の要素に対してのみ動作するセレクタを「.」ドットで区切り記述
（例）img.wakusen {border:3px ridge red;}
複数のセレクタに同じ設定をする時「,」カンマで区切り複数記述する
（例）#sample , h3 , .setumei , p {color: #ff0000;}
複数のセレクタを半角スペースで区切って、絞り込み指定
（例）#sample .setumei p {color: #ff0000;}
奇数/偶数番目の要素だけに適用するセレクタ
（例）ul li:nth-child(even){background: whitesmoke;}
リンクで使うセレクタ
画像で使うセレクタ

特定の要素に対してのみ指定するセレクタを「.」ドットで区切り記述します。

下記の例では、img要素と p要素に対しセレクタを記述。

css の記述

img.wakusen {border:3px ridge red;}

p.irositei {color: #ff0000;}

この場合要素に対し、class="・・・"で指定して使用します。

html の記述

のように使用します。

この例の場合は、画像に枠線を描きます。

css の記述

#sample , h3 , .setumei , p {color: #ff0000;}

のように使用します。

css の記述

#sample .setumei p {color: #ff0000;}

sample の中の .setumei の中の p に対してのみ適用されます。

偶数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

偶数番目の要素だけに適用するセレクタ

ul li:nth-child(even){ background: whitesmoke; }

奇数番目の行だけバックをグレー表示にして見やすくする時は、

css の記述

奇数番目の要素だけに適用するセレクタ

ul li:nth-child(odd){ background: whitesmoke; }

HTMLで aタグでリンクを作り、さらにCSSでデザインを変える時に使用します。

css の記述

画像の上にカーソルをのせたとき少しデザインを変えたりする時に使用します。

css の記述

img:hover {・・・}