webnote.info

Home › ウェブデザイン › スタイルシート(CSS)

§  Web Design

02.

CSSとは

カスケーディングスタイルシート(Cascading Style Sheets)の略。
フォント、色、背景など、HTMLの見栄えを定義する言語です。
セレクタで「どの要素の」プロパティで「何を」で「どうする」を表します。

CSSリファレンス


CSSのシンタックス

CSSの基本的なシンタックス(書式)は以下のとおりです。

h1{
 text-align:center;
 color:#000;
 background-color:#fff;
}
h1,h2,h3 {
 font-size:120%; 
}
a { 
 border-bottom:1px dashed #000; 
}
div b { 
 color:#f00;
}

CSSのコメントの挿入

CSSファイルにコメントを挿入する場合、テキストを /* */ で囲みます。

/* ここはコメントです */


CSSの組み込み方法

CSSをHTMLに組み込む方法は大きくわけて3種類あります。
XHMLで上では、外部スタイルシートを参照する方法が推奨されている。


代替スタイルシートの設定

代替スタイルシートとは、link要素で指定することでユーザが任意で切り替えられるCSSです。作成側からみて固定、優先、代替の3つに分類されます。

xml-stylesheet処理命令 [1] で外部スタイルシートを参照する場合は、alternate疑似属性title疑似属性を利用する必要があります。


セレクタによる指定

特定の要素に対してスタイルを適用するために、以下のセレクタを使います。


疑似クラスとは

疑似クラスとは、スタイルを適用する対象について、要素名や属性名などによって分類するのではなく「状況」によって分類するものです。a要素に適用する疑似クラスは以下のとおりで、順序はlink、visited、hover、active の順に記述する必要があります。

※ 3.~5. は「ダイナミック疑似クラス」と呼ばれ、組み合わせて指定できる。
例:a:hover:focus {color:yellow}


カスケードとは

カスケードとは、スタイルを適用する優先順位のことです。
以下の順に優先度が決まります。

※ 同じ優先順位でスタイルが衝突した場合、後に記述されたものが優先される。


ボックスモデルとは

ボックス(包含ブロック)とは、それぞれの要素について作られる四角形の領域のことです。ボックスは以下の領域から構成されます。

margin の領域
padding の領域
content
※実線の箇所が borderの領域

ショートハンドプロパティとは

ショートハンドプロパティとは、指定する値の数によって「上下左右」の適用対象が異なるプロパティです。それぞれの値は、半角スペースで区切ります。


メディアタイプとは

メディアタイプを指定することで、メディアごとにスタイルシートを指定し分けることができます。link要素、style要素のmedia属性、@mediaで指定します。


メディアタイプの種類

CSSで定義されているメディアタイプは以下のとおりです。

footnotes

  1. 1.xml-stylesheet処理命令
    W3C勧告「Associating Style Sheets with XML documents Version 1.0」に基づいた、XMLで外部スタイルシートを参照する方法。

    page top