本のcssリファレンスの内容。
気づいたことなどいろいろメモ
- widthプロパティに、%値を指定すると、ブラウザが表示しようとするサイズを100%として、その割合の幅になるみたい。
- 画像をアス比を保持してリサイズする。background-sizeやobject-fitプロパティをつかう。参照
基本本にはないけど..
position プロパティ ボックスの配置方法が相対か絶対かを指定する
指定できる値
| static | 特に指定しない。このときtop/bottom/right/leftは適用されない (初期値) |
| relative | 相対位置。基準となる位置は、position:staticとした時のボックスの位置。 |
| absolute | 絶対位置。親ボックスがposition:staticだったりposition未指定の場合は、ウィンドウ全体の左上が原点となる。親要素でpositionにstatic以外が指定されている場合は、親ボックスの左上が基準位置となる。 |
| fixed | absoluteと同じく絶対位置だが、スクロールしても位置が固定されたまま |
top/bottom/right/left プロパティ ボックスの配置位置を上/下/右/左側の基準位置との距離を指定する
指定できる値
| auto | 自動的に調整される (初期値) |
| 数値+単位 | 数値で指定 |
| %値 | 基準となる親ボックスの幅・高さに対する割合で指定 |
float プロパティ 左または右に寄せて配置
このプロパティで、ある要素が左寄せで配置された場合、続く要素はその右側へ回り込んではいちされる。つまり、上下で続く要素を左右にするためのもの。画像と文章の配置などで使うっぽい。
但し、positionプロパティでstatic以外が指定されている(位置が決められている)要素には、適用されない。
※CSS3ではフレキシブルボックスのほうが簡単でいい?
指定できる値
| left | 指定した要素を左に寄せる。後に続く内容はその右に回り込む |
| right | 指定した要素を右に寄せる。後に続く内容はその左に回り込む |
| none | 特に配置を指定しない (初期値) |
例:
ヘッダー1！ <右寄せ>
ヘッダー2? <左に回り込み>
| z1 | a1----------------1行に収まらず改行が入る場合は、widthを指定する。----------eotb1 | c1 |
| z2 | a2 b2 | c2 |
min-width プロパティ 領域の最小幅を指定
max-width プロパティ 領域の最大幅を指定
min-height プロパティ 領域の最小高さを指定
max-height プロパティ 領域の最大高さを指定
指定できる値
| 実数値+単位 | 数値で指定 |
| %値 | 親ボックスに対する割合で指定 |
background-size プロパティ 背景画像のサイズを指定する。
数値や%値で指定する場合、1つだけ指定した場合はもう1つはautoになる。
指定できる値
| auto | 自動的に算出する(初期値) |
| contain | 縦横日を保持して、背景領域に収まる最大サイズになるよう背景画像を拡大縮小する。 |
| cover | 縦横比を保持して、背景領域を完全に覆う最小サイズになるよう背景画像をを拡大縮小する |
| 長さ | 幅、高さを指定 |
| %値 | 背景領域に対する割合を指定 |
object-fit プロパティ 内容物をボックスにどのように収めるかを指定する
指定できる値
| fill | 置換コンテンツは要素のコンテンツボックス全体を埋めるサイズになる |
| contain | アスペクト比を保持してコンテンツボックスにぴったり収まる最大サイズに調整される |
| cover | アスペクト比を保持してコンテンツボックスを全て埋める最小サイズになる |
| none | 置換コンテンツをリサイズしない |
| scale-down | コンテンツは、containまたはnoneのうち小さい方のサイズになる |
背景画像を複数指定。
まず、背景画像のプロパティ一例
- background-image:
- background-repeat:
- background-attachment:
- background-position:
- background-clip: - 背景を表示する範囲。ボーダーボックス/パディングボックス/コンテンツボックス(border-box(初期値)/padding-box/content-box)
- background-origin: - 背景画像の基準となる位置を指定。但しbackground-attachmentの値にfixedが指定されている場合は、このプロパティ指定は無効になる。(border-box/padding-box(初期値)/content-box 100% 100%のサイズもボックスに合わさる)
- background-size: - 背景画像の表示サイズ。
- contain :幅/高さの比率を保持したまま、画像全体が表示領域に収まる最大サイズで表示される
- cover :幅/高さの比率を保持したまま、画像が表示領域を覆える最小サイズで表示
- 実数+単位(%指定も含む) :幅と高さを半角スペース区切りで,単位を付けて指定。幅または高さにautoを指定すると比率を保持してサイズ変更でき、autoのみなら画像本来のサイズとなる。値を1つだけ指定した場合は、幅を指定したことになり高さはautoとなる。e.g) background-size: auto 90px;
- background-color: - 背景指定の最後に1回だけ指定できる。
- background: - 一括指定する場合(??)
複数指定方法
- 個別のプロパティで指定する
画像ごとにカンマ区切りで指定。
e.g.) body {
background-image: url(usa_flute.png), url(balloon1.png), url(sky_photo.jpg);
background-repeat: no-repeat;
background-position: 600px 500px, 120px 100px, 30px 20px;
background-color: #f0ffff;
}
- 一括して指定する
画像に必要な値を半角スペースで区切って、それを画像ごとにカンマ区切りで並べる。
e.g.) body {
background: url(usa_flute.png) no-repeat 600px 500px,
url(balloon1.png) no-repeat 120px 100px,
url(sky_photo.jpg) no-repeat 30px 20px, #f0ffff;
}
ボーダーのスタイル
border-style(本にはないけど基本なんで)
指定する値は以下のようになる。
- none : 太さ0で表示されない。他のボーダーと重なる場合は他優先。
- hidden : 太さ0で表示されない。他のボーダーと重なる場合はhidden優先。
- solid : 1本線で表示される。
- double : 2本線で表示される。
- groove : 立体的に窪んだ線で表示される。
- ridge : 立体的に隆起した線で表示される。
- inset : 上と左が暗く、下と右が明るくなって領域全体が窪んで見える。
- outset : 上と左が明るく、下と右が暗くなって領域全体が隆起して見える。
- dashed : 破線で表示
- dotted : 点線で表示
以下は指定方法。
border-color: や、border-width: も同じく一括、個別指定がある。
また、border-top: や border-right: などでスタイル・太さ・色を一括指定もできる。
e.g.) border-top: solid 10px #f0f0ff ※太さ(width)はthin(細い)/medium(普通)/thick(太い)での指定も可。実際の表示はブラウザで異なる。
ボーダーの角丸指定
個別に指定（実数値+単位 や、パーセント値+% で指定）
- border-top-left-radius:
- border-top-right-radius:
- border-bottom-left-radius:
- border-bottom-right-radius:
e.g.) border-top-left-radius: 50px 70px; ※2つ指定すると、1つ目は横方向半径、2つ目が縦方向半径となり、楕円形となる。
一括して指定。値が1つだけの時は、4つの角すべてに適用されるが、2〜4個のときは以下のようになる。（実数値+単位、パーセント値+%で指定する。パーセントは横半径はボックス幅、縦半径はボックス高さが基準となるが、ブラウザによっては仕様通りに動作しないので注意）
| 値1個 (10px) | 全ての角 |
| 値2個 (10px 20px) | 左上と右下、右上と左下 |
| 値3個 (10px 20px 30px) | 左上、右上と左下、右下 |
| 値4個 (10px 20px 30px 40px) | 左上、右上、右下、左下 |
e.g.) border-radius: 20px 50px / 20px 70px 20px; ※スラッシュで区切ると、スラッシュ左側は横の半径、右側は縦の半径となり、楕円形を指定できる。
ボーダーに画像を使用する
border-image-sourceプロパティ。画像URLを指定する。値にnoneを指定すると、ボーダーに画像を使用しない意味になり、border-style設定値が使用される(画像を表示できない場合も同様)。
border-image-sliceプロパティ。画像を使ったボーダーでは、画像を9つに分割しそれぞれ拡大縮小する。(左上、上、右上、右、右下、下、左下、左、中央)。このプロパティでは分割位置までの距離を指定する。中央部分も表示するにはfillを指定する。
指定できる値
| 数値 | 各辺から分割位置までの距離を、単位無しピクセル(ラスター画像の場合)、またはベクター座標(ベクター画像の場合)で指定する。 |
| パーセント値+% | 左右の距離は画像の幅を基準とし、上下は画像高さを基準とする |
| fill | この値を指定すると、分割した画像の中央部分が表示される |
複数値が指定された場合は、border-styleのときと同じ。
border-image-width 画像を使ったボーダーの幅を指定する。値が複数の場合は、border-styleと同じ。
指定できる値
| 実数値+単位 | 各辺からの距離を数値&単位で指定 |
| パーセント値+% | ボーダー画像領域に対する割合で指定。左右は領域幅を、上下は領域高さを基準とする |
| 数値 | border-widthプロパティに指定された対応するボーダー幅の倍数で指定する |
| auto | border-image-sliceに指定された値と同じになる。それがない場合はborder-widthの値が使用される。 |
bordser-image-outset ボーダー画像領域をボーダーボックスより外側に広げる。値が複数の場合は、border-styleと同じ。
指定できる値
| 実数値+単位 | 広げる距離を、数値に単位をつけて指定 |
| 数値 | border-widthに指定された対応するボーダー幅の倍数で指定 |
border-image-repeat 分割されたボーダー画像それぞれをどのように繰り返すかを指定する。値は、上下と左右の表示方法を半角スペースで区切って記述する。値が1つだけの場合は両方同じ値が指定されたものとみなされる。
指定できる値
| stretch | ボーダーの領域に合わせ、画像を引き延ばす |
| repeat | 普通に画像を繰り返す。領域にぴったり収まらない場合は裁ち落として表示 |
| round | 画像を繰り返すが、領域にぴったり収まるように画像サイズを調整する。 |
| space | 画像を繰り返すが、領域にぴったり収まらない場合は余ったスペースを画像の周りに分配して表示。 |
border-image ボーダー画像を一括して指定。border-image-widthとborder-image-outsetの値はスラッシュで区切り、他は(順不同で?)半角スペースで区切る。
e.g.) border-image: url(frame.jpg) 55 fill / 55px 25px stretch;
ボックス
ボックスに影をつける
box-shadowプロパティ カンマ区切りで複数指定すれば、指定順に上から影を複数表示できる。
指定できる値
| none | 影をつけない状態にする |
| 色 | 長さ指定の前か後ろに指定する。省略したらブラウザ依存 |
| 長さ(実数値+単位) | 半角スペース区切りで、以下の値を指定する。
- 右方向へずらす距離。負の値なら左へ
- 下方向へずらす距離。負の値なら上へ
- 影をぼかす範囲。
- 影を広げる距離。負の値なら小さくなる。(拡大/縮小ってこと?)
|
| inset | この値を指定すると、ボックスの内側に影が表示される。色と長さ指定の前か後ろに記述。 |
内容が収まりきらない場合
overflow-x プロパティ 横方向への表示方法。(初期値none)
指定できる値
| visible | 収まりきらない内容をはみ出して表示 |
| hidden | 収まりきらない内容は表示しない |
| scroll | 横方向にスクロールできるようにする |
| auto | ブラウザに依存。一般的にはスクロールとなる |
overflow-y プロパティ 縦方向への表示方法。(初期値visible)
指定できる値は、overflow-xと同じ。
幅と高さの算出方法
box-sizing プロパティ width/heightは通常、コンテンツボックスのサイズだが、それをボーダーボックスのサイズとして解釈するように変更できる。
指定できる値
| content-box | ボックスの内容領域の幅/高さとする |
| padding-box | ボックスのパディング領域までの幅/高さとする |
| border-box | ボックスのボーダー領域までの幅/高さとする |
アウトライン
outline プロパティ アウトラインとは要素の輪郭線(縁取り)のこと。ボーダーの外側に表示される。e.g.) outline: #cc0066 solid 10px;
outline-offset プロパティ CSS3ではボーダーとの間隔を調整できる。e.g.) outline-offset: 10px;
要素のリサイズを可能にする
resize プロパティ ユーザーが要素のボックスサイズを変更できるようにする。
指定できる値
| none | サイズ変更をできないようにする
| both | 幅と高さを変更できるようにする
| horizontal | 幅のみを変更できるようにする |
| vertical | 高さのみを変更できるようにする |
要素のボックス全体の透明度を指定
opacity プロパティ 値は実数値0.0(透明)〜1.0(不透明)で指定。
グラデーション
linear-gradient() 関数
-webkit-linear-gradient() 関数 (Webkit系 ※何度も仕様変更がされる中で各ブラウザが実装したので、ブラウザやバージョンにより異なるみたい)
※引数の省略は、カンマも何もなく、meth(a,b)→meth(b)という感じみたい
画像を扱えるあらゆるプロパティで使える。但し、Firefoxとかはbackgroundプロパティとbackground-imageプロパティにのみ適用されるみたい
e.g.) background: linear-gradient(to right, red 0%, orange 10%, yellow 40%, blue 100%)
- linear-gradient(方向, カラーストップ[始], カラーストップ2,....カラーストップ[終])
- 方向
- 角度指定: 上を0度とし右回りを正として単位degで指定する。
- キーワード指定: toを付けて、ボックスの上下左右を指し示す。to top/to bottom/to right/to left/to bottom rightなど。
方向が省略された場合は「to bottom」が指定されたものとされる。
グラデーションの開始点と終了点は、ボックスの角を通る直線がグラデーションライン(指し示した方向)と直交する位置になる([本]p328の図が分かり易い)。- カラーストップ
- 色と位置。位置は0pxや0%のように指定する。終了点は100%になる。e.g.) green 50%
- -webkit-linear-gradient(開始点, カラーストップ[始], カラーストップ2,....カラーストップ[終])
- 開始点
- 角度指定: 右を0度とし左回りを正として単位degで指定する。
- キーワード指定: ボックスの上下左右を指す。topなら上から下へ、leftは左から右へ、top leftは左上から右下へのグラデーションになる。
開始点が省略された場合は「top」が指定されたものとされる。- からーすとっぷ
- linear-gradient()と同様
radial-gradient() 関数 円形グラデーション(1点から放射状に広がる)を表現できる。
-webkit-radial-gradient() 関数 Webkit系のブラウザの場合。
- radial-gradient(形状 サイズ 開始点, カラーストップ[始], カラーストップ2,....カラーストップ[終])
- ※形状とサイズは順不同。
- 形状
- グラデーションの形状を指定。circle(円形)/ellipse(楕円形)。形状が省略された場合は数値によるサイズ指定が1つなら circle となり、それ以外は ellipse となる。
- サイズ
- 楕円サイズをキーワードか数値(長さ)で指定。
長さ指定は、circleなら「実数値+単位」、ellipseなら水平と垂直方向の長さを「実数値+単位」または「%値」で半角スペース区切りで指定する。
キーワードで指定する場合は、
| closest-side | circleなら円の中心から最も近いボックスの辺に、
ellipseなら楕円の中心から最も近い縦と横の辺に内接する。 |
| farthest-side | circleなら円の中心から最も遠いボックスの辺に、
ellipseなら楕円の中心から最も遠い縦と横の辺に内接する。
| closest-corner | 円/楕円の中心から最も近いボックスの角に内接 |
| farthest-corner | 円/楕円の中心から最も遠いボックスの角に内接 |
| ※遠い近いというのは開始点が中心からずれることで意味をなすので、開始点にcenterを指定した場合closest/farthestはどっちも同じだと思う.... |
- 開始点
- グラデーションの開始点となる円の中心の位置を、
「at 水平位置 垂直位置」の形式で指定する。位置指定はbackground-positionと同じで、[実数+単位][%値][top/bottom/center/left/right]キーワードを組み合わせて使う。
省略されたらcenterとなる。
- カラーストップ
- 色と位置を半角スペース区切りで指定。linear-gradientと同じ。
- -webkit-radial-gradient(開始点, 形状 サイズ, カラーストップ[始], カラーストップ2,....カラーストップ[終])
- 開始点
- 上記と同様。
- 形状
- 上記と同様
- サイズ
- 上記に加え、仕様では廃止されたcontain(closest-sizeと同じ)、cover(farthest-sideと同じ)が残っている。
- 形状とサイズ
- 形状(circle/ellipse)とキーワード(closest-side等)の組み合わせか、
「実数値+単位」または「%値」の指定(値1つなら円、2つなら楕円だと思われ)となる。
repeating-linear-gradient() 関数 線形グラデーションの繰り返し。
repeating-radial-gradient() 関数 円形グラデーションの繰り返し。
-webkit-repeating-linear-gradient() 関数
-webkit-repeating-radial-gradient() 関数
引数は、繰り返さない場合と同じ。で、カラーストップで指定するのは100%に達しないものや、ピクセルを指定する。e.g.) background: repeating-liner-gradient(to right, teal 0%, navy 15%, black 30%)
テキスト関係
text-align プロパティ 行揃えの位置・均等割付を指定する。本には無いけど..
指定できる値
| left | 左寄せ |
| right | 右寄せ |
| center | 中央揃え |
| justify | 均等割付け。※text-justifyプロパティを設定しないと有効にならないよう |
text-justify プロパティ 均等割付けの形式を指定(従来はIEだけだったが、CSS3で標準??)本には無いけど..
指定できる値
| auto | ブラウザに依存 |
| distribute | 単語間隔と文字間隔を調整して均等割付け |
| destribute-all-lines | distributeと同様だが、行途中での改行や最終行のように1行に満たない行も均等割付けを行う |
| inter-cluster | アジア言語のように単語間隔を持たない言語を均等割付けする |
| inter-ideograph | 日本語・中国語・韓国語のような表意文字の、単語間隔・文字間隔を調整して均等割付け。(単語は漢字・平仮名などで見分けてる？) |
| inter-word | 単語間隔のみを調整して均等割付け |
| kashida | アラビア文字の均等割付けを意図している |
| newspaper | 単語間隔と文字間隔を調整して均等割付け。英文などラテンアルファベットに最適 |
line-height プロパティ 行の高さを指定する。本には無いけど..
行の高さとフォントサイズの関係は、 例えばline-height:20px, font-size:14pxの場合、6pxが行間として上下均等に3pxずつ割り振られる。フォントサイズより行の高さの方が小さい場合は重なって表示される。ブラウザによって表示や印刷の具合が異なるので注意。
指定できる値
| normal | ブラウザが判断する。(初期値) |
| 数値+単位 | 20pxなど。 |
| 数値 | 単位無しで数値のみ指定すると、その数値にフォントサイズを掛けた値が行の高さとなる。 |
| %値 | フォントサイズに対する%値。(だと思う...) |
text-shadow プロパティ テキストに影をつける。
カンマ区切りで複数記述すれば、指定した順に上から影を表示することができる。
指定できる値
| none | 影を付けてない状態 |
| 色 | 長さ指定の前か後ろに指定。省略するとブラウザ依存 |
| 長さ(実数値+単位) | 影の長さ。指定する順序は下記のようになる。
- 右へずらす距離。負数なら左へ
- 下へずらす距離。負数なら上へ
- 影をぼかす範囲。省略可。
|
word-wrap プロパティ 長い単語などが表裏領域に収まらない場合に、単語の途中で改行するかどうかの指定
指定できる値
| normal | 改行可能な位置でのみ改行する。 |
| break-word | 改行可能な位置がない場合、必要に応じて単語の途中で改行する |
text-overflow プロパティ テキストが溢れる場合の表示方法。ブロックレベル要素に対して適用する。
指定できる値
| clip | 表示できるテキストだけ表示。(「…」などは表示されない |
| ellipsis | 省略されていることを示すエリプシス(省略記号)「…(?)」または3点リーダ「…」を表示する。 |
hyphens プロパティ ハイフネーション(欧文では文末の単語が行に収まらない場合に単語をハイフンで分割する)の処理方法を指定するプロパティ。
今はどうかわからないが、全てのブラウザでベンダープレフィックスを付ける必要がある(?)
指定できる値
| none | ハイフネーションを行わない |
| manual | [­]で指定した箇所にのみ、ハイフンと改行を挿入する |
| auto | ブラウザが自動的に行う。[­]があればそれを優先。言語によりハイフネーションの規則が異なるので、lang属性で適切な言語を指定する必要がある |
tab-size プロパティ タブ幅を指定する
タブ幅を半角文字数で指定する。負数は不可。
フォント関係
font-family プロパティ 使用するフォントの候補を列挙。(本にはないけど...)
先に記述された順にユーザ環境で使用されるものが適用される。指定したフォントがユーザ環境で利用できない場合は、ブラウザのデフォルトフォントが使用される。
フォントは、フォント名での指定や、フォントの種類を表すキーワードでの指定ができる。引用符("や')で囲むことも可。
- フォント名の例： "MS ゴシック", "MS 名朝", 'Impact'
- キーワード： sans-serif(ゴシック系), serif(名朝系), cursive(筆記体/草書体), fantasy(装飾的フォント), monospace(等幅フォント) ※総称ファミリ名とも言う?
font-familyで使用できるフォント名/総称ファミリ名一覧(リンク)
font-style プロパティ フォントをイタリックや斜体にする。(本にはないけど...)
指定できる値は、
normal(標準),
italic(イタリック体),
oblique(斜体)
である。通常、イタリック体は斜めに傾けて筆記体調にしたものが多く、斜体はシンプルに斜めに傾けたもの。ブラウザはイタリックも斜体も無いフォントは、標準のフォントを斜めに傾けて表示する。
日本語はイタリック体も斜体も用意されているフォントはほとんどないので、どちらも斜めにしただけで同じ表示になる。参照元
font-variant プロパティ フォントをスモールキャップにする。(本にはないけど...)
スモールキャップとは、小文字の表示形式が大文字を小文字サイズ化したものとなる。例えば、abcABC は abcABC となる。
指定できる値は、
normal(標準),
small-caps(スモールキャップ。スモールキャップ用フォントが無い場合は、大文字を縮小したものが小文字として表示される)
font-weight プロパティ フォントの太さを指定(本にはないけど...)
9段階で指定できるが、そこまで用意されているフォントはほとんどなく、細かく指定しても太さが変わらないことが多いので大抵boldのみで事足りる。
指定できる値
| 数値で指定 | 100(細い),200,300,400(標準),500,600,700,800,900(太い)で指定。
| normal | 標準
| bold | 一般的な太字の太さ(700と同じ) |
| lighter | 相対的に一段階細くする |
| bolder | 相対的に一段階太くする |
font-stretch プロパティ フォントを幅狭/幅広にする(本にはないけど...)
CSS2.1で一旦削除されたが、CSS3で標準採用されるかも。参照元
指定できる値
| ultra-condensed | normalより4段階幅狭。最も幅狭となる |
| extra-condensed | normalより3段階幅狭 |
| condensed | normalより2段階幅狭 |
| semi-condensed | normalより1段階幅狭 |
| normal | 標準の形状(初期値) |
| semi-expanded | normalより1段階幅広 |
| expanded | normalより2段階幅広 |
| extra-expanded | normalより3段階幅広 |
| ultra-expanded | normalより4段階幅広。最も幅広となる |
| narrower | 1段階幅狭にする |
| wider | 1段階幅広にする |
font-size-adjust プロパティ 第一候補以外のフォントが使われる場合にも、小文字xの高さを一定に保つように調整する働きをする。
指定できる値
| 実数値 | 第1候補のフォントの縦横比を実数値で指定。例えばVerdanaは0.58, Comic Sans MSは0.54, Georgiaは0.50, Times New Romanは0.46 となる。 |
| none | フォントサイズを調整しない |
フォントの縦横比
font-size(フォントサイズ)に対するx-height(小文字xの高さ)の割合のこと。
縦横比が高ければフォントが小さくても読みやすく、低ければ読み難くなる。
Webフォントを使う。
Webフォントとは、サーバー上に用意したフォントを使ってWebページを表示できるようにする機能。
形式:
@font-face {
font-family: フォントファミリー名。任意の名前でOK
src: url(フォントファイルURL) format(フォーマット)
}
※ブラウザによってサポートするフォントフォーマットが異なるのでsrc:は複数しておくと良い。
また、上記ブロック内に font-weight や font-styleプロパティも指定できる。
セレクタ {
font-family: 上記で設定したフォントファミリー名;
}
フォントのフォーマットに指定できる値
| フォントのフォーマット | 一般的な拡張子 | format()に指定する値 | 備考 |
|---|
| Web Open Font Format | .woff | "woff" | |
| TrueType | .ttf | "truetype" | |
| OpenType | .ttf, .otf | "opentype" | |
| Embedded OpenType | .eot | "embedded-opentype" | |
| SVG font | .svg, .svgz | "svg" | |
段組み
段組み例
ファーブル
概要
南フランスのアヴェロン県にある寒村サン・レオンに生まれ、3歳のとき山村にある祖父母の元に預けられ、大自然に囲まれて育った。7歳の時祖父母のいるマラヴァルから呼び戻され、父母と弟のフレデリックの4人で暮らせる様になり、小学校に入学した[1]。
つづき
父の家業が失敗し、14歳で学校を中退するが、師範学校を出て中学の教師になり、物理学、化学の普及書を著した。コルシカ島、アヴィニョンを経てセリニアン（セリニャン・デュ・コンタ）で暮らし、様々な昆虫の観察を行い、それらをまとめて発表したのが『昆虫記』である。
column-count プロパティ 段組みの数を指定する。
指定できる値
| 整数値 | 段の数。column-widthの値がautoなら、この指定の段数になるが、段の幅が指定されていて、本プロパティ指定の段数にすると表示できる幅を超える場合は、指定よりも少ない段数で表示される |
| auto | 段の数は、他のプロパティによって決まる。(column-width等) (初期値) |
column-width プロパティ 段の横幅を指定
指定できる値
| 実数値+単位 | ここで指定した値は最適な幅を表す。表示領域が余る場合は格段の幅は広がり、表示領域が足りない場合は逆に狭くなる。 |
| auto | 段の幅は、他のプロパティによって決まる (初期値) |
column プロパティ 段の数と幅を一括指定
段数と幅を順不同でそれぞれ指定。省略することもでき、その場合初期値が使われる。
e.g.) column: 20em 2;
column-gap プロパティ 段と段の間隔を指定
指定できる値
| 実数値+単位 | 数値で指定。負数は不可 |
| normal | ブラウザに依存(CSS3では1em推奨) |
column-rule-style プロパティ 段間の境界線の種類を指定
値はボーダーと同じものが指定できる(ここ)。
但し、ブラウザによっては insetはridge のように、outsetはgrooveのように表示される
column-rule-width プロパティ 境界線の幅を指定
指定できる値
| thin | 細い線で表示。幅はブラウザに依存(medium,thickも同様) |
| medium | 中くらいの線 |
| thick | 太い線で表示 |
| 実数値+単位 | 数値で指定。負数は不可 |
column-rule-color プロパティ 境界線の色を指定
初期値は、そのときに設定されているcolorプロパティの色。
column-rule プロパティ 段の境界線を一括して指定
種類、幅、色それぞれの値を任意の順番で記述。
e.g.) column-rule: dotted 10px #ff6699;
column-span プロパティ 段にまたがる表示を指定
段組みの中にある要素は、通常1段の中に収まるが、全ての段にまたがって表示させたいときに使用する。
使用できる値
| none | 要素は複数の段に跨らない (初期値) |
| all | 要素は全ての段にまたがる形で表示される |
column-fill プロパティ 段同士の高さのバランスを指定
指定できる値
| balance | コンテンツを均等に分割し、各段の高さが揃うように調整 (初期値) |
| auto | 先にある段から順に埋める。(heightが指定されてる時など) |
段組みの改ページや改段方法を指定。
break-before プロパティ ボックスの前での動作
break-inside プロパティ ボックス内での動作
break-after プロパティ ボックスの後での動作
-webkit-column-break-before プロパティ Webkit系(改ページは無し)
-webkit-column-break-inside プロパティ
-webkit-column-break-after プロパティ
スタイルでこのプロパティが設定された要素のコンテンツの前(or後)で改段や改ページを指示するもの。
もしくはコンテンツの中では改段/改ページをさせないようにするもの。
どうも、改段と、印刷の改ページは同系列として見られているみたい...。因みに、これらのプロパティは段組み表示したコンテンツに対してのみ、ってことみたい(?)
指定できる値(Webkit系以外)
| 値 | 説明 | 動作分類 |
|---|
| auto | 特に指定しない | - |
| always | 指定した位置で常に改ページをする。 | 改ページ |
| avoid | 指定した位置で改ページや改段をしないようにする | 改ページ/改段 |
| left | 次のページが左ページになるように、指定した位置で改ページしたりしなかったり(?) | 改ページ |
| right | 次のページが右ページになるように、指定した位置で改ページしたりしなかったり(?) | 改ページ |
| page | 指定した位置で常に改ページをする | 改ページ |
| column | 指定した位置で常に改段をする | 改段 |
| avoid-page | 指定した位置で改ページしないようにする | 改ページ |
| avoid-column | 指定した位置で改段をしないようにする | 改段 |
※IE10では,rightとleftを指定してもalwaysと同じ動作となる。
Webkit系の指定できる値
| auto | 必要に応じ、指定した位置で改段 |
| always/left/right | 現在のところ(?) always/left/right どれを指定しても同じ動作となり、指定した位置で常に改段する |
| avoid | 指定した位置で改段をしないようにする |
フレキシブルボックス
フレキシブルボックスとは...
ボックスのサイズや配置を柔軟に調整できるレイアウト方法を、フレキシブルボックスレイアウトという。
そこで使われるのがフレキシブルボックス。イメージは、1つのコンテナに、いくつかの箱を縦や横に自由に並べていく感じ。
箱は横を基軸にして並べたり、縦を基軸にして並べていくが、その基軸になるものを「主軸(main axis)」と言い、それに直行する軸を「交差軸(cross axis)」と言う。
交差軸は、箱の上置き/下置きのようなアライメント(align)を設定するときに使う概念。
実際には、箱はフレックスアイテムと言い、それを入れるコンテナはフレックスコンテナと言う。下記に整理する。
- フレックスコンテナ(flex container)
- フレックスアイテムを含む親要素。displayプロパティに flex or inline-flex が指定された要素がフレックスコンテナになる。(diplayプロパティの値は他にもgrid等がある)
- フレックスアイテム(flex item)
- フレックスコンテナに含まれる子要素。フレックスコンテナの直接の子要素になっているテキストは、匿名のフレックスアイテムに包まれることになっている。
- 軸(axis)
- フレックスコンテナにはレイアウトの基本となる2本の軸がある。主軸は、フレックスアイテムの配置方向を決める軸。交差軸は、主軸に対し垂直に交わる軸である。
主軸が縦か横かを決めるのは、frex-directionプロパティとなる。
- 始端(main start/cross start) と 終端(main end/cross end)
- 基本的に、
水平(横)に伸びる軸の始端 → 終端は、左 → 右 となり、
垂直(縦)に伸びる軸の始端 → 終端は、上 → 下 となる。
ただし、この逆方向(reverse)を指定する事もできる。(flex-direction参照)
※本p378に図あり
※上述は左から右へ記述する文字の場合
例
display プロパティ(フレキスブルボックスに於いての…) フレキシブルボックスレイアウトを使う
ブラウザによって、指定する値がかなり違う可能性があるので注意。(FireFoxではfrex⇨-moz-boxらしい)
指定できる値
| flex | 指定された要素を、ブロックレベルのフレックスコンテナボックスにする |
| inline-flex | 指定された要素を、インラインレベルのフレックスコンテナボックスにする |
| inline(??) | displayの初期値は、inlineと書いてある(p378)ので、もしかしてこれはフレックスアイテムを指すのか??そもそも存在する? |
flex-direction プロパティ レイアウトの方向を指定
フレックスコンテナの主軸の方向を指定する。つまりはレイアウト方向を指定する。(初期値はauto)。
指定できる値
| row | コンテンツの書字方向に於いて、インライン要素の表示方向と同じになる。例えば、左から右へ記述する文字の場合は、主軸も左から右への方向となる。
(<span>content1</span><span>content2</span> みたいな?) |
| row-reverse | rowとは逆方向 |
| column | コンテンツの書字方向に於いて、ブロックレベル要素の表示方向と同じになる。例えば、左から右へ記述する文字の場合は、主軸は上から下への方向となる。
(<p>content1</p>
<p>content2</p> みたいな?) |
| column-reverse | columnとは逆方向 |
flex-wrap プロパティ アイテムを複数行に配置
コンテナの幅に収まりきらない場合、折り返すようにする。そうやって複数行になったフレックスアイテムは、それぞれの行で独立して配置され、幅の伸縮(flex-grow等)やjustify-content,align-selfプロパティは指定した行にのみ適用される。
指定できる値
| nowrap | フレックスコンテナ内は1行になる (初期値(IE10はnone)) |
| wrap | 複数行配置できるようになる。
折り返す方向は、交差軸の終端方向へとなる。(まぁ下だね) |
| wrap-reverse | 複数行配置できるようになる。
折り返す方向は、交差軸の始端方向へとなる。(これは上だね) |
flex-flow プロパティ レイアウトの方向と行数を一括指定
flex-direction の値と、flex-wrap の値を順不同で指定。省略された場合初期値が適用される。
order プロパティ アイテムの並び順を指定する
※フレックス・アイテムにて使用する
通常、フレックスアイテムはソースコードに記述された順番でフレックスコンテナ内に配置されるが、orderに整数値を指定すると、その数値ごとに順序グループが作られ、値の小さいグループから配置される。グループ内の順序はソースコードの記述順となる。
ちなみに、orderプロパティの初期値は 0 である。
flex-grow プロパティ アイテムの幅(主軸方向のサイズ)の調整方法を指定。 但し、CSS3ではflexプロパティで一括指定することが推奨される
flex-shrink プロパティ
flex-basis プロパティ 調整する際の基準を指定。
- flex-grow
- アイテムの幅がコンテナサイズより小さくなる場合、余白を各アイテムに分配して幅を広げる。その分配量を、他のアイテムとの比率で指定する。
例えば、指定要素が flex-grow:2 で、他が flex-grow:1 なら、他より2倍の長さが配分される
(初期値0)
- flex-shrink
- アイテムの幅がコンテナサイズより大きくなる場合は、はみ出す量を各アイテムで分配してその分縮小される。その分配量を、他アイテムとの比率で指定する。
(初期値1)
- flex-basis
- フレックスアイテムが調整される前の、基本となる長さ(主軸方向のサイズ)を指定するプロパティ。
flex-basis:0 と指定した場合は、調整の割合がそのままアイテムの長さになる。アイテムの元々のwidth(or height)に関係なく、flex-grow/shrinkの値の比率で、コンテナ一杯に広がる。
それ以外の値は以下に示す。以下の値の場合、その基本の幅 + 拡大量(or -縮小量) という感じで調整される。(本p395に図あり)
(初期値auto)
指定できる値
| 実数値+単位 | 数値で指定 |
| %値 | フレックス・コンテナの幅(or高さ)に対する割合で指定 |
| auto | フレックス・アイテムに含まれるコンテンツの幅(or高さ)が基本となる(つまりアイテムの幅(or高さ)) |
flex プロパティ アイテムの幅(主軸方向のサイズ)の増減を一括指定
flex: flex-grow値 flex-shrink値 flex-basis値
の順番で指定する。ただし、flex-basis値はどこでもOK。 flex-basis:0のような指定は、(区別できるように)flex:0pxとする(?)
注意するのは、grow/shrink/basisを個別で指定した場合とは、それらの値を省略したときに自動的に設定される値が異なること。
指定できる値
| flex-growの値 | この値が省略された場合は 1 とみなされる。 |
| flex-shrinkの値 | この値が省略された場合は 1 とみなされる(IE10では0) |
| flex-basisの値 | この値が省略された場合は 0 とみなされる。 |
また、以下のような指定方法もある。
- flex: 0 auto, flex: initial"
- flex:0 1 auto(初期値) と同じ。
コンテナの余白を埋めるための拡大はされないが、収まりきらない場合のアイテムの縮小は行われる。
- flex: auto
- flex: 1 1 auto と同じ。コンテナに合わせて拡大/縮小される
- flex: none
- flex: 0 0 auto と同じ。アイテムのサイズ調整はしない。
- flex: 正の実数値
- flex: 正の実数値 1 0px と同じ。flex-basisに0が指定されてるので、調整の割合がそのまま適用される。縮小の場合はアイテム幅が均一になる??
justify-content プロパティ 主軸方向の配置方法を指定
※フレックス・コンテナにて使用する
フレックスコンテナ内に余白がある場合、フレックスアイテムをどう配置するかを指定するプロパティ。
指定できる値
| flex-start | フレックスアイテムはコンテナの始端側に寄せれれる | 1 2 3 |
| flex-end | フレックスアイテムはコンテナの終端側に寄せられる | 1 2 3 |
| center | フレックスアイテムはコンテナの中央に寄せれれる | 1 2 3 |
| space-between (IE10では-ms-flex-pack:justify) | 最初のフレックスアイテムがフレックスボックスの始端寄せ、最後のフレックスアイテムはフレックスボックスの終端寄せ、残りのアイテムは均等に分散して配置。 | 1 2 3 |
| space-around | 余白の量が、各フレックスアイテムの両脇に均等に分配される。始端と終端側の余白はアイテム間の余白の半分になる。 | 1 2 3 |
align-items プロパティ 交差軸方向の配置方法を指定
align-self プロパティ
フレックスコンテナ内の交差軸方向に余白が生じる場合に、アイテムの配置方法を指定するプロパティ。
※align-itemsはフレックスコンテナにて使用する
※align-selfはフレックスアイテムにて使用する
align-itemsは全てのアイテムに対して一括して指定、align-selfはアイテムごとに個別に指定。
指定できる値
| flex-start | フレックスアイテムは、コンテナ交差軸の始端側に寄せられる |
| flex-end | フレックスアイテムは、コンテナ交差軸の終端側に寄せられる |
| center | フレックスアイテムは、フレックスボックスの中央に寄せられる |
| baseline | 各フレックスアイテムのベースライン(ボックス内1行目の下端を基準とする線ぽい)が1直線になるように配置 |
| stretch | フレックスアイテムは、width/height/min-width/max-heightなどの制限の範囲内で交差軸方向のサイズが伸縮される |
| auto | 親要素のalign-itemsが適用される。それが無い場合は、stretchが適用される。この値はalign-selfプロパティのみに指定可能 |
例:
flex-start
flex-end
center
baseline1
改行。
baseline2
stretch
align-content プロパティ アイテムが複数行に渡るときの交差軸方向の配置方法を指定
※行が複数あるフレックスコンテナにて使用する
指定できる値
| flex-start | 全ての行はフレックスコンテナの始端側に寄せられて配置 |
| flex-end | 全ての行はフレックスコンテナの終端側に寄せられて配置 |
| center | 全ての行はフレックスボックスの中央に寄せられる。 |
| space-between | 最初の行がフレックスボックスの交差軸始端側、最後の行が交差軸終端側に寄せて配置され、残りの行は均等に配置される。 |
| space-around | 各行の前後に均等に余白が分配される。交差軸始端側と終端側の余白は、行間の余白の半分となる。 |
| stretch | 余白が各行へ均等に分配され、全ての行が交差軸方向の余白を使用するように拡張される。 |
※本p410に図あり
グリッドレイアウト
グリッドとは...
ある要素の表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイアウト方法のこと。
エクセルのイメージに近いかも。1つのボックスを任意の幅で行と列に分けてセルを作り、そのセル1つ、又はセル同士を結合し、そこにコンテンツを置く。ここのコンテンツとは、要素(グリッドアイテム)が沢山集まったものを言う。
以下、各用語の説明
- グリッド要素(grid element)
- グリッドのコンテナとなる要素。displayプロパティに grid/inline-grid が指定された要素がグリッド要素となる。
- グリッドトラック(grid track)
- grid-columnsプロパティとgrid-rowsプロパティで定義される列と行の総称
- グリッドライン(grid line)
- グリッド要素を行/列に分割する線。各行/列の間にある分割線で、グリッドラインはブラウザには表示されない(概念的なもの?)
- グリッドセル(grid cell)
- 分割によってできた、個々のマス目。
- グリッドアイテム(grid item)
- グリッドセルに配置される要素。グリッド要素の子要素がグリッドアイテムとなる
- エリア と言うものもあるみたい
- セルはグリッドトラックにより分割されたもので、結合などを定義して、その後アイテムを配置する。その結合された段階のものをエリアといい、エリアにアイテムを配置することになる。
display プロパティ(グリッドに於いての…) グリッドレイアウトであることを指示する
※因みに初期値は inline。
指定できる値
| grid | 指定された要素を、ブロックレベルのグリッド要素にする |
| inline-grid | 指定された要素を、インラインレベルのグリッド要素にする |
grid-template-columns プロパティ グリッドの列を定義 (※本ではgrid-columns)
grid-template-rows プロパティ グリッドの行を定義 (※本ではgrid-rows)
指定方法:
- 半角スペース区切りで指定する -> e.g.) grid-template-columns: 10px 250px 10px 250px 10px 250px 10px;
- 繰返す値を()、繰返し回数を[]に記述 -> e.g.) grid-template-columns: 10px (250px 10px)[3];※上記と同じ意味
指定できる値
| 実数値+単位 | 数値で指定 |
| %値 | グリッド要素の幅に対する割合で列幅/行高さを指定 |
| min-content | 同じグリッドトラックにあるグリッドアイテムの最小の列幅/行高さに合わせる |
| max-content | 同じグリッドトラックにあるグリッドアイテムの最大の列幅/行高さに合わせる |
| minmax(最小値, 最大値) | 最小値から最大値までの範囲で列幅/行高さを指定する(できるだけ最大値で表示して、表示可能領域が小さい場合は最小値の範囲まで縮小するってこと？？) |
| 数値+fr | frはグリッドレイアウト独自の単位。レイアウト可能なスペースを指定した数値で分配する。
例えば、grid-template-columns:100px 1fr 2fr は、
|
| auto | minmax(min-content, max-content)と同じ。 |
grid-column プロパティ グリッドアイテムを配置
grid-row プロパティ
整数値でグリッドアイテムを配置する列/行の番号を指定する。マイナス値を指定すると、終端側(下
右)から数えての指定となる。
- 番号を1つだけ指定 : grid-column:3;は3列目のみを表す。
- スラッシュ区切りで始点/終点を指定 : grid-column:3/5は3列目から5列目を表す。
- 終点の代わりにspanで長さを指定 : grid-column:3/span 2は3列目から連続する2列を選択することを表す。
※本のgrid-column/row-spanは無くなったみたい。この内容はここ参照
grid-template-areas プロパティ エリアに名前をつける。
grid-area プロパティ エリア名でアイテムを配置する
grid-templateは、グリッド要素に記述し、
grid-areaは、グリッドアイテムに記述する。
使用方法:
例えば、
grid-template-areas: "areaA areaB"
"areaA areaC";
とすると、4エリアに名前がつく。
ここでareaAが1行目と2行目にまたがっているので、
grid-area: areaA
と言うのは、grid-row: 1 / span 2 と同じ意味になる。
名前を付けなくていいエリアは、1つ以上の.で表す。
例えば、grid-template-areas: "areaA ..." "areaA areaC"みたいな。
justify-items プロパティ 全アイテムに対して横方向への寄せを指定
justify-self プロパティ 各アイテムごとに個別に横方向への寄せを指定
align-items プロパティ 全アイテムに対して縦方向への寄せを指定
align-self プロパティ 各アイテムごとに個別に縦方向への寄せを指定
※これは本には無い。(本ではgrid-column-alignとなってる)。そのため、こことか、フレックスボックスとかを参考に記述。
指定する値は、本と同じくstart/center/end/stretch(初期値) みたい。stretchは初期値だから指定してもしなくても変わらず。(right/leftでもできた..)
この他、ギャップを指定する方法もあるみたいで、
grid-row-gap プロパティ や
grid-columngap プロパティ があるみたい。
恐らく、pxなどの単位や、パーセント値での指定をするものと思われる。grid-gap (row値) (column値)もあるみたいだが、まだ使えない？？
トランジション
トランジションとは...
あるスタイルを別のスタイルへ遷移(transition)させること。滑らかに変化させる。
CSSでdiv:hoverのように、擬似クラスを使ってbackground等のプロパティを変化させるとする。そこで、backgroundプロパティに対してトランジションを定義しておくと、元のbackground値から変化後のbackground値に滑らかに変化するようになる。
アニメーションも同じような感じだが、アニメーションはキーフレームを設定することにより、スタイルの変化を細かく指定できるという違いがある。
transition-property プロパティ トランジション効果をつけるプロパティを指定
指定されたプロパティが変化するときに、トランジション効果をつける。
指定できる値
| none | 変化するプロパティはない |
| all | トランジション効果を適用できる全てのプロパティを変化させる |
| プロパティ名 | 変化させるプロパティ名を指定。複数指定するには、カンマ区切りで記述する。 |
transition-duration プロパティ トランジションにかける時間を指定
時間を、単位に秒(s)またはミリ秒(ms)を付けて指定する。複数のプロパティが指定されている場合は、カンマ区切りで記述。
transition-timing-function プロパティ トランジションの速度のパターンを指定
指定できる値
| ease | ゆっくり変化を始め、途中で加速して、最後に減速する。cubic-bezier(0.25,0.1,0.25,1)と同じ |
| linear | 一定の速度で変化する。cubic-bezier(0,0,1,1)と同じ |
| ease-in | ゆっくり変化を始め、その後加速する。cubic-bezier(0.42,0,1,1)と同じ |
| ease-out | 高速で変化を始め、減速しながら終わる。cubic-bezier(0,0,0.58,1)と同じ |
| ease-in-out | ゆっくり変化を始め、徐々に加速し、減速しながら終わる。 |
| step-start | steps(1, start)と同じ |
| step-end | steps(1, end)と同じ |
| steps(ステップ数, start or end) | 変化時間をステップ数で等間隔に分割して変化させる。ステップ数は1以上の整数。start/endはステップのタイミングを指定する。startは最初の変化を変化開始直後で行い、endは最後の変化を変化終了直前で行うことを意味する。
省略するとendとなる。 |
| cubic-bezier(x1,y1,x2,y2) | ベジエ曲線で変化の仕方を指定する。x軸は変化にかける時間、y軸は変化の進行度合いとする。変化開始後の曲線は、P0(0,0) P1(x1,y1)にて指定し、変化終了前の曲線は P3(1,1) P2(x2,y2)にて指定する。P1がy=0(x軸)の線に近くなる程、P2がy=1の線に近くなる程、変化開始/終了時はゆっくりで途中だけ早くなり、P1がx=0(y軸)の線に近くなる程、P2がx=1の線に近くなる程、変化開始/終了時は急になり途中は緩やかになる、と思われる。(x1,x2,y1,y2は0〜1の範囲で指定する)
※本p432に図あり |
transition-delay プロパティ トランジションを遅れて開始させる
遅れさせる時間を秒(s)またはミリ秒(ms)で指定する。マイナス値を指定した場合は、逆にその分変化が進んだところから表示される。例えば-3sとした場合、開始から3秒後のポイントから始まる。
トランジションに複数のプロパティが指定されている場合は、カンマ区切りで記述する。
transition プロパティ トランジションプロパティを一括指定
transition-property, transition-duration, transition-delay, transition-timing の値を半角スペース区切りで指定。
基本的に任意の順番でOKだが、durationとdelayについては、先に指定されたものがduration、後のがdelayとなる。
また、IE10では上記の順番でないとダメとか。
アニメーション
アニメーションとは...
トランジションの機能をCSS3で拡張したもの。
キーフレームを設定することで変化途中のスタイルも細かく設定できる。
@keyframes アニメーションのキーフレームを指定するアットルール
@keyframes キーフレーム名 {
0%(またはfrom) { プロパティ: 値; 〜 }
◯% { プロパティ: 値; 〜 }
100%(またはend) { プロパティ: 値; 〜 }
}
という形式になる。キーフレーム名は、アニメーションしたい要素に設定するanimation-nameプロパティに使用する。
animation-name プロパティ 利用するキーフレームを指定する
指定できる値
| none | アニメーションを実行しない |
| キーフレーム名 | @keframeで付けたキーフレーム名を指定する。複数指定はカンマ区切りで。 |
animation-duration プロパティ アニメーションを実行する時間を指定
アニメーションが完了するまでの時間を、秒(s)またはミリ秒(ms)で指定する。複数のアニメーションに対して指定するには、カンマ区切りで指定する。
animation-timing-function プロパティ アニメーションの速度のパターンを指定
これはアニメーション全体ではなく、キーフレームごとに指定する。@keyframe{ 0% { background:brack; animation-timing-function:ease } .... } みたいな感じで。
ただ、@keyframesで0%,100%しか無い場合は直接、要素のスタイルに記述もできる？本p447の例にて。
指定できる値は、transition-timing-functionと同じ
animation-iteration-count プロパティ アニメーションを実行する回数を指定
指定できる値は、
繰り返して実行する回数か、
infinite(無限) を指定。
animation-direction プロパティ アニメーションを繰り返す方向を指定
アニメーションを繰り返す場合、折り返して逆向きに実行するかを指定するプロパティ。逆向きに実行するときはanimation-timing-functionプロパティの動作も逆になる。
指定できる値
| normal | 通常の方法でアニメーションを繰り返す |
| reverse | 逆向きに実行しながら繰り返す |
| alternate | 奇数回目は通常通りに、偶数回目は逆向きに実行して繰り返す。
|
animation-play-state プロパティ アニメーションの実行・一時停止を指定
複数のアニメーションに対して指定するには、カンマ区切りで指定する。
指定できる値は
running (一時停止から再開する。)
paused (実行中のアニメーションを一時停止する)
animation-delay プロパティ アニメーションを遅れて開始させる
複数のアニメーションに対しては、カンマ区切りで指定。
指定できる値は、
開始までの待機時間を、秒(s)またはミリ秒(ms)で指定する。マイナス値が指定された場合は、その分アニメーションが実行されたポイントからの再生となる。例えば-3sを指定した場合、開始から3秒後のポイントから開始される。
animation-fill-mode プロパティ アニメーションの待機中や完了後のスタイルを指定
待機中とは、animation-delayで指定する待機時間を、完了後とは、animation-durationで指定する実行時間が経過した後のことを指す。
通常、アニメーション完了後は元のスタイルに戻る。
指定できる値
| none | 待機中と完了後のスタイルは変更されない |
| forwards | 完了後に、最後のキーフレームのスタイルを保持する。 |
| backwards | 待機中に、最初のキーフレームのスタイルを適用する。 |
| both | forwardとbackwardsの両方の規定に従う。forwardsとbackwards両方を指定したようなもの。 |
animation プロパティ アニメーションのプロパティを一括して指定
animation-name,
animation-duration,
animation-timing-function,
animation-delay,
animation-iteration-count,
animation-direction,
animation-fill-mode
をそれぞれ指定。省略されたものは初期値が使われる。
基本的に順不同だが、durationとdelayは、先に指定されたものがanimation-durationで、後がanimation-delayになる。
IE10では上記の順番でないとダメ(?)
要素に変形効果を付ける
transform プロパティを使って、その値に変形関数を設定していく。
noneを指定すると、変形効果を適用しない意味になる。
2次元の変形関数
基点は、ボックスの中心(50%,50%)の位置となる。(transform-originで変更可)
| 変形効果 | 変形関数 | 説明 |
|---|
| 移動 | translate(x軸方向の距離,y軸方向の距離)
translateX(x軸方向の距離)
translateY(y軸方向の距離) | 要素を移動する。「実数値+単位」または「%値]で指定。値が1つの場合はx軸の値としy軸値は0とされる |
| 拡大・縮小 | scale(x軸方向の倍率,y軸方向の倍率)
scaleX(x軸方向の倍率)
scaleY(y軸方向の倍率) | 要素を拡大又は縮小させる。標準のサイズを1として、単位無しの実数値で指定する。値が1つの場合はx,y軸共に同じ値となる |
| 回転 | rotate(角度) | 要素を回転。角度をdeg/rad/gradなどで指定。プラス値は時計回りとなる。 |
| 傾斜 | skewX(x軸方向の角度)
skewY(y軸方向の角度) | 傾斜させる角度をdeg/rad/gradなどで指定。 |
| 変換行列 | matrix(a,b,c,d,e,f) |
・
という式で変換する。その9つの値を指定する。計算式は、(ax+cy+e, bx+dy+f)となる。
|
3次元の変形関数
3次元変形は、横(x軸)縦(y軸)ブラウザに垂直方向(z軸)に対して、変形効果を適用し、透視図法(遠近法)で表現する。
z軸は手前がプラス、奥がマイナス。
| 変形効果 | 変形関数 | 説明 |
|---|
| 移動 | translate3d(x軸方向の距離,y軸方向の距離,z軸方向の距離)
translateZ(z軸方向の距離) | 要素の移動。「実数値+単位」又は「%値」で指定。ただし、z軸は「実数値+単位」の指定のみ可。 |
| 拡大・縮小 | scale3d(x軸方向の倍率,y軸方向の倍率,z軸方向の倍率)
scaleZ(z軸方向の倍率) | 標準のサイズを1として、倍率を単位無しの実数値で指定f |
| 回転 | rotate3d(x,y,z,回転の角度)
rotateX(x軸周りの角度)
rotateY(y軸周りの角度)
rotateZ(z軸周りの角度) | rotate3dは基点(origin)と指定された方向ベクトル(x,y,z)を結ぶ直線を軸として要素を、時計回りに回転させる。rotateX,Y,Zはそれぞれx,y,z軸を回転軸とする。deg/rad/grad等で指定 |
| 透視図法 | perspective(視点の距離) | これで視点の距離を指定すると、透視図法により描画される。何も指定しないと、z軸に平行な視点で描く投影図法になるので、奥行きのある表現にならない。つまりこの関数を指定しないと、例えばy軸において回転させると幅が狭くなったように表示されるが、全ての点において視線が平行に視点との距離が一定で表示されるので、自分から遠いところが小さく、近いところが大きく表示されることはなくて、単に幅が狭くなったように表示されるだけ。 参考 |
| 変換行列 | matrix(a,b,..o,p) | 4x4の変換行列の各要素に対応する16個の値を指定し、それを利用して座標を変換する。
・
|
transform-origin プロパティ 変形の基点を指定する
ボックスの左上を(0,0)又は(0,0,0)としたときの基点の位置を x軸,y軸,z軸の順で半角スペースで区切って指定。
2次元の場合、値が1つだけ指定された場合は、2つ目にcenterが指定されたものとする。
3次元の場合、値が1つ、又は2つの場合、3つ目の値は0が指定されたものとする。
z軸に設定できる値は、実数値+単位のみ。
指定できる値
| パーセント値 | 要素のボックスサイズに対する割合で指定 |
| 実数値+単位 | 数値で指定 |
left,
center,
right,
top,
bottom | x軸方向の位置(left,center,right)、y軸方向の位置(top,center,bottom)を指定 |
transform-style プロパティ 3次元上での子要素の描画方法を指定
指定できる値
| flat | flatは初期値。親要素(本プロパティを指定した要素)の3次元変形効果は子要素には適用されない。
子要素は、親要素に平面的に投影された形で表示される。 |
| preserve-3d | 親要素に適用した3次元の変形効果は子要素にも適用される。3次元上で親要素と子要素の位置関係がそのまま保持されるので、子要素が影に隠れて見えなくなることもある。 |
transform-style:flatはどのようなイメージかというと、
親要素を回転させても、子要素の軸は回転しない。実際、preserve-3dを指定しないで、親要素でrotateY(45deg)としたあと、子要素でrotateY(-45deg)とすると、子要素の表示は親要素で回転させない場合と同じになる。しかし、子要素で回転させない場合、親要素にくっついて子要素も回転しているように見える。これを理解するには、要素はその角度が明示的に指定されるまで現在の角度を保持して表示されると考えられる。
因みに、軸は常に要素の基点に存在するので、親要素の移動(translate)は伸縮(scale)は、flatもpreserve-3dも変わらずそのまま相対的に子要素にも適用される(みたい)。
ただし、flatは常に子要素が前面に表示されるのに対し、preserve3dはそうとは限らない。preserve-3dのとき、親要素でrotateY(45deg)、子要素でtranslateX(100px)としただけで、子要素が後ろに表示された。これにより、本プロパティが軸だけではなく、表示にも関わるものだとわかる。
flatは子要素が常に前面に、preserve-3dはそうとは限らないということ。
処理的に考えると、flatは子要素側から解釈していき、その背後に親要素を描画していく。その際、親要素に子要素を取り込むとき上述のような軸の処理をする。一方preserve-3dは、親要素側から解釈し、軸の変形効果を子要素にも適用しながら子要素を描画していく。
perspective プロパティ 3次元上で、子要素を透視図法で描く
perspective()関数は、その要素にのみ適用されるのに対し、perspectiveプロパティはその子要素(多分孫要素も含む)に適用される。
指定できる値は、perspective()関数と同じく、
none(視点距離を変更しない。子要素は投影図法で表現)
実数値+単位 で指定する。
※子要素の基点は、本プロパティを設定した要素のボックスの中心(50%,50%)となる。
perspective-origin プロパティ 3次元上で、子要素の視点を変更
子要素の透視図法の基点は、perspectiveプロパティが指定された要素のボックスの中心だが、それを変更する。ボックスの左上を(0,0)としたときの基点の位置を指定。
値を1つだけ指定した場合、2つ目にcenterが指定されたものとみなす。
指定できる値は、transform-originと同じ。
backface-visibility プロパティ 3次元上で、要素の裏面の表示方法を指定
要素を回転すると、裏面が見えることがあるが、その裏面を表示するかどうか。
指定できる値
| visible | 裏面が表示される(初期値) |
| hidden | 裏面が表示されない。たいてい白色になる(?) |
