ウェブランサー

CSSの特徴

HTMLからHTML+CSSへ

CSSにはいくつかの特徴があります。これらを理解すれば、ウェブサイトを管理する上で作業効率が格段に上がります。また、HTMLだけでは実現できなかったレイアウトや装飾を行うことができるようになるので、確実にマスターしていきましょう。

指定したスタイルが子要素へと継承される

ある要素の中に他の要素を入れると、親要素で指定したスタイルが子要素にも引き継がれるものがあります。これを「継承」と言います。プロパティによって「継承する/しない」が定義されているので、必要に応じて確認して下さい。

HTML
<div style="color: #FF0000;">
テキスト<span style="font-weight: bold;">テキスト</span>テキスト。
</div>

上記の例では、<span>で囲まれた「テキスト」は、太文字として表示されるだけでなく、親要素に含まれる全ての文字列は、<div>に定義されている文字を赤くするプロパティも継承されます。実際の表示は以下のようになります。

表示確認
テキスト テキスト テキスト。

複数のセレクタをグルーピングできる

CSSでは、複数のセレクタに対して同じプロパティを同時に指定することができます。セレクタをカンマ(,)で区切って連続で記述することで、その要素に対して同じスタイルを適用することが可能になります。

HTML
<head>
<style type="text/css">
<!--
h1, h2 {
 color: #FF0000;
 font-size: 18px;
}
-->
</style>
</head> 

上記の例では、<h1>と<h2>の要素に全く同じスタイルを指定しています。

id属性、class属性でタグに名前を付けてセレクタに指定できる

同じ種類のタグに違うスタイルを指定したい場合には、id属性やclass属性で名前を付けたタグを用意し、その名前をセレクタに用いることによって個別のスタイルを適用する事が可能となります。複数のページの中に同じパターンでスタイルを適用したい要素がある場合に、名前とスタイルを共通化しておくと管理がとても楽になります。

id属性の例
<div id="content">
class属性の例
<div class="box">
id名をセレクタにする場合
id名の先頭に「#」を付けて指定(#content)
class名をセレクタにする場合
class名の先頭に「.」を付けて指定(.box)

以下の例では、id[#menu]とclass[.contents]を定義しています。同じレイアウトを複数のページで使いまわす場合、途中でスタイルを変えたくなったら、わざわざ1ページずつHTMLファイルを編集しなくても、CSSの指定を変えるだけで全てのページを一括で変更することができます。

CSS
#menu {
 width: 300px;
 float: left;
 font-size: 14px;
 font-weight: bold;
}
.contents {
 width: 500px;
 float: right;
}
HTML
<div id="menu">
	<ul>
		<li>メニュー01</li>
		<li>メニュー02</li>
		<li>メニュー03</li>
		<li>メニュー04</li>
	</ul>
</div>

<div class="contents">
コンテンツ、コンテンツ、コンテンツ、コンテンツ
</div>

このように、管理の面から見てもid属性やclass属性を活用してスタイルを分かりやすく整理しておくことをお薦めします。

優先順位を高くする

CSSは、ブラウザのデフォルト・スタイルシート、ユーザー・スタイルシート、ページ作者のスタイルシートの順に優先度が高くなります。つまり、こちら側で用意しておいたスタイルシートでも、閲覧する側が優先順位の高いスタイルを表示するように設定していた場合には無効になってしまいます。しかし、どうしてもこちらで意図したように表示しないと不都合が生じる場合には、優先度を高くするように命令することができます。

CSSでは、特定のプロパティに「!important」を指定すると、そのプロパティの優先度が強くなります。基本的な優先度を越えて強制的にスタイルを適用させたいプロパティがある場合に活用してください。但し、多用しすぎると管理しづらくなったり、閲覧者の不快を誘う可能性があるので、ほどほどにしましょう。

CSS
h1 {
 color: #FF0000 !important;
} 

上記の例は、優先的に文字を赤くしたい場合に指定する内容になります。

CSSリファレンス

CSSって何? 初めての方はこちらからお読み下さい
CSSの書き方 CSSの書き方について基本的な解説です
CSSの特徴 CSSの特徴を理解して有効に活用しましょう
CSSで使えるセレクタ セレクタとはスタイルを適用する対象を指定するものです
CSSで使える単位 CSSで使える単位の一覧です
ブロックレベルとインライン ブロックレベル要素とインライン要素について詳しく解説
idとclassについて 要素にidとclassで名前を付ける
余白と外枠の関係 余白や外枠を指定する際のコツについて
DOCTYPE宣言・DOCTYPEスイッチ [!DOCTYPE]の使い方について
ユニバーサルセレクタ(*)について ユニバーサルセレクタ(全称セレクタ)を使えば全てのタグを一括で指定できます