Search
  1. *〔ユニバーサルセレクタ〕
  2. E〔タイプセレクタ、グルーピング(複数のセレクタに同じスタイルを指定)〕
  3. 1つのセレクタに複数のスタイルを同時に指定〔ボックスナビゲーションの例〕
  4. 継承
  5. クラスとID
  6. E F〔子孫セレクタ〕
  7. E > F〔子セレクタ〕
  8. E + F〔隣接セレクタ〕
  9. E ~ F〔兄弟セレクタ〕

*
ユニバーサルセレクタ

unknown

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

ユニバーサルセレクタは、ブラウザの際をなくすために用いられるリセットCSSでよく使います。

* { margin:0; padding:0; }#footer * { color:#666; }のように記述すると、全要素や特定の要素内の全要素に対して同じスタイルを適用することができます。

ただし、ユニバーサルセレクタを使用しても、該当要素内のテーブルのセル(th,td要素)にはユニバーサルセレクタに指定したスタイルが適用されないため、th, td { font-size:10px; }のように別途記述する必要があります。

<style type="text/css">
	#d_universalselector * {
		color:red;
	}
</style>

<div id="d_universalselector">
	<p>Et sociis sit phasellus etiam, pulvinar. Duis dapibus pulvinar eu adipiscing cursus, augue rhoncus elit sit, rhoncus non adipiscing urna tristique augue aenean pid et auctor sed sagittis? Vel arcu, dis porta pulvinar velit aenean nunc, pid amet magnis turpis? Et rhoncus porta et proin elementum odio elit, hac aliquet.</p>
	<p>Ridiculus ridiculus aenean a platea! Cum lectus aenean etiam. Odio, tempor vut est ultrices vel, scelerisque dictumst? Ridiculus tincidunt, lorem vut, cursus sagittis arcu ut placerat rhoncus augue sit? Aenean integer duis enim? Mauris sed duis. Eros penatibus parturient dapibus dignissim elementum augue elementum velit! Cras urna purus sed.</p>
</div>
<p>Et sociis sit phasellus etiam, pulvinar. Duis dapibus pulvinar eu adipiscing cursus, augue rhoncus elit sit, rhoncus non adipiscing urna tristique augue aenean pid et auctor sed sagittis? Vel arcu, dis porta pulvinar velit aenean nunc, pid amet magnis turpis? Et rhoncus porta et proin elementum odio elit, hac aliquet.</p>
<p>Ridiculus ridiculus aenean a platea! Cum lectus aenean etiam. Odio, tempor vut est ultrices vel, scelerisque dictumst? Ridiculus tincidunt, lorem vut, cursus sagittis arcu ut placerat rhoncus augue sit? Aenean integer duis enim? Mauris sed duis. Eros penatibus parturient dapibus dignissim elementum augue elementum velit! Cras urna purus sed.</p>

Et sociis sit phasellus etiam, pulvinar. Duis dapibus pulvinar eu adipiscing cursus, augue rhoncus elit sit, rhoncus non adipiscing urna tristique augue aenean pid et auctor sed sagittis? Vel arcu, dis porta pulvinar velit aenean nunc, pid amet magnis turpis? Et rhoncus porta et proin elementum odio elit, hac aliquet.

Ridiculus ridiculus aenean a platea! Cum lectus aenean etiam. Odio, tempor vut est ultrices vel, scelerisque dictumst? Ridiculus tincidunt, lorem vut, cursus sagittis arcu ut placerat rhoncus augue sit? Aenean integer duis enim? Mauris sed duis. Eros penatibus parturient dapibus dignissim elementum augue elementum velit! Cras urna purus sed.

Et sociis sit phasellus etiam, pulvinar. Duis dapibus pulvinar eu adipiscing cursus, augue rhoncus elit sit, rhoncus non adipiscing urna tristique augue aenean pid et auctor sed sagittis? Vel arcu, dis porta pulvinar velit aenean nunc, pid amet magnis turpis? Et rhoncus porta et proin elementum odio elit, hac aliquet.

Ridiculus ridiculus aenean a platea! Cum lectus aenean etiam. Odio, tempor vut est ultrices vel, scelerisque dictumst? Ridiculus tincidunt, lorem vut, cursus sagittis arcu ut placerat rhoncus augue sit? Aenean integer duis enim? Mauris sed duis. Eros penatibus parturient dapibus dignissim elementum augue elementum velit! Cras urna purus sed.

