chopporunga digital train

CSSの書き方

ナビゲーションへ

CSSの初歩

文章構造のみを記述したHTMLでは、視覚を制御することができません。 ここでは、CSS(Cascading Style Sheets)というのを用いて、 ページの見栄えやレイアウトを指定する方法を説明します。 


p{
	color:#F00; /* 文字を赤 */
	background-color:#FFF; /* 背景を白 */
}

上の例でのcolor、background-colorをプロパティと呼びます。 この例で、p要素の文字が赤く、背景が白くなります。

CSSは、プロパティ:値;のように書式で書きます。 また、/*と*/の間は、コメントとなり無視されます。 これをテキストエディタなどで書き、 cssという拡張子をつけて、保存すれば完成です。 作成したスタイルを適用したいHTMLに、link要素を使って、CSSを指定します。 下の例は、HTMLと同じ場所にstyle.cssを置いた場合の例です。

classとid

要素の単位ではなく、classやidを使ってスタイルを指定することも可能です。


.attention{
	color:#F00; /* 文字を赤 */
	background-color:#FFF; /* 背景を白 */
}
#navigation{
	border:0.1em #000 solid; /* 太さ0.1emの黒い実線で囲む */
}

この例で、attentionというclassを持つ要素、navigationというidの要素に対して、 スタイルが適用されます。

疑似クラス、疑似要素

疑似クラスなどを使ったスタイルを細かく適用する例を紹介します。 実際に使う場合は、{}内にプロパティを記述して下さい。

*{}
全要素に適用。
h1#top,h2.a{}
id名がtopのh1要素とクラス名がaのh2要素に適用。
h1[title]{}
title属性が指定されているh1要素に適用。
a[href="index.htm"]{}
href属性の値がindex.htmに指定されているa要素に適用。
span[class|="test"]{}
class属性の値がtest、test-sectionなどに指定されているspan要素に適用。
a:link{}
未訪問のリンクに適用。
a:visited{}
訪問済みのリンクに適用。
input:focus{}
フォーカスの当たっているinput要素に適用。
div:first-child{}
div要素内の最初の子要素に適用。
div:target{}
フラグメントジャンプの対象となったdiv要素に適用。
a img{}
a要素内の全てのimg要素に適用。（子孫セレクタ）
div>a{}
div要素内の直下のa要素に適用。（子供セレクタ） <div><a>〜には適用されますが、 <div><span><a>〜には適用されません。
h1+h2{}
h1要素の直後のh2要素に適用。（隣接セレクタ） 2つの要素は、親が同じでなければいけません。

優先順序

CSSには優先順序があります。


p{
	color:#FFF; /* 文字を白 */
	background-color:#000; /* 背景を黒 */
}
h1,p{
	color:#000; /* 文字を黒 */
	background-color:#FFF; /* 背景を白 */
}

例えば、p要素の文字を白、背景を黒…と記述した後に、 h1要素、p要素の文字を黒、背景を白…と記述すると、 p要素に対しての、最初の記述は後の記述によって上書きされ、 文字は黒、背景色は白になってしまいます。

このように、同じ属性を複数設定すると、最後の値が優先されます。 しかし、この優先度は簡単な記述で変更できます。 


p{
	color:#FFF !important; /* 文字を白 */
	background-color:#000 !important; /* 背景を黒 */
}
h1,p{
	color:#000; /* 文字を黒 */
	background-color:#FFF; /* 背景を白 */
}

!importantを使うと、その値が優先されます。 この例では、h1要素の文字は黒、背景は白になりますが、 p要素は、文字が白、背景が黒のままになります。

また細かい説明は割愛しますが、より細かい指定をした方の記述が優先されます。細かさを詳細度と呼びます。 例えば、h1{}、h1.h{}の両方に該当する場合、後者の方が優先されます。

ラウンドナビゲーション

ページ情報

©2000- s-youhei

最終更新日2011年5月17日