CSSの基本要素

セレクタ

HTMLの要素とCSSのデザインを結びつけるものがセレクタです。
セレクタにはいくつか種類がありますが、よく使われる形式を以下にまとめます。

タグ名

そのタグ全てを対象とする。

#id名

id="id名"を指定したタグを対象とする。

.class名

class="class名"を指定したタグ全てを対象とする。

タグ名.class名

指定したタグのうち、class="class名"をつけたものを対象とする。

半角スペースをあけて複数のタグ名 or #id名 or .class名
例: #id a img{ 〜 }

その順番に入れ子構造になっている部分を対象とする。
例の場合は、id="id"の中のaタグの中のimgタグを対象としている。

a:link,a:hover,a:active,a:visited

それぞれ、未クリック、マウスオーバー時、クリック時、クリック済みの aタグを対象とする。

プロパティ

HTMLでいうタグのようなもので、数多くあります。
適宜追加しますが、とりあえずよく使われるものを書いていきます。

width,height

ボックスの幅、高さを値で指定する。

サンプルはこちら。

margin

ボックス外側の幅を指定する。
値が1つの場合は四方、2つの場合は上下と左右、
4つの場合は上から時計回りに指定。

padding

ボックス内側の幅を指定する。
値の指定方法はmarginと同じ。

サンプルはこちら。

border

ボックスの外と内を区切る線を指定する。
値は、太さ・線の種類・色などを任意の組み合わせで記述可能。

color

文字の色を指定する。

font-size,font-style,font-weight

フォントの大きさ、スタイル（italicなど）、太さ（boldなど）を指定する。

サンプルはこちら。

text-align

テキストを寄せる方向を指定する。left,center,rightのいずれか。
ボックスにも適用されたり、されなかったりする。

line-height

行の幅を指定する。文字の高さ未満を指定すると容赦なく重なる。

display

対象のブロック要素/インライン要素を指定、変更する。

値にinline-blockを指定することで、
各要素は途中で自動改行を挟まれず（ブロック要素的挙動）
要素ごとに横に並べる（インライン要素的挙動）ことができる。

サンプルはこちら。

position

対象をどのように画面配置するかを指定する。
absolute: 絶対配置、relative: 相対配置、fixed: 固定配置など。

top,left,bottom,right

配置する位置を指定する。
positionで指定した基準位置からどれくらい離すか、を指定。

float

ブロックの寄せる方向、回り込みを指定する。
デザインを作る上で便利に使われるもので、かつデザインを崩してくる要因のひとつ。

clear

上記floatで指定した回り込みを解除する。

値

プロパティとの組み合わせで使われるので、
基本的にはプロパティごとに必要な値を入れます。
以下では、数値の単位と色の指定方法について記述します。

数値の単位

ブラウザごとの解釈に違いが出るのを避けるため、
数値を指定する場合は単位を必ず入れます。
※0を指定する場合は単位不要。どんな単位でも0は0。
以下に代表的な数値の単位と説明をかきます。

px

ピクセル。代表的な単位。
1920x1080や1366x768など画面解像度の数値もpx単位。
最もよく使われる。

画面解像度が多種多様な現在では、
px指定がデザイン崩壊の原因になることもよくあるが、
社内サイトでは特に問題にはならないと思う。
※tabletの社内利用やBYOD実施などがあれば、大問題になる。

em

文字の高さを1emとする単位。
文字の高さにより可変なので、割と重宝する。
font-sizeやline-heightなんかに使うと齟齬が出にくい。

ex

xの高さ（半角英語小文字の高さ）を1exとする単位。
上記emと同じく可変。ただ応用させづらいので、あまり使われない印象。

%

割合を表す単位。
widthの指定なんかで100%をよく使うが、
borderやpadding,marginを別に設定すると100%はみ出る。
また、デザイン上の親和性も悪い。（気がする。）

cm,mm,in...

長さの単位としてよく使われるもの。
画面表示のためではなく、専ら印刷用CSSに使う。

色の指定方法

カラーコード（#rrggbbみたいなやつ）が有名ですが、
それ以外にも指定の方法があります。

#ffffff

#fff

一般的な色の指定方法。
16進数で2桁ごとに赤、緑、青の色の度合いを指定する。
#ffcc00など、それぞれがゾロ目の場合、
#fc0のように省略してかくこともできる。

white

カラーネーム指定。
一般的な色にはカラーネームが用意されているので、
それを利用することも可能。
ただし、ブラウザによって対応していないものもある。
また自由度も低いため、あまり使わない印象。

rgb(255,255,255)

rgb(100%,100%,100%)

rgb()を使って指定する方法。
0〜255の数値をそれぞれに指定する。
0%〜100%での指定も可能。

rgba(255,255,255,0.5)

CSS3にて新たに採用された、rgb()に透明度を表す
アルファ値を含めた記述方法。
アルファ値は0〜1の間で小数を用いて指定する。
もちろん、CSS3に対応していないブラウザは読んでくれない。

ひとつめ - body

body{

セレクタはbodyです。
bodyタグ全体に適用されるスタイルの記述だということです。

margin: 0;

マージンの値をゼロにします。

padding: 0;

パディングの値をゼロにします。
このふたつを合わせて、ブラウザのデフォルトCSSの
デザイン的に邪魔になる部分をリセットしています。

text-align: center;

テキストの表示を中央寄せにする、という意味ですが、
実際の用途とは違った使い方をしています。

width: 100%;

ブロックの幅を100%にしています。
書かなくてもよさそうに見えますが、実は結構重要です。

font-size: 0.8em;

フォントの大きさをもとより少し小さくしています。
プレビューしながら調整しますが、
デフォルトのサイズでは大きすぎる場合が多いため、こうしてます。

line-height: 1.4em;

行の高さを1.4emにしてます。
デフォルトだと、行間の隙間がなくて読みづらくなってしまうので、
少しだけ隙間を空けるようにしています。

}

ここまでがbodyタグへのスタイルです。

ふたつめ - #wrapper

#wrapper{

wrapperというIDに適用されるスタイルです。
bodyタグのすぐ内側に<div id="wrapper">として
divタグを配置して、デザイン要素としています。

width: 960px;

幅を960pxに設定しています。
コンテンツの最大幅を960pxにするのは、
Webデザインでは割と一般的です。
XGA(1024x768)モニタサイズ対応のためです。

margin: 0 auto;

上下マージンを0、左右マージンを自動で設定しています。
ほぼこれだけで、一般的なモダンブラウザでは、
960px幅のdiv#wrapperの箱が中央寄せになります。
（外側の箱のwidthが設定されていないと駄目な場合もあり。
なので、bodyタグのwidth設定はそれなりに重要なのでした。）
この自動マージンでセンタリングができない一部ブラウザについては、
bodyタグに設定したtext-align: center;の力で
むりやりセンタリングさせています。

text-align: left;

テキストの表示位置を左寄せに戻します。

}

ここまでが#wrapperへのスタイルです。

Cascadingについて

bodyとdiv#wrapperは入れ子構造になっているので、
bodyで設定したスタイルはdiv#wrapperに継承されています。
そうして見てみると、widthとmarginとtext-alignは
bodyで定義されているにもかかわらず、
#wrapperで再び定義されていることになります。
これがCascadingです。

特徴に名前がついているからといって
特に難しく考えることはなく、
必要になったときに必要なスタイルをあてていくだけで
細かく設定する必要はない、程度の認識でいいと思います。