E
タイプセレクタ、グルーピング(複数のセレクタに同じスタイルを指定)

unknown

E {}
E1,E2,E3 {}

複数のセレクタに同一のスタイルを指定するには、カンマ区切りで指定します。 指定する数に制限はありません。 複数の要素にフォントや余白を一括して指定する場合に、よく使われます。

共通部分は、一括してまとめて指定しておくと更新時にも修正が楽です。
個別にスタイルを追加する場合は、それぞれ記述する必要があります。

1つのセレクタに複数のスタイルを同時に指定
ボックスナビゲーションの例

unknown

1つの要素に複数のクラスを指定する場合は半角スペース区切りでクラス名を指定します。 ベースとなるスタイルは同じで、文字色だけ変えたい場合などに便利です。

Mac版IEでは、半角スペース区切りで複数のクラスを指定することはできません(未サポート)。 そのため複数指定した場合、一番左に指定したスタイルしか適用されません。

以下の例では、共通のボックススタイル(mboxクラス)にプラスして、背景色・文字色の指定をそれぞれのボックス毎に指定しています。

<style type="text/css">
	/* ボックスに共通 */
	.mbox, .mbox * {
	margin:0; padding:0;
	}
	.mbox {
	margin:5px 0; padding:5px;
	width:200px;
	border:1px solid #999;
	}
	.mbox div {
	padding:0 5px;
	border-width:1px;
	border-style:solid;
	border-color:#fff #ccc #ccc #fff;
	background-color:inherit;
	}
	.mbox ul  {
	margin-left:20px;
	list-style:square;
	}
	.mbox p {
	text-align:right;
	}
	/* ボックスの背景色・文字色 */
	.bgGray { /* グレー系 */
	background-color:#eee;
	color:gray;
	}
	.bgBlue { /* ブルー系 */
	background-color:#e0f7f4;
	color:navy;
	}
	.bgPink { /* ピンク系 */
	background-color:#f7e2f4;
	color:purple;
	}
</style>

<div class="mbox bgGray">
	<div>グレー系</div>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
	</ul>
	<p><a href="javascript:void(0)">more &raquo;</a></p>
</div>
<div class="mbox bgBlue">
	<div>ブルー系</div>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
	</ul>
	<p><a href="javascript:void(0)">more &raquo;</a></p>
</div>
<div class="mbox bgPink">
	<div>ピンク系</div>
	<ul>
		<li>menu1</li>
		<li>menu2</li>
	</ul>
	<p><a href="javascript:void(0)">more &raquo;</a></p>
</div>
グレー系
  • menu1
  • menu2

more »

ブルー系
  • menu1
  • menu2

more »

ピンク系
  • menu1
  • menu2

more »

継承

unknown

要素を入れ子にしている場合、親要素のスタイルが子要素に継承されます。

子要素に同じプロパティが含まれる場合は上書きされず、子要素のスタイル指定が適用されますが、親要素にあって子要素で指定していない(省略した)プロパティは、親要素のスタイルが適用されます。

<style type="text/css">
	.s1 { color:red; font-weight:bold; } /* 赤字+太字 */
	.s2 { color:blue; } /* 青字 */
</style>

<span class="s1">親要素に指定したスタイル(太字)が<span class="s2">子要素</span>に継承されています。</span>
親要素に指定したスタイル(太字)が子要素に継承されています。

inheritによる継承

明示的に親要素のスタイルを子要素に継承する場合は、inheritを使用します。

<style type="text/css">
	.bold { font-weight:bold; }
	.ss1 { font-weight:normal; } /* 通常の太さ */
	.ss1  .bold { font-weight:inherit; color:red; }
</style>

<span class="ss1">子要素に指定したスタイル(太字)は、inheritを指定しているため、親要素に指定したスタイル(通常の太さ)が<span class="bold">強制的に子要素に継承</span>されています。</span>
子要素に指定したスタイル(太字)は、inheritを指定しているため、親要素に指定したスタイル(通常の太さ)が強制的に子要素に継承されています。

クラスとID

unknown

E.クラス名 { プロパティ:値; }
E#ID名 { プロパティ:値; }

ページ内で一度だけ使用するユニークなスタイルは「ID」で定義し、ページ内で何度も繰り返し使用するスタイルは「クラス」で定義します。 使用する際、セレクタで、class='クラス名'、id='ID名' として呼び出します。

クラス

