基本
- スタイルシートが適用される優先順位
- コメントの記述方法
- スタイルシートの記述方法〔外部・内部・インラインスタイルシート〕
- スタイルシート（CSS）とは？
- 継承
- ベンダープレフィックス〔Vendor Prefixes〕
スタイルシートが適用される優先順位
unknown
インラインスタイルシート ＞ 内部スタイルシート ＞ 外部スタイルシート
以下の例の場合、背景色を外部、内部、インラインの3つで指定していますが、 スタイルシートの適用順位に従い、インラインスタイルシートが最も優先されるため、背景色は黄色になります。
<html>
<head>
<link rel="stylesheet" href="./css/style.css" />
<style type="text/css">
body { background-color:red; }
</style>
</head>
<body style="background-color:yellow;">
<p>本文</p>
</body>
</html>
スタイルシートの記述方法
外部・内部・インラインスタイルシート
unknown
スタイルシートの記述方法には以下の3つがあります。
サイト全体のレイアウトに統一感を出したり、後々のレイアウト更新を考えると、上述の「Webページの構造と見栄えの分離」をするためにも、「外部スタイルシート」にまとめて記述した方がよいです。
スタイルシートを使用しているページには、meta要素のスタイルシート使用の宣言をhead要素内に記述しておきましょう。
<head>
<!-- スタイルシート使用の宣言 -->
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
外部スタイルシート
head要素内に記述します。
rel要素のhref属性に、外部スタイルシートへのパス（絶対or相対パス）を指定します。
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<!-- 外部スタイルシートの読み込み -->
<link rel="stylesheet" href="./path/スタイルシート名.css" />
</head>
/* 外部スタイルシートの中身 */
body { background-color:#ffffff; font-family:Verdana, Osaka, sans-serif; }
p, div { line-height:1.5; }
内部スタイルシート
<!--
セレクタ { プロパティ:値; }
/* プロパティ複数指定は半角スペース区切り */
セレクタ { プロパティ:値; プロパティ:値; ... }
/* セレクタ複数指定はカンマ（,）区切り */
セレクタ, セレクタ, ... { プロパティ:値; }
-->
</style>
内部スタイルシートは、記述したページ内でのみ適用されます。 head要素またはbody要素内に記述できます。 head要素内に記述したスタイルよりbody要素内に記述したスタイルの方が優先されます。
<!--～-->は、
スタイルシート未対応ブラウザの場合に、スタイルシートを無効（コメント化）にして、スタイルシートがそのままブラウザに表示されるのを防ぎます。
<html>
<head>
<!-- head要素内に記述 -->
<style type='text/css'>
body { background-color:#ffffff; font-family:Verdana, Osaka, sans-serif; }
p, div { line-height:1.5; }
</style>
</head>
<body>
<!-- body要素内に記述（head要素内に記述したスタイルシートより優先されます -->
<style type='text/css'>
span.caution { color:red; }
p, div { line-height:1.2; }
</style>
</body>
</html>
インラインスタイルシート
<セレクタ style='プロパティ:値; プロパティ:値; ...'>
※プロパティ複数指定は半角スペース区切り
ページ内のhtml要素に直接スタイルシートを指定します。
インラインスタイルシートは、スタイルシートを記述した要素のみに適用されます。
インラインスタイルシートは、外部・内部スタイルシートよりも優先されます。
<body style='background-color:#ffffff; font-family:Verdana, Osaka, sans-serif;'> <p style='line-height:1.5;'>段落です。</p> <div style='line-height:1.5;'>段落です。</div> </body>
スタイルシート（CSS）とは？
unknown
正式名称は「カスケーディング・スタイルシート（Cascading Style Sheet）」。
略して「スタイルシート」や「CSS」などと呼ばれています。
スタイルシートの目的は、「Webページの構造と見栄えの分離」にあります。
スタイルシートを使うメリット
-
レイアウトの高度化
要素の回り込み設定や要素を重ねるなど、(X)HTMLだけでは不可能なレイアウトができる。
-
更新作業の効率化
レイアウト変更時、スタイルシートを修正するだけでレイアウト変更が可能なため、更新作業にかかる時間を短縮できる。
-
コード記述の簡潔化
何度も使うスタイルをクラス定義できるので、何度も同じスタイル指定を記述する必要がなく、ソースのダイエットになる。
-
サイトデザインの統一化
スタイルシートで全ページ共通のレイアウトを一元管理できるため、サイト全体のデザイン統一が容易になる。
スタイルシートを使うデメリット
-
スタイルシート未対応ブラウザがある
スタイルシート自体をサポートしていないブラウザやユーザーがブラウザの設定でスタイルシートを無効にしている場合があるため、スタイルシートを無効にしてもある程度読めるページにしておく。
-
ブラウザによってサポートされていないプロパティや属性がある
ブラウザやブラウザのバージョンによってサポートされていないプロパティや属性がある。
-
ブラウザによって解釈が異なるプロパティや属性がある
例えばFirefoxとIE6ではpaddingの解釈が異なるなど、同じプロパティや属性を指定しても、ブラウザによって表示のされ方に相違がある場合があり、どのブラウザでも同じようなレイアウトで表示させるようにするのが大変。
継承
unknown
プロパティの値に「inherit」を指定すると、親要素のスタイルを継承します。 子要素に親要素の値を明示的に継承させたい場合のみinheritを指定してください。
ベンダープレフィックス
Vendor Prefixes
2012/3/11
主要なブラウザでは先行してCSS3への対応がすすんでいますが、CSS3はまだ草案段階のため、勧告候補(CR)になるまでは、ブラウザ毎のベンダープレフィックスをCSS3のプロパティの先頭に付けておく必要があります。 ベンダープレフィックスなしで動作するものもありますが、今のところは、「ベンダープレフィックスなしのもの」と「各ブラウザ毎のベンダープレフィックス」を併用して指定しておくのが無難です。
| ブラウザ | Vendor Prefixs | 使用例 |
|---|---|---|
| Firefox | -moz- | -moz-border-radius |
| Webkit(Chrome,Safari) | -webkit- | -webkit-border-radius |
| IE | -ms- | -ms-border-radius |
| Opera | -o- | -o-border-radius |
<style type="text/css">
.cnbox_vp {
margin:10px; padding:7px;
border:1px solid #ccc;
background:#efefef;
/* CSS3角丸プロパティ */
-moz-border-radius:7px; /* Firefox */
-webkit-border-radius:7px; /* Chrome, Safari */
-ms-border-radius:7px; /* IE */
-o-border-radius:7px; /* Opera */
border-radius:7px; /* ベンダープレフィックスなし */
}
</style>
<div class="cnbox_vp">
border-radius
</div>
コメントの記述方法
unknown
コメントしたい部分を、
/*～*/で囲みます。