TOP > Back > Place

CSS(スタイルシート)の基礎知識

CSSに関する情報は、W3CのStyle Activity Statement(http://www.w3.org/Style/Activity)をご覧下さい。

◆基本の書式

CSSの書き方 基本的には、セレクタ{プロパティ:値;}が書式です。
その他に、要素(開始タグ)に属性として指定する<要素名 style="プロパティ:値">を指定する方法もあります。
しかし、後者のstyle属性は、XHTML1.0では使用できますが、XHTML1.1では、非推奨になりXHTMLBasicでは、使用できません。
つまり、<STYLE>要素内でid,classを使いプロパティ宣言(指定)し使用することになります。

セレクタの大文字・小文字の区別
CSSでは、基本的には区別しないのですが、XHTMLに移行することを考えるとアルファベットの大文字や小文字も区別しましょう。

<STYLE>〜〜〜</STYLE>内のコメント
/*文字列*/がスタイルシートの中で有効なコメントです。HTMLの<!--コメント-->は使用できません。

セレクタ { プロパティ : 値 ;}/*覚え書きが書けます*/

◆連結

プロパティの複数指定:
セレクタ{プロパティ:値;}や<要素名 style="プロパティ:値">のプロパティ:値をダブルセミコロンで区切り同じセレクタ・要素名に「プロパティ:値」を幾つもつなげることも可能です。

<HEAD>
<STYLE type="text/css"><!--
セレクタ { プロパティ : 値 ; プロパティ:値 ; … ;}
--></STYLE>
</HEAD>

<BODY>内での使用
<要素名 style="プロパティ:値 ; プロパティ:値 ; … ">

プロパティの複数指定:
セレクタ{プロパティ:値;}のセレクタもつなげることが可能です。その場合,(,カンマ)を利用します。間違ってもドットではありません、.(ドット)はCLASS指定になります。

セレクタ , セレクタ , …{ プロパティ : 値 ; }

◆セレクタの種類

基本のセレクタ
基本的なセレクタは要素名で指定しますが、他にIDCLASSを使った関連付け(任意の名前)も指定ます。セレクタのID|CLASSにアタリスク*を使用し全ての要素名に対して指定を適用できます。
アタリスク*は、省略できるので必要ないでしょうが・・・

要素名 { 属性 : 値 ; }が通称:単純セレクタと言います。
h1{プロパティ:値;}
p{プロパティ:値;}

ID
#任意名{プロパティ:値;}
*#任意名{プロパティ:値;}
要素名#任意名{プロパティ:値;}

CLASS
.任意名{プロパティ:値;}
*.任意名{プロパティ:値;}
要素名.任意名{プロパティ:値;}

要素名とID|CLASSの複合
要素名とID|CLASSを一つに設定する事が出来ます。指定された全ての要素名に対してではなく、指定された要素名に関連付けられた任意名の場合のみスタイル適用します。

例えば、要素名とCLASSを使いP.abc{プロパティ:値;}の場合<P>では作動しません、<P CLASS="abc">で初めて作動します。
要素名とIDでは、P#abc{プロパティ:値;}を設定すると<P ID="abc">で初めて作動します。

◆IDとCLASSのセレクタ

IDは固有の識別子
要素に対して固有の識別名を付けるための属性です。シャープ記号(#)とその直後に続く一意属性値(識別子)から構成されます。一つのページ(文書)に対して一度しか使えません。ページ(文書)の特定部分を示すために使われます。また、ID名は大文字・小文字を区別するので注意しましょう。
id属性は将来的にHTML の、a,form,frame,iframe,img,map 要素のname属性の役割を担う属性です。また、XHTML1.1やXHTML Basicではa,form,frame,iframe,img,map 要素のname属性を廃止しています。

クラス名として使える文字は、A〜Z,a〜z,0〜9, -(ハイフン), _(アンダースコア),ISO-10646の文字コード位置161-255(CSS2からは161以上)です。ただし、先頭に数字やハイフンなどの記号を使用することはできません。

CLASSは分類名
要素に対して分類上の名前を付けるための属性です。IDとは違い一つのページ(文書)に対して複数回使用可能です。また<要素名 class="abc xyz def">のように半角スペースで区切りCLASSの分類名を並べて複数指定することで、一つの要素名に対し複数のスタイルシートを指定できます。CLASS名は大文字・小文字を区別するので注意しましょう。

クラス名として使える文字は、A〜Z,a〜z,0〜9, -(ハイフン), _(アンダースコア),ISO-10646の文字コード位置161-255(CSS2からは161以上)です。ただし、先頭に数字やハイフンなどの記号を使用することはできません。

◆プロパティの関連付け

属性名の関連付け
CSS2 では、HTMLなどの構造化言語に定められた属性に対照(マッチング)させる規則を指定できます。
セレクタ内の属性名と属性値について大文字と小文字を区別するのかどうかは構造言語によって違います。例えば、HTML4.01 では、属性名の大文字と小文字は区別されませんが、XHTMLでは区別されます。

要素名 [ 属性名 ]
属性値に関わらず、指定された属性が要素に対してスタイル適用します。
例、[lang] { プロパティ:値;}/* lang属性を持つすべての要素に対照する */
例、a[name] { プロパティ:値 ; }/* name属性をもつすべてのa要素に対照する */
例、a[title][href] { プロパティ:値 ; }/* title属性とhref属性を持つすべてのa要素に対照する */
要素名 [ 属性名 =" 属性値 "]
指定した属性とその値を持つ要素に対してスタイル適用します。
例、要素名[id="AbcdEfg"] { font-family: fantasy ; }
要素名 [ 属性名 ~=" 属性値 "]
属性名とその属性値がスペースで区切られた箇条書きになっていて複数指定された場合に、その値の中の1つと適合する要素に対してスタイル適用します。
例、要素名[class~="space"] { padding-left: 40px ; }
要素名 [ 属性名 |=" 属性値 "]
要素の中で属性名とその属性値が「-」(ハイフン)で区切られた語句の場合に、その語の先頭の語句と一致する要素に対してスタイル適用します。 このセレクタは主に言語コード(en, en-USなど)に対して使用されます。
例、要素名[lang|="fr"] { color : blue ; }

◆子孫セレクタ(Descendant)

子孫
特定要素の子孫にあたる要素に適用します。 子孫セレクタは、空白類文字(スペース, タブ, 復帰, 行送り, 書式送り)で区切られた2つ以上の単純セレクタで構成されます。次の例では、p要素に含まれるstrong要素のみ対照します。
p strong { background-color: yellow ; color : black ;}

◆子セレクタ(Child)


特定要素の子供にあたる要素に適用します。 子供セレクタは、半角のカッコ(>)大なり記号で区切られた2つ以上のセレクタで構成されます。次の例では、div要素の直接の子供であるp要素のみに対照します。 。
div>p { background-color: white ; color : navy ;}

◆隣接セレクタ(Adjacent sibling)

隣接
隣接セレクタは「要素1 + 要素2」という形式の構文で指定します。この場合、「要素2」がセレクタの主体になります。このセレクタは、「要素1」と「要素2」の親要素が同じで、なおかつ「要素2」が「要素1」の直後にある場合のみに対照します。次の例では、body要素を直接の親要素として持つ、h1要素の直後にあるh2要素に対して対照します。
h1 + h2 { font-size: x-large; font-family: serif ;}

◆擬似クラス(Pseudo)

リンク擬似クラス(link pseudo)
a:link はリンクするa要素のうち(href属性を持つ)、参照(閲覧)されていない要素に対してスタイル適用されます。
a:link { color: #0000ff; background-color: #f8f8f8; }
a:visited はリンクするa要素のうち(href属性を持つ)、参照済み(閲覧済み)の要素に対してスタイル適用されます。
a:visited { color: #ff0000; background-color: #ffffff; }

ダイナミック擬似クラス(dynamic pseudo)
a:hover はユーザー(閲覧者)がカーソルとa要素が重なっているとき(アクティブされていない場合)にスタイル適用します。 a要素に対して指定する場合には、誤作動防止のために a:link と a:visited の後、a:active よりも前に記述するようにしてください。
a:hover { color: #000000; background-color: #ffff00; }
a:active はクリックされた場合アクティブ(活動中)の状態のときにスタイル適用します。(ユーザーがリンク部分をクリックしてから放すまでの間。
a:active { color: #ff00ff; background-color: #ffffff; }
a要素に対して指定する場合には、誤作動防止のために a:link|a:visited|a:hover の後に記述するようにしてください。
要素名:focus は指定された要素が、ユーザーによってフォーカス(選択)された状態の時にスタイルを作動します。 例えば、フォームの入力フィールドに文字が入力できる状態やキーボードのタブ・キーで選択された時などにスタイル適用します。
要素名:focus { color: #f0f0f0; background-color: #0f0f0f; }

言語擬似クラス(language pseudo)
要素名:lang(言語コード) は指定された要素の中で、言語コードに設定されている要素に対してスタイル適用します。
div:lang(en-US) { font-style: italic; }

最初の子擬似クラス(first-child pseudo)
要素名:first-child は要素内に最初に出現する子要素である場合にスタイル適用します。
p:first-child { font-weight: bold; }

◆擬似要素(Pseudo-elements)

要素名:first-line
要素を示す文章の1行目として表示された部分に対してスタイル適用します。
要素名:first-letter
要素の先頭の1文字に対してスタイル適用します。 floatプロパティ(左右の回り込み)の値が none である場合はインライン要素に、 それ以外の場合はフロート要素に類似します。
要素名:before
contentプロパティ(内容の追加)を共に使用して、指定された要素内容の直前に生成内容を追加します。
要素名:after
contentプロパティと共に使用して、指定された要素内容の直後に生成内容を追加します。

◆外部スタイルシート

外部スタイルシートは、メモ帳などでスタイルファイルを作り、拡張子「 .css 」で保存します。
基本的(メイン)なスタイルシートをHTMLファイルに呼び込みます。
通常、HEAD要素内にLINK要素でメインとなる外部スタイルファイルを呼び込みます。
<link rel="stylesheet" href="スタイルファイル名.css" type="text/css">

META要素を指定することで、デフォルトで適用させたい代替スタイルシートを設定させることも可能です。
この設定の場合LINK要素にTITLE属性で指定した値です。 <meta http-equiv="Default-Style" content="TITLE属性の名前">
予備の話:XMLの「xml-stylesheetalternate」処理命令を使用する場合、alternate「オルタネート」属性に値として「yes」を指定します。

固定スタイルシート
常に適用します。
<link rel="stylesheet" href="スタイルファイル名.css" type="text/css">
推薦スタイルシート
代替スタイルシートのデフォルトで適用します。
<link rel="stylesheet" title="指定してスタイルシートに名前を付ける" href="スタイルファイル名.css" type="text/css">
代替スタイルシート
ユーザーが選択時に適用します。
<link rel="alternate stylesheet" title="指定してスタイルシートに名前を付ける" href="スタイルファイル名.css" type="text/css">

@importを使用して、外部スタイルシートの取り込み。
@importを使用すると複数の外部スタイルシートを取り込むことが可能です。(テーブル用・フォント用・背景用・リスト用など分けて製作したもの)

取り込む外部スタイルシートのURL記述方法は、「@import url("ファイル名")」と「@import "ファイル名"」の二種類あります。
@importの使用は、スタイルを指定するよりも前に指定することが基本です。

例:

@import url("Kihon.css") Kihon ;
@import url("Font.css") Font ;

@import "Table.css" Table ;
@import "Form.css" Form ;

body{color:#fff;background-color:#000;}
div{text-align:center;}


 
←BACK

Copyright (c) Producer by System KS. 2001 All rights reserved.