.class名 { プロパティ: 値; }
セレクタ .class名 { プロパティ: 値; }

クラス名の使用に制限はありません。ページ内で何度でも繰り返し指定可能です。

同じクラス名でも、要素によって異なるスタイルを適用させることもできます。 例えば、全要素を対象にしているlineクラスがあるとします。 lineクラスを指定しているdiv要素にだけ、違ったスタイルを適用したい場合は、div.line { ... }のようにクラス名の前にセレクタを指定することで、特定のセレクタだけにスタイルを指定することができます。

<style type="text/css">
	/* 全要素のlineクラスに適用 */
	*.line  {
		color:blue;
		border-bottom:2px solid blue;
	}
	/* div要素のlineクラスにのみ適用 */
	div.line {
		border-bottom-style:dotted;
	}
</style>

<span class="line">span要素にlineクラスを指定</span>
<p class="line">p要素にlineクラスを指定</p>
<div class="line">div要素のlineクラスのみ線種を点線に</div>
span要素にlineクラスを指定

p要素にlineクラスを指定

div要素のlineクラスのみ線種を点線に

ID

#ID名 { プロパティ: 値; }
セレクタ#ID名 { プロパティ: 値; }

上述の「クラス」と違い、「ID」は、ページ内につき1つのセレクタにのみ指定可能です。 ページ内の複数のセレクタに同じID名を指定してもスタイルは適用されますが、文法的には間違いです。

ID名の前にセレクタを指定する方がスタイル適用の優先度が高くなります。

<style type="text/css">
	#sample1 .waku {
		padding:30px 5px;
		width:80%;
		border:1px #ddd solid;
		background-color:#eeeeee;
	}
	div#sample1 .waku {
		background-color:#ffffcc; /* セレクタを指定しているので優先される */
	}
</style>

<div id="sample1">
	<p class="waku">
		#sample1 .wakuでは背景色に"#eeeeee"を指定していますが、<br>
		ID名の前にセレクタを指定しているdiv#sample1.wakuの<br>
		背景色"#ffffcc"のスタイル適用が優先されます
	</p>
</div>

<hr />

<style type="text/css">
	#sample2 p {
		padding:5px;
		width:80%;
		border:1px #ddd solid;
		background-color:#e8e8e8;
		color:blue;
	}
</style>

<div id="sample2">
	<p>
		ID名.要素という風に指定すると、
		IDを指定した要素内にある特定の要素だけにスタイルが適用されます。
		この例ではsample2というIDを指定した要素内のp要素に
		特定のスタイルを指定しています。
	</p>
</div>
<p>
	こちらはp要素ですが、sample2というIDを指定した要素の外にあるため、
	スタイルが適用されません。
</p>

#sample1 .wakuでは背景色に"#eeeeee"を指定していますが、
ID名の前にセレクタを指定しているdiv#sample1.wakuの
背景色"#ffffcc"のスタイル適用が優先されます


ID名.要素という風に指定すると、 IDを指定した要素内にある特定の要素だけにスタイルが適用されます。 この例ではsample2というIDを指定した要素内のp要素に 特定のスタイルを指定しています。

こちらはp要素ですが、sample2というIDを指定した要素の外にあるため、 スタイルが適用されません。

E F
子孫セレクタ

unknown

E F { プロパティ:値; }

セレクタの相関関係でスタイルを指定します。
親要素(Eセレクタ)内にあるすべての子要素(Fセレクタ)にのみスタイルが適用されます。

例えば、p要素内のspan要素にのみスタイルを適用したい場合は、下記のように記述します。 p要素内のspan要素にのみスタイルが適用されます。

<style type="text/css">
	#d_ef p strong {
		font-size:1.2em;
		font-weight:bold;
	}
	#d_ef p span {
		background-color:red;
		color:#fff;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 5px;
	}
</style>

<div id="d_ef">
	<p>いつも<strong>800円</strong>のところ、本日に限り<span>750円</span>でご奉仕!</p>
</div>

いつも800円のところ、本日に限り750円でご奉仕!

E > F
子セレクタ

unknown

E > F { プロパティ:値; }

セレクタの親子関係でスタイルを指定します。
親要素(Eセレクタ)内にある子要素(Fセレクタ)にのみスタイルが適用されます。 セレクタの親子関係が一目で分かるように記述することができます。

