【XHTML＋CSS】02_CSSのキホン

ホーム > すべて > 【XHTML＋CSS】02_CSSのキホン

2008-11-09

CSS Nite ビギナーズの連動書籍「現場のプロから学ぶXHTML+CSS）」を元に、自分自身が理解しやすいような形で要約メモしておきたいと思います。

CSSの書き方

CSSのバージョン

ブラウザのサポート状況から、通常はCSS2.1を使用する。

セレクタ、プロパティ、値（value）

1	p（セレクタ） { color（プロパティ）: red（値[value]）; }

コメントの書き方

/* ○○ */

指定できる値

指定できる値、初期値、適用できる要素があらかじめ標準仕様で決められている。

利用できる単位

pt（ポイント1/72インチ）
pc（パイカ/12px）
in（インチ/2.54cm）
cm（センチメートル）
mm（ミリメートル）
px（ピクセル）
em（フォントの大きさと1とする単位）
ex（小文字xの大きさを1とする単位）
%（パーセンテージ）

CSSの適用方法

XHTMLにCSSを適用する方法

ふわわしいのは上の2つ。

link要素でCSSファイルを読み込む

1	<link rel="stylesheet" type="text/css" href="css/style.css" />

@importでCSSファイルを読み込む

1
2
3

<style type="text/css">
@import "css/style.css";<br />
</style>

style要素でCSSソースを指定

1
2
3

<style type="text/css">
p { margin: 15px; } 
</style>

style属性でCSSソースを指定

1	<p style="margin: 15px;">テキスト</p>

CSS内での文字コードの指定

特に理由がなければ、XHTMLとCSSの文字コードを同じにしておく。

1	@charset "UTF-8";

CSSを適用するメディアの指定

1	<link rel="stylesheet" type="text/css" media="<strong>all</strong>" href="css/import.css" title="Default Style" />

all（全てのメディア）
screen（一般的なパソコンのモニタ）
projection（プロジェクター、映写機など）
tv（テレビ、テレビゲーム機など）
hand-held（ケータイ端末）
tty（固定ピッチフォントで表示される端末）
print（プリンタ）
speech（音声読み上げ）
braille（点字ピンディスプレイなど）
embossed（点字プリンタなど）

セレクタ

セレクタの種類

*（ユニバーサルセレクタ：全ての要素）
E（タイプセレクタ：その要素E）
EF（子孫セレクタ：親要素Eに含まれる子孫要素F）
E>F（子セレクタ：親要素Eに含まれる直接の子要素F）
E+F（隣接セレクタ：兄要素Eの直後の弟要素F）
.classname（クラスセレクタ：class属性値がclassnameの要素）
#idname（IDセレクタ：id属性値がidnameの要素）
E[attr]（属性セレクタ：要素Eがその属性attrをもつ場合）
E[attr="value"]（属性セレクタ：要素Eがその属性attrと値valueをもつ場合）
E[attr=〜"value"]（属性セレクタ：要素Eがその属性を持ち、属性値が空白区切りで複数指定されており、その属性値valueが含まれている場合）
E[attr|="value"]（属性セレクタ：要素Eがその属性を持ち、属性値がハイフン区切りで複数指定されており、その属性値valueが前方一致で含まれている場合）

疑似クラス、疑似要素の種類

:link（未訪問リンクのとき）
:visited（既訪問リンクのとき）
:hovor（カーソルオンされたとき）
:focus（フォーカスされたとき）
:active（アクティブになったとき）
:lang()（要素にその文字コードが指定されているとき）
:first-child（要素の中の最初の子要素）
:first-line（要素の1行目のみ）
:first-letter（要素の最初の1文字目のみ）
:before（要素の直前に内容を生成）
:after（要素の直後に内容を生成）

セレクタの組み合わせ

IDやクラス名を元に、子孫セレクタでスタイルを適用。

1	#header h1 a {}

セレクタのグループ化

カンマ区切りでグループ化し、同じスタイルを同時に適用させる。

1
2
3

h1, h2, h3 {
  　color; #ff6600;
  }

プロパティ

ボックスモデルのプロパティ

widthから、paddingとborderを引いておくこと。

content（要素に含まれるテキストや画像などの内容）
padding（内容とボーダーとの余白）
border（枠線）
margin（ボーダーと他の要素との間隔）

