CSSの基本書式
セレクタ
セレクタとは、スタイルシートを適用するHTMLの対象のこと。
HTMLタグ、id属性、class属性などが該当する。
1つのセレクタに複数のスタイルを指定する場合
セミコロン(,)で区切る。
プロパティ
適用するスタイルの種類。
値
プロパティによって、設定できる値は異なる。
値の継承
そのプロパティの値が、指定した要素の内部に含まれる別の要素にも適用されるかどうかを示す。
例えば、body 要素に color プロパティで指定すると、body 要素の内部の見出しや段落にも、指定した文字色が適用される。
CSS を使うことのメリット
- 文書構造を保ったままスタイルを適用できる。
- メンテナンス性が向上する。
- SEO効果やアクセシビリティ向上が期待できる。
- デヴァイスごとにスタイルを適用できる。
CSS記述の基本
[php]@charset “UTF-8”;
[/php]
@charset
CSSファイルのエンコードの種類が[UTF-8] であることを明示する。
UTF-8
多言語に対応可能なエンコード。
HTMLファイルにCSSを適用する方法
3つの方法があるが、一般には、link 要素を使う。
head 要素内に、link 要素を記述する。
<link rel="stylesheet" href="style.css">
CSSでのよくある入力ミス
;(セミコロン)の未入力。
全角スペースの使用。
コメント
コメントは、[/]と[/]の間に書く。
/* これはコメントです。 */
CSSで使える主な単位
相対単位
px | モニタの画素(ピクセル)を1とする単位 |
% | 割合を指定 |
em | 親要素の大文字Mの高さ(=フォントサイズ)を1とする単位 |
ex | 親要素の小文字x の高さを1とする単位 |
rem | ルート要素(html要素)の大文字Mの高さを1とする単位 (※IE9以上に対応) |
絶対単位
pt | ポイント(1/72インチ)を1とする単位 |
pc | 1パイカ(12ポイント)を1とする単位 |
mm | ミリメートルを基準とした単位 |
cm | センチメートルを基準とした単位 |
in | インチ(2.54センチメートル)を1とする単位 |
Web制作でよく使う単位は、px,%,em などの相対的な単位である。
em と rem の違い
em と rem は、いずれも「大文字Mの高さ=全角1文字分」を基準とする単位であるが、em は、「直近の親要素に指定されているフォントサイズ」を基準にしており、一方、rem は、「最上位ルートの要素に指定されているフォントサイズ」を基準にして、値が計算される。
つまり、rem を用いた場合、常に同じ最上位のフォントサイズを基準に、rem で指定したフォントのサイズが決まる。
CSSが上手く反映されない
HTML文書内のスタイルシートへのリンクが上手く行ってるかを確認。
;(セミコロン)の未入力などがないかを確認する。
コメント以外の全角入力がないかを確認する。
ファイルをきちんと保存したかを確認。
【参照】
[amazonjs asin=”4798142204″ locale=”JP” title=”HTML5&CSS3標準デザイン講座”]