CSS最速要点マスター

プログラムの最速マスターが流行っているのでCSS版を作ってみました。
ただ文法マスターって言うのは少し違う気がしますし、もうすでに作成されている
ようなので、こちらでは要点に絞っています。
入門書を読んだ後で次のステップに上がる時に読み直す程度の基本がさっと書いてます。
※クオリティは要約レベルです。不明な点や疑問点はより内容の濃いサイトでお調べ下さい。
出来れば今後「レイアウト編」とか「テクニック編」を作成したいと思います。

○対象
・取り急ぎ要点だけ抑えたい人
・入門書は読んでおさらいしたい人
・不足分や不明点は検索して調べれるポテンシャルの高い人（ごめんなさい）

○記述
■基本

セレクタ {
プロパティ:値;
プロパティ:値;
}

セレクタとは簡単に言うとスタイルを適用する対象（または範囲）の事。
HTMLのタグや後に解説するIDやCLASSがそれにあたります。
セレクタは「{」から始まり「}」で終わります。

プロパティとは簡単に言うと適用するスタイルの内容です。
プロパティは[:]から始まり「；」で終わります。
プロパティは連続して指定出来ます。
各プロパティについては「よく使うプロパティ」で解説。

○セレクタの種類
※最低限必要なもののみ

■タイプセレクタ
各要素毎にそれぞれのスタイルを適用。

E {
プロパティ:値;
}

E要素に適用。

例

h1 {
font-size:16px;
}

p {
font-size:12px;
}

h1要素に文字サイズ14pxを指定を適用。
p要素に文字サイズ12pxを指定を適用。

■クラスセレクタ

E.myClass {
プロパティ:値;
}

myClassというCLASS名のE要素に適用

例

p.text{
font-size:14px;
}

textというCLASS名のp要素に文字サイズ14pxを指定を適用。

■IDセレクタ

E#myId {
プロパティ:値;
}

myIdというID名のE要素に適用。

例

div#main {
width:300px;
}

mainというID名のdiv要素に横幅（width）300pxの指定を適用。

■子孫セレクタ

E F {
プロパティ:値;
}

E要素の子孫にあたるF要素に適用。

例

#main p {
margin-bottom: 10px;
}

#main(ID main)内のp要素に下方向にマージン（余白）10pxを指定。

■擬似クラス

E:link
未訪問の時。

E::visited
訪問済みの時。

E::hover
要素にカーソルを重ねた時。

※IE6～7はa要素にみ対応。

例

a:link {
color:#006699;
}

a:visited {
color:#006666;
}

a:hover {
color:#006699;
text-decoration:underline;
}
/*色は適当ですｗ*/

○外部ファイル化
基本的にCSSは外部ファイル化して利用します。

ファイルは拡張子を【.css】とし保存。
ファイルの文頭に文字コードを指定。
後は普通に定義を記述します。

■記述

@charset "文字コード";

セレクタ {
プロパティ:値;
}

例：[style.css]として保存する。
文字コードを【utf-8】に指定。
[style.css]として保存。

@charset "utf-8";

p {
font-size:12px;
}

○適用方法
CSSの適用方法は以下の3つ

1.style属性を用いて、各要素に直接指定。
2.head要素の範囲内に、style要素によって指定。
3.外部ファイル化して読み込む

尚、1と2については非推奨ですので、ここでは割愛します。
万が一必要になったら検索して下さい。殆ど必要ないです・・・

■外部ファイル化して読み込む。

<link href="「cssの保存先」/「cssファイル」" rel="stylesheet" type="text/css"media="デバイス" />

href属性で先程の外部ファイル化したCSSファイルを読み込む。
【media=”デバイス”】メディアタイプは対象とするデバイスを指定。

例　「css」フォルダーの「style.css」を読み込む。
※尚、htmlもCSSフォルダーもサイトの直下にあるとする。

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

■デバイス（代表的なもののみ）

all：全てのデバイスを対象。
screen：PCのディスプレイを対象。
print：印刷用出力、印刷プレビューを対象。

○よく使うプロパティ
以下、使用頻度の高いもののみ抜粋。
（個人的に）使用頻度の高いものは細かく書いていますが、
使用頻度の低いものはショートハンドのみです。
必要を生じたら検索して下さい。

※ショートハンドは時計回り

■視覚整形モデル
float

div#primary{
float:left;
}
/*左に回り込む*/

div#aside{
float:right;
}
/*右にに回り込む*/

clear

div#footer{
clear:both;
}
/*回り込みを解除*/

display

li{
display:block;
}

div{
display:inline;
}

「block」：インラインレベル要素をブロックレベル要素（と同じ挙動に）する。
「inline」：ブロックレベル要素をインラインレベル要素（と同じ挙動に）する。

