【CSS3】基礎知識
目次
CSSは「セレクタ」「プロパティ」「値」の３つで構成されている。
セレクタは「どこ」にあたり、Styleを設定する要素を示す。
プロパティは「何を」にあたり、値は「どうする」にあたる。
プロパティと値は一対で扱うため、例えば「文字色を赤色にする」であれば
「color:#ff0000;」のように記述する。
プロパティと値はコロンで区切り、プロパティと値のセットをセレクタの後に｛｝で囲む。
p {
color: #ff0000;
font-size: 20px;
}CSSを記述出来る場所は以下の３つ。
インラインはHTMLの中にタグを直接記述する方法。
構文：style=”プロパティ：値；”
※複数指定する場合は全体を””で囲むこと！
/* ひとつだけ指定した場合の例 */
<p style="font-size:20px;"></p>
/* 複数指定した場合の例 */
<div style="height:50px;width:50px;background-color:red;color:black">aaa</div>エンベッドはhead要素内にstyle要素を書き、その中にCSSを書く方法。
<head>
<style>
p {font-size: 20px;}
</style>
</head>CSSを外部ファイルとして扱い、それをHTMLファイルから参照して利用する手法。
<link rel="stylesheet" href="sample.css">/* sample.cssの中に記述する。 */
p {
color: #ff0000;
font-size: 20px;
}セレクタはその名のとおり「選択するもの」を示す。
タイプ(要素)セレクタは、HTMLのタグ名をそのまま指定して次のように記述する。
タイプ(要素)セレクタを用いると、文書内の同じ要素すべてが対象となる。
次の記述ではページ内のすべてのh2要素に対して指定した修飾が適用されることになる。
h2 {font-size: 25px;}IDセレクタは「#+ID名」で構成されるセレクタ。
#id1 {width: 1920px;}クラスセレクタは「.+クラス名」で構成されるセレクタ。
.class1{color: #000000;}子孫セレクタは要素の親子関係を利用するセレクタ。
タイプセレクタやIDセレクタを組合せて記述する。
セレクタとセレクタの間は半角スペースで区切って記述する。
例えば次のように記述すると、「header要素の中にあるすべてのh1要素に対して適用する」という解釈になる。
header h1 {margin: 0;}次の例はID名がmainの要素の中のh1要素に適用する。
#main h1 {margin: 0;}複数セレクタは、セレクタを２つ以上まとめて記述する手法。
これはタイプセレクタやIDセレクタなど、どんな組合せでも用いることができる。
セレクタとセレクタの間は半角カンマ区切りで記述する。
th,td { vertical-align: top;}全称セレクタはすべての要素を対象とするセレクタで「*」のようにアスタリスクを用いて次のように記述する。
#body * { vertical-align: top;}セレクタは全体から細部へ搾り込むように指定するのが望ましい。
擬似クラスは特定の条件によって選択するセレクタを指す。
li:last-child{}のように、要素の後ろにコロンとセレクタ名を組合せて記述する。
疑似要素は、要素にテキストや画像を追加することができる。
プロパティにcontentを使用することにより、CSSだけでテキストなどをHTMLに表示させることができるようになる。
CSSの適用順は次のとおり。
「link要素 → style要素 → インライン指定」
つまり、インライン指定で記述すると、link要素で指定したスタイルは無効化される。
同じ場所に書かれている場合、セレクタの種類を見て次のとおりに優先される。
「タイプセレクタ → classセレクタ/疑似要素 → IDセレクタ」
優先順位が同じ場合は、後に書いた方が優先される。
子孫セレクタのように複数のセレクタを組合せる場合、「個別性」というチェック式に点数を付けられる計算によって優先順が決定する。
セレクタに含まれるID名やクラス名、要素名などをカウントし、点数が大きいものほど優先順位が高くなる。
CSSにはHTMLの親子関係に沿ってスタイルを継承していく仕組みがある。
たとえばbody要素に対して文字色を青にする指定をすると、その中にあるh1要素やp要素の文字も同じように青くなる。
継承されないスタイルを強制的に継承させたい場合は、そのプロパティの値として「inherit」を指定する。
body { border-top: 10px solid #ff6e6e;}
h1,p,strong,img{ border-top: inherit}スタイルの優先順位を強制的に上げるには「!important」を使用する。
プロパティの値の後ろに記述すると、そのプロパティはセレクタの優先順位に関係なく、強制的に適用させることができる。
h1 { color: red !important;}
.title{color: blue;}相対単位は、親要素のサイズに応じて実サイズが決定される。
親要素が無い場合は、Webブラウザのデフォルト値が基準となる。
一般的なブラウザは16pxが標準。
親要素のサイズには影響されず、指定した値はどんな環境でも均一に見える。
mmやcmは印刷向け。
色を指定するにはcolorプロパティを使用する。
16進数指定法の場合。
16進数は光の三原色で色を指定する手法の１つで上2桁が赤、次の2桁が緑、下2桁が青を指す。
h1 { color: #123456;}左から赤、緑、青をそれぞれ0~255の数値又は、0%～100%のパーセンテージで半角カンマ区切りで指定する。
透明度指定を加えたRGBAではさらに0～1の範囲で不透明度（アルファ値）を指定する。
h1 { color: rgb(0,86,180);}
h2 { color: rgba(0,86,180,0.5);}色相（Hue）、彩度（Saturation）、輝度（Lightness）の３つで指定する方法。
同じ色を保って明るさや鮮やかさだけを変化させることが容易。
色相は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で個別にスタイルを適用することができる。
マージンは要素の外側の間隔を指定するもの。
隣り合う要素との距離を調整するために使用する。
単一指定の場合
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;}/*指定した順に時計回りで上右下左の順で指定*/パディングは要素の内側の間隔を指定するもの。
borderとcontensの間隔を調整するために使用する。
基本的な使い方はmarginと同じ。
ボーダーは要素の四辺に枠線を付けるもの。
値の指定は線種、太さ、色の３つを半角スペース区切りで指定する。
これらの順序は変わってもOK
p { border: solid 1px #990000;}要素にはborder,padding,marginといった余白以外にも、要素に対してサイズを指定することができる。
widthプロパティは、要素の横幅を指定することができる。
固定で表示する場合は、px指定、親要素や文字サイズに合わせて可変にする場合は、%指定やem指定にする。
heightプロパティは、要素の高さを指定することができる。
高さはcontentのテキストや子要素の高さに合わせて自動調整されるのでわざと指定しない場合もある。
要素(content)の回りにborder,padding,marginが付いていると考えるとわかりやすいかも。
「ボックス幅=marginの左右+borderの左右+paddingの左右」で求めることが出来る。
例えば、「400pxの幅で作りたいからといってwidthに400pxを指定」とすると、400pxのほかにborder,padding,marginが足されることになるため、
結果的に実際の表示幅が400pxを超えてしまうので注意が必要。
要素を浮動させて左右にスライドさせ、段組みを実現する。
また画像の横にテキストを回り込ませる目的でも使用される。カラムレイアウトを実現するために使われている一般的な手法。
divやpなどのブロックレベルの性質を持つ要素は
横並びにはならず、縦方向に並んで表示される。
またこれらはデフォルトで横幅の情報を持っていてブラウザいっぱいまで広がっているため、
次の要素がその下に表示される。この特性を変えるのがfloatプロパティの役割。
floatプロパティにはleft,right,noneの３つの値を指定することができる。デフォルトはnone。
float:leftを指定すると、その要素は浮いた状態になり、そのまま左へスライドする。
浮いているので後続の要素は重なるように入り込んでくる。
ブロックレベルやインラインなどの特性を切り替えることが出来る。
h1,p,li要素などはブロックレベルの性質をもっているがdisplayプロパティを使うことでこの性質をコントロールすることができる。
| 値 | 動き |
|---|---|
| none | 要素を非表示にする。(レイアウトに影響しなくなる。) |
| inline | インラインにする。 |
| block | ブロックレベルにする。 |
| inline-block | ブロックレベルとインラインの両方の性質を持つインラインブロックにする。 幅がcontentによって可変になり、インラインのように横に並ぶが、幅や高さやマージンを設定することができる。 |
| table-cell | td要素と同じ挙動になる。 |
positionは数値で座標を指定して位置を揃える手法。
よく使われる配置方法としてrelative(相対配置)とabsolute(絶対配置)の２つがある。
| 値 | 動き |
|---|---|
| relative | 相対配置の意。その要素が初期状態で表示されていた位置を基準にtopプロパティ等で相対的に位置をずらす。 その要素が元々入っていたスペースは確保され、ほかの要素は入り込めない。 |
| absolute | 絶対配置の意。基準となる要素からの位置を指定する。 その要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。 |
| static | positionプロパティの初期値。静的配置の意。初期状態に戻したい場合はこれを指定する。(要素の元々の位置を見たい場合に有効。) |
| fixed | 固定配置の意。absoluteと同じく絶対配置の指定になるが、違いはスクロールしても表示位置が固定されていること。 ブラウザの表示幅やリサイズに影響されることなく、常に指定した位置に表示されるようになる。 absoluteと同じくその要素が元々入っていたスペースは確保されず、ほかの要素は入り込むことができる。 |
| 値 | 動き |
|---|---|
| :hover | マウスポインタが乗った状態 |
| visited | リンクが訪問済み |
| first-child | 最初の子要素。 |
| last-child | 最後の子要素。 |
半透明時にはその背景色や画像が透けて見えるようになる。
→つまり後ろに隠れている要素が見えるように鳴る。
数値は0～1の範囲で指定することができ、0が完全な透明、1が不透明を指す。
img {vertical-align: bottom;}線形グラデーション
background: linear-gradient(to right,#00f 0%,#fff 100%);円形グラデーション
background: radial-gradient(circle,#00f 0%,#fff 100%);このプロパティは隣接するセル同士の重なりを指定するもの。
デフォルトではseparateが指定されているため、セル同士は離れて表示される。
collapseを指定すると、セルのボーダー部分が重なり合って表示されるようになる。
境目を1pxで表現できるため、シャープな印象の表組みが作れる。
以下の例は５の倍数の要素に対して右マージンに0を指定する。
#id:nth-child(5n) {margin-right: 0;}