頭脳一式

人の記憶なんて曖昧なもの。すべての情報を頭に記憶するなんてナンセンス。困ったらここに来ればいいじゃん?というスタンスで最強のナレッジベースを目指すブログ

【CSS3】基礎知識

CSSの構成

css セレクタ 値 プロパティ - Google 検索

CSSは「セレクタ」「プロパティ」「値」の3つで構成されている。
セレクタは「どこ」にあたり、Styleを設定する要素を示す。
プロパティは「何を」にあたり、値は「どうする」にあたる。
プロパティと値は一対で扱うため、例えば「文字色を赤色にする」であれば 「color:#ff0000;」のように記述する。
プロパティと値はコロンで区切り、プロパティと値のセットをセレクタの後に{}で囲む。

p {
    color: #ff0000;
    font-size: 20px;
}

CSSを記述する場所

CSSを記述出来る場所は以下の3つ。

1.インライン

HTMLの中にタグを直接記述する方法。
インラインは指定のタグにピンポイントで記述できる便利な記法。
構文:style="プロパティ:値;" ※複数指定する場合は全体を""で囲むこと!

/* ひとつだけ指定した場合の例 */
<p style="font-size:20px;"></p>

/* 複数指定した場合の例 */
<div style="height:50px;width:50px;background-color:red;color:black">aaa</div>

2.エンベッド

style要素をhead要素内に書き、その中にCSSを書く方法。
手軽な手法であるが、ページ数が多くなるとCSSの管理が煩雑になるという欠点がある。

<head>
    <style>
        p {font-size: 20px;}
    </style>
</head>

3.リンク

CSSを外部ファイルとして扱い、それをHTMLファイルにから参照して利用する手法。
1つのCSSを複数のHTMLで適用させることができるため、多くの場合、リンクによる手法が使われている。

<link rel="stylesheet" href="sample.css">
/* sample.cssの中に記述する。 */
p {
    color: #ff0000;
    font-size: 20px;
}

セレクタについて

セレクタはその名のとおり「選択するもの」を示す。
CSSはただやみくもに書いただけでは「どの箇所にどのように適用したいか」を定めることが出来ない。

タイプ(要素)セレクタ

タイプ(要素)セレクタは、HTMLのタグ名をそのまま指定して次のように記述する。
タイプ(要素)セレクタを用いると、文書内の同じ要素すべてが対象となる。
次の記述ではページ内のすべてのh2要素に対して指定した修飾が適用されることになる。

h2 {font-size: 25px;}

IDセレクタ

IDセレクタは「#+ID名」で構成されるセレクタ

#id1 {width: 1920px;}

クラスセレクタ

クラスセレクタは「.+クラス名」で構成されるセレクタ