ボックスモデルのプロパティ（margin、paddingプロパティ）

値の数によって上下左右のどこに適用されるかが変わる。

値が1つ（上下左右）
値が2つ（上下、左右）
値が3つ（上、左右、下）
値が4つ（上、下、左、右）

視覚整形モデルのプロパティ（positionプロパティ）

relative（相対配置）
absolute（絶対配置）
fixed（固定配置）

relativeと指定した場合に、要素本来の位置が基準になる。 absoluteは親ボックスの位置が基準になる（親ボックスはrelativeなどの値が指定され、配置方法が決められていること。決められていない場合は、さらに先祖要素にさかのぼる。それでも存在しない場合には、最終的にbody要素が基準位置となる）。

視覚整形モデルのプロパティ（floatプロパティ）

#main {
float:left; /*左にフロート*/
}
#main {
float:right; /*右にフロート*/
}
#main {
clear:both; /*フロートのクリア*/
}

視覚効果のプロパティ

visibilityプロパティ

display:visible /*可視*/
display:none /*非表示（ボックスは生成されない）*/
display:hidden /*不可視（ボックスは生成される）*/

overflowプロパティ

ボックスからはみ出す場合の表示方法

overflow:visible /*ボックスからはみ出す*/
overflow:hidden /*はみ出た部分は表示しない*/
overflow:scroll /*入りきらない部分はスクロールして見られる*/
overflow:auto /*ブラウザにまかせる（一般的には、スクロールして見られる）*/

文字色・背景のプロパティ

color（文字色）値：#rrggbbなど
background-color（背景色）値：#rrggbb、tranceparentなど
background-img（背景画像）値：url(…)、none
background-repeat（背景画像の繰り返し方法）値：repeat、repeat-x、repeat-y、no-repeatなど
background-attachment（背景画像の移動・固定）値：scroll、fixed
background-position（背景画像の開始位置）値：left、right、center、top、bottom、%、長さ
background（背景の一括指定）値：各プロパティの値をスペース区切りで

フォント・テキストのプロパティ

font-family（フォントの種類）値：フォント名をカンマ区切りで複数指定
font-style（フォントのスタイル）値：normal、italic、oblique
font-weight（フォントの太さ）値：normal、boldなど
font-size（フォントの大きさ）値：長さ、%、mediumなど
font（フォントの一括指定）値：各プロパティの値をスペース区切りで
text-indent（テキストの行頭の字下げ幅）値：長さ、%
text-align（テキストの行揃え）値：left、right、center、justify
text-decoration（テキストの装飾）値：underline、line-throught、noneなど
text-transform（テキストの大文字・小文字の変換）値：capitalize、uppercase、lowcase、none
letter-spacing（テキストの文字間隔）値：normal、長さ
word-spacing（テキストの単語間隔）値：normal、長さ

表のプロパティ

caption-side（表のキャプション位置）値：top、bottom
table-layout（表のレイアウト方法）値：auto、fixed
border-collapse（表ボーダーの表示方法）値：coolapse、separate
border-spacing（表ボーダー同士の間隔）値：長さ
empty-cells（空セルの表示方法）値：show、hide

スタイルの優先順位

スタイルの詳細度

ユニバーサルセレク（*） < タイプセレクタ < クラスセレクタ（.classname）、属性セレクタ（E[attr="value"]） < IDセレクタ（#idname）

スタイルの継承

ある要素に適用したスタイルは子孫要素に自動的に引き継がれるという特徴がある（継承）。

ユーザースタイルシート

制作者が作ったCSSのほか、ブラウザにあらかじめ用意されたスタイル、ユーザーが作ったスタイルがある。これらの優先順位は

ブラウザのデフォルトスタイル < ユーザスタイル < 制作者スタイル

プロパティに

1	!important

をつけてユーザースタイルを最優先で適用される仕組みがあるが、制作者の!importantよりもユーザーの!importantのほうが優先される。

外部リンク

こちらの関連記事もあわせてどうぞ

XHTML+CSS

コメント (0) トラックバック (0) コメントをどうぞトラックバック

コメントはまだありません。

トラックバックはまだありません。

【インターフェイスデザイン】01_ユーザの行動【XHTML＋CSS】01_XHTMLのキホン

TokyoHeadTerminal［東京ヘッドターミナル］