ブログにオリジナリティを出したり、サイト制作をする上で重要になってくるスタイルシート(CSS)。CSSをなんとなく使っているという方も多いのでは?ここではCSS実践テクニックの導入として、概要を簡単に解説します!
CSSとは、色・サイズ・レイアウトなどの表示スタイルをまとめたシートです。
HTMLにCSSを適用させる事で、複数のページのデザインを統一することができます。
セレクタ・・・・変えたい対象
属性・・・・・・スタイルの設定内容
値・・・・・・・具体的な値
セレクタ(変える対象)の指定には、HTMLタグに直接かける書き方とその他に、classとidを使った書き方があります。
p{color:#000000;}
HTMLタグ<p></p>要素の色を黒(#000000)に指定する
.sample{color:#000000;}
.(ピリオド) + class名(任意の名前を設定)
class「sample」要素の色を黒(#000000)に指定する
#sample{color:#000000;}
#(シャープ) + id名(任意の名前を設定)
id「sample」要素の色を黒(#000000)に指定する
#sample01 .sample{color:#000000;}
id「sample01」の中のclass「sample」の要素の色を黒(#000000)に指定する
#sample01 .sample p{color:#000000;}
id「sample01」の中のclass「sample」の「p」要素の色を黒(#000000)に指定する
スタイルシートには、HTMLへの適用方法が3種類あります。
▼CSS(外部ファイル abc.css)
▼HTMLソース
▼HTMLソース
▼HTMLソース
概要を理解したら、実践テクニックに進みましょう!