<style type="text/css">
	#d_child p > strong > em {
		font-size:1.2em;
		font-weight:bold;
	}
	#d_child p > span > em {
		background-color:red;
		color:#fff;
		font-size:1.2em;
		font-weight:bold;
		padding:2px 5px;
	}
</style>

<div id="d_child">
	<p>いつも<strong><em>800</em>円</strong>のところ、本日に限り<span><em>750</em>円</span>でご奉仕!</p>
</div>

いつも800のところ、本日に限り750でご奉仕!

E + F
隣接セレクタ

unknown

E + F { プロパティ:値; }

セレクタの兄弟関係でスタイルを指定します。
兄要素(Eセレクタ)の直後にある弟要素(Fセレクタ)にのみスタイルが適用されます。

<style type="text/css">
	#d_imprecedend h2+h3 {
		color:red;
	}
</style>

<div id="d_imprecedend">
	<h2>タイトルH2</h2>
	<h3>タイトルH3</h3>
	<p>Vel nisi, lectus a integer duis vel proin aenean pid, velit pellentesque! Est dolor, pellentesque sit? Odio mid! Mid vel, platea, odio urna montes vel aenean magna et amet amet.</p>
	<h3>タイトルH3</h3>
	<p>Nec a ac sit mattis, lundium tristique urna pulvinar mattis ultrices nunc diam porta nascetur cras arcu. Velit, auctor porttitor nec ac est. Arcu sed, porta rhoncus porttitor tortor.</p>
	<h3>タイトルH3</h3>
	<p>Mid non mattis tempor rhoncus? Magnis lacus nec ut etiam augue? Elementum adipiscing magna, augue, tristique mid, ut pulvinar non auctor et dignissim. Et sit et nascetur augue porttitor.</p>
</div>

タイトルH2

タイトルH3

Vel nisi, lectus a integer duis vel proin aenean pid, velit pellentesque! Est dolor, pellentesque sit? Odio mid! Mid vel, platea, odio urna montes vel aenean magna et amet amet.

タイトルH3

Nec a ac sit mattis, lundium tristique urna pulvinar mattis ultrices nunc diam porta nascetur cras arcu. Velit, auctor porttitor nec ac est. Arcu sed, porta rhoncus porttitor tortor.

タイトルH3

Mid non mattis tempor rhoncus? Magnis lacus nec ut etiam augue? Elementum adipiscing magna, augue, tristique mid, ut pulvinar non auctor et dignissim. Et sit et nascetur augue porttitor.

E ~ F
兄弟セレクタ

unknown

E ~ F { プロパティ:値: }

セレクタの兄弟関係でスタイルを指定します。
兄要素(Eセレクタ)より後に記述されているすべての弟要素(Fセレクタ)にスタイルが適用されます。

<style type="text/css">
	#d_precedend h2~h3 {
		color:red;
	}
</style>

<div id="d_precedend">
	<h2>タイトルH2</h2>
	<h3>タイトルH3</h3>
	<p>Vel nisi, lectus a integer duis vel proin aenean pid, velit pellentesque! Est dolor, pellentesque sit? Odio mid! Mid vel, platea, odio urna montes vel aenean magna et amet amet.</p>
	<h3>タイトルH3</h3>
	<p>Nec a ac sit mattis, lundium tristique urna pulvinar mattis ultrices nunc diam porta nascetur cras arcu. Velit, auctor porttitor nec ac est. Arcu sed, porta rhoncus porttitor tortor.</p>
	<h3>タイトルH3</h3>
	<p>Mid non mattis tempor rhoncus? Magnis lacus nec ut etiam augue? Elementum adipiscing magna, augue, tristique mid, ut pulvinar non auctor et dignissim. Et sit et nascetur augue porttitor.</p>
</div>

タイトルH2

タイトルH3

Vel nisi, lectus a integer duis vel proin aenean pid, velit pellentesque! Est dolor, pellentesque sit? Odio mid! Mid vel, platea, odio urna montes vel aenean magna et amet amet.

タイトルH3

Nec a ac sit mattis, lundium tristique urna pulvinar mattis ultrices nunc diam porta nascetur cras arcu. Velit, auctor porttitor nec ac est. Arcu sed, porta rhoncus porttitor tortor.

タイトルH3

Mid non mattis tempor rhoncus? Magnis lacus nec ut etiam augue? Elementum adipiscing magna, augue, tristique mid, ut pulvinar non auctor et dignissim. Et sit et nascetur augue porttitor.

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women