ＣＳＳの役割:デザインマスター【初級】学習ノート / みっち

デザインマスター【初級】学習ノート / みっち

▼ＣＳＳの役割

ＣＳＳの役割と書式
　　　　ＣＳＳとは・・・Ｗｅｂページの見栄えを指定し、視覚的な価値を与えるための言語

◎　ＣＳＳ（Cascading Style Sheets)の役割
　　本来の（Ｈ）ＨＴＭＬで制作されたＷｅｂページがどのように表現されるかは
　　デバイスやブラウザによるが、
　　ＣＳＳを利用することで見栄えをコントロールすることができる

◎　（Ｘ）ＨＴＭＬとＣＳＳの関係
　　マークアップ(構造）あってのスタイルシート（見栄え）であることが前提にくる
　　つまり、（Ｘ）ＨＴＭＬの役割をこなしてこそ、ＣＳＳの本領を発揮するということ

◎　ＣＳＳの書式
　　・セレクタ（selector)-スタイルの適用対象
　　・プロパティ（property)-スタイルの種類
　・値（value)-与える効果の具体的な種類や程度

　◇　p要素の色を赤に指定する場合
　　　「ｐ{ color: red; }」
　　この場合、pがセレクタ、colorがプロパティ、redが値である
　　そして、プロパティと値のセットを「宣言（declaration）」と呼ぶ

◎　ＣＳＳの適用方法
　　（Ｘ）ＨＴＭＬにＣＳＳを適用するには４つの方法がある
　　①　link要素で外部ファイルを参照
　　②　＠importルールで外部ファイルを参照
　　③　style要素でＣＳＳソースを指定
　　④　style属性でＣＳＳソースを指定

　　①②の方法が望ましい
　　③④はそのＷｅｂページでしか有効ではなく、メンテナンス性が低下するというデメリットもある

◎　ＣＳＳの適用メディア(メディアタイプ）
　　link要素やstyle要素ではmedia属性で適用メディアを特定できるが、
　　対応しているかどうかは、各種デバイスやブラウザによる
　　「screen」- ＰＣスクリーン
　　「print」- プリンタなど印刷メディア
　　「handheld」-　携帯端末
　　「tv」-　テレビ
　　「projection」-　プロジェクター
　　「aural」-　音声出力　　　などがある

◎　スタイルの継承
　　ＣＳＳにはある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴がある

◎　スタイルの優先順位
　　スタイルの適用対象が競合している場合、
　　「特殊性」- 一般的なスタイルよりも個別的なスタイルを優先する
　　「読み込み順序」- 後から読み込んだスタイルを優先する

　　という
２つのルールによって優先順位が決定される
　　また、値の後ろに「!important」をつけることで「スタイルの作り手」というルールによって
　　優先させることもできる
2010.01.18：dmmitchi

⇒HOME

(C)