[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

 

CSSの基本書式

CSSの基本書式

セレクタ

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

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

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

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

プロパティ

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

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

CSS を使うことのメリット

  • 文書構造を保ったままスタイルを適用できる。
  • メンテナンス性が向上する。
  • SEO効果やアクセシビリティ向上が期待できる。
  • デヴァイスごとにスタイルを適用できる。

CSS記述の基本

@charset "UTF-8";

 

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

em と rem の違い

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

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

CSSが上手く反映されない

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

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

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

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

【参照】

[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す