.class1{color: #000000;}

子孫セレクタ(要素の中にある要素を選択するセレクタ)

子孫セレクタは要素の親子関係を利用するセレクタ
タイプセレクタやIDセレクタを組合せて記述する。
セレクタセレクタの間は半角スペースで区切って記述する。
例えば次のように記述すると、「header要素の中にあるすべてのh1要素に対して適用する」という解釈になる。

header h1 {margin: 0;}

次の例はID名がmainの要素の中のh1要素に適用する。

#main h1 {margin: 0;}

複数のセレクタに同じスタイルを適用させる

複数セレクタは、セレクタを2つ以上まとめて記述する手法。
これはタイプセレクタやIDセレクタなど、どんな組合せでも用いることができる。
セレクタセレクタの間は半角カンマ区切りで記述する。

th,td { vertical-align: top;}

全称セレクタ

全称セレクタはすべての要素を対象とするセレクタで「*」のようにアスタリスクを用いて次のように記述する。

#body * { vertical-align: top;}

セレクタの使い分け方

セレクタは全体から細部へ搾り込むように指定するのが望ましい。

  1. タイプセレクタで大まかな共通のスタイルを設定する。
  2. IDセレクタやクラスセレクタは固有のブロックの固まりなど、特定部分のスタイル設定に使用する。
  3. 子孫セレクタは1つ上の階層を基準としてその中にあるものを選ぶときに使用する。 例えばヘッダーとメイン部分でp要素の修飾を変えたい場合は、
    「#header p」のように範囲+ピンポイントな要素で選択するようにする。
  4. 複数セレクタは対象範囲の広さとは関係なく、同じスタイルを効率よく適用したいときに使用する。th,tdなど関連があるスタイルに適用するのが一般的。h1やformなど関連性の薄い要素に対してマイルール的に設定すると、メンテンナンス性が損なわれるので注意。

擬似クラス

擬似クラスは特定の条件によって選択するセレクタを指す。
li:last-child{}のように、要素の後ろにコロンとセレクタ名を組合せて記述する。

疑似要素

疑似要素は、要素にテキストや画像を追加することができる。
プロパティにcontentを使用することにより、CSSだけでテキストなどをHTMLに表示させることができるようになる。

CSSの競合、優先順位

CSSの適用順は次のとおり。
link要素 < style要素 < インライン指定
つまり、インライン指定で記述すると、link要素で指定したスタイルは無効化される。
同じ場所に書かれている場合、セレクタの種類を見て次のとおりに優先される。
タイプセレクタ < classセレクタ/疑似要素 < IDセレクタ
優先順位が同じ場合は、後に書いた方が優先される。 子孫セレクタのように複数のセレクタを組合せる場合、「個別性」というチェック式に点数を付けられる計算によって優先順が決定する。
セレクタに含まれるID名やクラス名、要素名などをカウントし、点数が大きいものほど優先順位が高くなる。

スタイルの継承

CSSにはHTMLの親子関係に沿ってスタイルを継承していく仕組みがある。
たとえばbody要素に対して文字色を青にする指定をすると、その中にあるh1要素やp要素の文字も同じように青くなる。

inheritで強制的に継承する

継承されないスタイルを強制的に継承させたい場合は、そのプロパティの値として「inherit」を指定する。

body { border-top: 10px solid #ff6e6e;}
h1,p,strong,img{ border-top: inherit}

!importantで強制的に順位を上げる

スタイルの優先順位を強制的に上げるには「!important」を使用する。 プロパティの値の後ろに記述すると、そのプロパティはセレクタの優先順位に関係なく、強制的に適用させることができる。

h1 { color: red !important;}
.title{color: blue;}

文字サイズを設定するfont-sizeプロパティ

相対単位

相対単位は、親要素のサイズに応じて実サイズが決定される。
親要素が無い場合は、Webブラウザのデフォルト値が基準となる。
一般的なブラウザは16pxが標準。

  • px:画面のピクセルで指定。
  • % :親要素のサイズに対する%で指定。
  • em:欧文における大文字の「M」を基準とした単位。1文字文の倍数と捉えても良い。
  • ex:欧文に置ける小文字の「x」の高さを基準とした単位。
  • rem:emのサイズを基準としつつ、rootに倒して相対的にフォントサイズを決定する。

絶対単位

親要素のサイズには影響されず、指定した値はどんな環境でも均一に見える。
mmやcmは印刷向け。

  • pt:ポイント
  • mm:ミリメートル
  • cm:センチメートル
  • in:インチ(1in=約25mm)

font-weghtプロパティ

フォントの太さを変更するプロパティ。400を基準として±100の指定で行う。boldなどのキーワード指定もできる。

h1 { font-weight: 400;}

letter-spacingプロパティ

文字の間隔を指定する際に使用する。数値を指定して文字間隔を広げたり、マイナス値でも字間を狭めたりできる。

h1 { letter-spacing: 10px;}

text-decorationプロパティ

テキストに下線・上線・打ち消し線を付けられるほか、点滅させたりもできる。
但し、点滅は一部ブラウザ(firefox,Opera等)でのみ対応している。

h1 { text-decoration: underline;}

text-alignプロパティ

テキストを単語単位ではなく、p要素などのブロック単位で文字の位置揃えをするときに使用する。 値はleft,center,rightを指定する。値にjustify(両端揃え)を使用すると、長文で全体のブロックが綺麗に見える。

h1 { text-align: justify;}

text-indentプロパティ

文章の段落など一行目のインデント幅を指定する際に使用する。

h1 { text-indent: 5em hanging;}

line-heightプロパティ

行間を指定する際に使用する。 正確には行の高さを指すので、そこから文字を大きさを引いた差分が行間になる。 一般的には値に単位を付けずに下記のように記載する。 単位を付けずに記載した場合、数値が「倍数」として扱われ、行内の一番大きなサイズの文字を基準として拡張される。 pxなどの単位を付けた場合、行間が固定されるため、行間の値を超える文字がある場合、文字同士が重なることもある。

h1 { line-height: 2;}

色の指定方法

色を指定するにはcolorプロパティを使用する。 16進数指定法の場合。 16進数は光の三原色で色を指定する手法の1つで上2桁が赤、次の2桁が緑、下2桁が青を指す。

h1 { color: #123456;}

rgb関数の場合

左から赤、緑、青をそれぞれ0~255の数値又は、0%~100%のパーセンテージで半角カンマ区切りで指定する。 透明度指定を加えたRGBAではさらに0~1の範囲で不透明度(アルファ値)を指定する。

h1 { color: rgb(0,86,180);}
h2 { color: rgba(0,86,180,0.5);}

hsl関数の場合

色相(Hue)、彩度(Saturation)、輝度(Lightness)の3つで指定する方法。 同じ色を保って明るさや鮮やかさだけを変化させることが容易。 色相は0~360度の角度で指定する。彩度輝度をそれぞれ半角カンマで区切り0%~100%で指定する。 透明度指定はRGBAと同様。

h1 { color: hsl(100,50%,50%);}
h2 { color: hsla(100,50%,50%,0.5);}

ボックスモデル

CSSでレイアウトを自在にコントロールするためには「ボックスモデル」の知識が必要不可欠。 CSSではブロックレベルの性質を持つ要素に対して、サイズと間隔を設定できる。

ボックスモデルは4種類の概念で構成されている。 要素の内容(content) 内容とボーダーの余白であるパディング(padding) 枠線のボーダー(border) ボーダーの外側にある余白マージン(margin) これらの領域は上下左右(top,bottom,left,right)の4辺に分けられ、CSSで個別にスタイルを適用することができる。

マージン(margin)

マージンは要素の外側の間隔を指定するもの。 隣り合う要素との距離を調整するために使用する。
単一指定の場合

p { margin: 10px;}/*すべての辺に対して指定*/
p { margin-top: 10px;}/*上辺のみに対して指定*/
p { margin-bottom: 10px;}/*下辺のみに対して指定*/
p { margin-right: 10px;}/*右辺のみに対して指定*/
p { margin-left: 10px;}/*左辺のみに対して指定*/

複数指定の場合①

p { margin: 10px 20px;}/*上下に10px,左右に20px指定*/

複数指定の場合②

p { margin: 10px 20px 30px 40px;}/*指定した順に時計回りで上右下左の順で指定*/

パディング(padding)

パディングは要素の内側の間隔を指定するもの。
borderとcontensの間隔を調整するために使用する。 基本的な使い方はmarginと同じ。

ボーダー(border)

ボーダーは要素の四辺に枠線を付けるもの。
値の指定は線種、太さ、色の3つを半角スペース区切りで指定する。 これらの順序は変わってもOK

p { border: solid 1px #990000;}

要素(content)のサイズ

要素にはborder,padding,marginといった余白以外にも、要素に対してサイズを指定することができる。 widthプロパティは、要素の横幅を指定することができる。 固定で表示する場合は、px指定、親要素や文字サイズに合わせて可変にする場合は、%指定やem指定にする。 heightプロパティは、要素の高さを指定することができる。 高さはcontentのテキストや子要素の高さに合わせて自動調整されるのでわざと指定しない場合もある。

ボックスモデルの計算方法

要素(content)の回りにborder,padding,marginが付いていると考えるとわかりやすいかも。
「ボックス幅=marginの左右+borderの左右+paddingの左右」で求めることが出来る。
例えば、「400pxの幅で作りたいからといってwidthに400pxを指定」とすると、400pxのほかにborder,padding,marginが足されることになるため、 結果的に実際の表示幅が400pxを超えてしまうので注意が必要。

フロート(Float)を利用したレイアウト方法

floatプロパティ

要素を浮動させて左右にスライドさせ、段組みを実現する。
また画像の横にテキストを回り込ませる目的でも使用される。カラムレイアウトを実現するために使われている一般的な手法。

divpなどのブロックレベルの性質を持つ要素は 横並びにはならず、縦方向に並んで表示される。
またこれらはデフォルトで横幅の情報を持っていてブラウザいっぱいまで広がっているため、
次の要素がその下に表示される。
この特性を変えるのがfloatプロパティの役割。

floatプロパティにはleft,right,noneの3つの値を指定することができる。デフォルトはnone。 float:leftを指定すると、その要素は浮いた状態になり、そのまま左へスライドする。 浮いているので後続の要素は重なるように入り込んでくる。

ディスプレイ(display)を利用したレイアウト方法

displayプロパティ

ブロックレベルやインラインなどの特性を切り替えることが出来る。
h1,p,li要素などはブロックレベルの性質をもっているがdisplayプロパティを使うことでこの性質をコントロールすることができる。

動き
none 要素を非表示にする。(レイアウトに影響しなくなる。)
inline インラインにする。
block ブロックレベルにする。
inline-block ブロックレベルとインラインの両方の性質を持つインラインブロックにする。
幅がcontentによって可変になり、インラインのように横に並ぶが、幅や高さやマージンを設定することができる。
table-cell td要素と同じ挙動になる。

ポジション(position)を利用したレイアウト方法

positionは数値で座標を指定して位置を揃える手法。 よく使われる配置方法としてrelative(相対配置)とabsolute(絶対配置)の2つがある。

動き
relative 相対配置の意。その要素が初期状態で表示されていた位置を基準にtopプロパティ等で相対的に位置をずらす。
その要素が元々入っていたスペースは確保され、ほかの要素は入り込めない。
absolute 絶対配置の意。基準となる要素からの位置を指定する。
その要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。
static positionプロパティの初期値。静的配置の意。初期状態に戻したい場合はこれを指定する。(要素の元々の位置を見たい場合に有効。)
fixed 固定配置の意。absoluteと同じく絶対配置の指定になるが、違いはスクロールしても表示位置が固定されていること。
ブラウザの表示幅やリサイズに影響されることなく、常に指定した位置に表示されるようになる。
absoluteと同じくその要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。

リンクやマウスオーバー時のスタイル指定

動き
:hover マウスポインタが乗った状態
visited リンクが訪問済み
first-child 最初の子要素。
last-child 最後の子要素。

要素を透明にする。opacityプロパティ

半透明時にはその背景色や画像が透けて見えるようになる。 →つまり後ろに隠れている要素が見えるように鳴る。 数値は0~1の範囲で指定することができ、0が完全な透明、1が不透明を指す。

Tips 画像の下の余白を調整する方法

img {vertical-align: bottom;}

グラデーション

線形グラデーション

background: linear-gradient(to right,#00f 0%,#fff 100%);

円形グラデーション

background: radial-gradient(circle,#00f 0%,#fff 100%);

border-collapseプロパティ

このプロパティは隣接するセル同士の重なりを指定するもの。 デフォルトではseparateが指定されているため、セル同士は離れて表示される。 collapseを指定すると、セルのボーダー部分が重なり合って表示されるようになる。 境目を1pxで表現できるため、シャープな印象の表組みが作れる。

繰り返しの調整に使うnth-child擬似クラス

以下の例は5の倍数の要素に対して右マージンに0を指定する。

#id:nth-child(5n) {margin-right: 0;}