positionと位置のプロパティ

div#section{
position:relative;
top:10px;
left:200px;
}
/*通常の位置から相対配置*/

div#section{
position:absolute;
top:10px;
left:200px;
}
/*絶対配置*/

「relative」を指定する事で現在位置からのtop, right, bottom, leftプロパティで指定。
「absolute」を指定する事で絶対位置からのtop, right, bottom, leftプロパティで指定。
尚、入れ子の場合親ブロックに「relative」が指定されている場合、基点（x:0,y:0）は親ブロックが基準となる。

位置の指定は「top, right, bottom, left」プロパティでそれぞれ指定。

■ボックスモデル
width

div#section{
width:200px;
}

横幅の指定。

height

div#section{
height:200px;
}

縦幅の指定。

margin(外側の余白)

/*上右下左を個別に指定*/
div#section{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
}

/*ショートハンド*/
div#section{
margin:10px 10px 10px 10px;
}

/*全て同じ場合は省略して指定可能*/
div#section{
margin:10px;
}

padding(内側の余白)

/*上右下左を個別に指定*/
div#section{
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left10px:;
}

/*ショートハンド*/
div#section{
padding:10px 10px 10px 10px;
}

/*全て同じ場合は省略して指定可能*/
div#section{
padding:10px;
}

border（枠線）

/*上右下左を個別に指定*/
div#section{
border-top:1px #cccccc solid;
border-right:1px #cccccc solid;
border-bottom:1px #cccccc solid;
border-left:1px #cccccc solid;
}

/*全て同じ場合は省略して指定可能*/
div#section{
border:1px #cccccc solid;
｝

ボックスモデルの例

div#section{
width:200px;
height:200px;
margin:10px;
padding:10px;
border:1px #cccccc solid;
}

横幅200pxを指定。
高さ200pxを指定。
外側の余白10pxを指定。
内側の余白10pxを指定。
上下左右の枠線に灰色（#cccccc）の幅1pxの実線を指定。

■背景
background
よく使う指定は以下の通りです。

・背景画像の指定（CSSファイルから見た画像ファイルの保存先）
・背景色の指定
・背景画像の位置
・繰り返しの処置

例

body {
background: url(../img/bg.gif) #fffff left top no-repeat;
}

bodyの背景に、白色を指定。
bodyの背景に、画像「bg.gif」を指定する。
画像「bg.gif」は左上から表示。
画像「bg.gif」は繰り返さない。

※個別に設定出来ますが今回は割愛。

テキスト・フォント

font-family

.text{
font-family:メイリオ, "ＭＳ Ｐゴシック",sans-serif;
}

フォントファミリ名+総称ファミリを指定。
フォントファミリ名は複数指定する事が可能で半角コンマ「,」で区切る。
総称ファミリ(serif、sans-serif等）はフォントファミリ名が全て表示出来ない環境を考慮して指定。

serif:日本語では明朝体に相当;
sans-serif:日本語ではゴシック体に相当;

font-size

.text{
font-size:12px;
｝

文字サイズの指定。
「px」や「em」,「%」で指定が可能。
以外に【絶対サイズ】、【相対サイズ】等有り。※ここでは割愛します。

font-weight

.text{
font-weight:bold;
}

文字の太さを太くする。
※細かい数値指定もあるがあまり使う機会が無いのでここでは割愛します。

line-height

.text{
line-height:1.5;
}

行間を指定。単位（px等）の指定も可能ですが
単位を付けないのが一般的。※詳しくは割愛します。

画像作成ソフトでパーセントで作成するのと同じと
考えて指定すれば問題ないでしょう。

text-align

.text{
text-align:left;
}

文字の揃えの指定。
「left」「right」「center」等。

text-decoration

a{
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

none:テキストに装飾を何もしない。
underline：下線を引きます。

color

.text{
color:#006699;
}

文字の色を指定。

■参考
もっとちゃんと書いている方の情報です。
疑問点を解決する参考に。

CSS HappyLife
http://css-happylife.com/
→いつも参考にさせていただいているサイトです。

CSS HappyLife ZERO
http://css-happylifezero.com/
→CSS初心者・中級者との事です。とても良く纏められています。

コリス
http://coliss.com/
→コリスさんのCSS記事は良く、参考にさして頂いています。

CSS基礎文法最速マスター
http://smkn.xsrv.jp/blog/2010/02/css-basic-syntax/
→基礎文法最速マスター。こちらが先に公開されていました。

■お詫び
このＢＬＯＧのCSSの指定の関係でかなり見難くなっています。
近いうちに修正致しますのでご理解下さい。