ぱそおーるCSS講座

CSS（スタイルシート）とは

CSSとは？

カスケーディング　スタイルシートの略称です。
HTMLタグで使う属性部分をスタイルシートで記述する事で
より細かな設定が出来るようになるのが特徴です。

メリット
HTMLタグに比べて、細部のデザインを作り込める事。
サイト単位、ページ単位、クラス単位、ID単位で管理出来るので、デザイン変更が容易であること。

CSSの記述方法
スタイルシートはセレクタに対して、属性と値を指定して設定します。
「セレクタ」「属性」「値」の３つを組み合わせてスタイルを定義していきます。
セレクタとは、スタイルを設定する要素の部分を言います。
属性とはセレクタで指定した要素に設定するスタイルの種類です。
値は属性で設定したスタイルに対して、決められた値を指定します。

記述例
ページ全体のタグの色を変更する場合
p{color : red;}

複数のスタイルを指定する場合
p{font-size : 15px;font-family : serif;color : red;}

p{
font-size : 15px;
font-family : serif;
color : red;
}
どちらでも同じです。

記述例
HTMLタグに埋め込む場合。

上のような感じで記述します。
HTMLタグの属性の変わりに使う感じなので、こちらの方が馴染みがあるはずです。
複数設定する場合は[;]で区切りをつけます。

上の場合だと、文字のサイズ、文字のスタイル、文字の色を設定しています。

記述例
セレクタのグループ化
p,div{color : red;}
複数のセレクタを[,]で区切る事で、同じスタイルを設定する事が出来ます。
上の場合だとタグ<div>タグ内の文字色が赤になります。

複数の属性を設定する場合。
p,div{color : red;font-family : sans-serif;font-size : 15px;}

p,div{
color : red;
font-family : sans-serif;
font-size : 15px;
}
どちらでも同じです。

記述例
セレクタの親子化
p a{color : red;}
上の場合だと、タグ内の<a>タグの文字色が赤になります。
タグに囲まれていない<a>タグの文字色は通常のものになります。
複数の属性を設定する場合は、上の記述例と同じです。

ここは軽く読み流しておくだけで大丈夫です。
記述の方法が理解出来れば問題ありません。

HOMEへ