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

 

CSSの基本書式

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

em と rem の違い

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

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

CSSが上手く反映されない

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




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

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

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

【参照】

[amazonjs asin=”4798142204″ locale=”JP” title=”HTML5&CSS3標準デザイン講座”]

(Visited 101 times, 1 visits today)
[`yahoo` not found]
Delicious にシェア
Digg にシェア
[`evernote` not found]
LINEで送る
Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください