CSS基本
スタイルの指定方法
CSSにてスタイル指定する方法です。基本的には外部スタイルシートを読み込みますのでここではstyle.cssファイルに記述することを前提とします。
|
1 2 3 4 5 6 |
@charset "utf-8"; p { color:#FF0000; font-size:24px; } |
| 行 | 説明 |
|---|---|
| 1 | 文字コードutf-8を使うことを明示 |
| 3 | p要素に対して{}内のスタイルを適用する指定 |
| 4 | フォントのカラーを赤に指定 |
| 5 | フォントのサイズを24pxに指定 |
何（セレクタ）に対して指定をするか、{}内で具体的に何を（プロパティ）どうするか（値）を指定します。
「:」はプロパティと値の区切り文字で「;」でひとつの指示が終了します。
スタイルシートを読み込む方法
CSSを記述したスタイルシートを読み込むには<head>タグ内部に記述します。
|
1 2 3 4 5 6 |
5行目で外部ファイルのスタイルシート（style.css）を読み込む指定をしています。※HTML5でtype属性などの記述は必須ではなくなりシンプルになりました。
複数のスタイルシートを読み込む方法
スタイルシートの読み込みは複数記述することが可能です。同じものに対して異なる指定が競合した場合は、後から指定したものが優先されます。
下記は表示される端末の幅によって読み込むスタイルシートを変える例です。
|
1 2 3 |
| 行 | 説明 |
|---|---|
| 2 | 端末の幅が320px以下のとき追加でsp.cssを読み込む |
| 3 | 端末の幅が980px以上のとき追加でdesktop.cssを読み込む |
また、スタイルシートの中で別のスタイルシートを読み込む指定も可能です。
下記はstyle.cssの中で別のスタイルシートを読み込む指定を入れた例です。
|
1 2 |
@import url(./sp.css) screen and (max-width:320px); @import url(./desktop.css) screen and (min-width:980px); |