CSS記述の基本、基礎

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

 

CSSの基本書式

CSSの基本書式

セレクタ

セレクタとは、スタイルシートを適用するHTMLの対象のこと。

HTMLタグ、id属性、class属性などが該当する。

1つのセレクタに複数のスタイルを指定する場合

セミコロン(,)で区切る。

プロパティ

適用するスタイルの種類。

プロパティによって、設定できる値は異なる。

CSS記述の基本

@charset "UTF-8";

 

@charset

CSSファイルのエンコードの種類が[UTF-8] であることを明示する。

UTF-8

多言語に対応可能なエンコード。

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とexの説明

em と rem の違い

em と rem は、いずれも「大文字Mの高さ=全角1文字分」を基準とする単位であるが、em は、「直近の親要素に指定されているフォントサイズ」を基準にしており、一方、rem は、「最上位ルートの要素に指定されているフォントサイズ」を基準にして、値が計算される。

つまり、rem を用いた場合、常に同じ最上位のフォントサイズを基準に、rem で指定したフォントのサイズが決まる。

CSSが上手く反映されない

HTML文書内のスタイルシートへのリンクが上手く行ってるかを確認。

;(セミコロン)の未入力などがないかを確認する。

コメント以外の全角入力がないかを確認する。

ファイルをきちんと保存したかを確認。

【参照】

Bookmark this on Yahoo Bookmark
Bookmark this on Delicious
Bookmark this on Digg
LINEで送る
Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です