Contents
CSSアニメーション
大きくわけてふたつのやり方がある。transitionプロパティを設定するか、animationプロパティを設定するか。
transitionプロパティを設定すると、その要素のプロパティの値が変化するとアニメーションしながら変化してくれる。プロパティが変化するパターンは以下の3つが考えられる(これ以外あるか?)。
- javascriptで直接プロパティの値を書き換える。
- javascriptでclassを付加することで間接的にプロパティの値を書き換える。
- 疑似クラス(:hoverとか)でプロパティの値が変化する。
animationプロパティを設定すると、すぐにアニメーションが開始される。@keyframesでつくったアニメーションを任意のタイミングで開始したい場合は、専用のクラスをつくってjavascriptでクラスを追加する。
flex-box
レイアウトでfloatを使うことは現在はあまりなく、flex-boxを使うのが一般的とのこと。
flex-boxには以下のプロパティがある。
- flex-direction:主軸の方向を指定。columnを指定すると、主軸と直行軸が入れかわる。
- justify-content:アイテムを主軸に沿って配置。
- align-items:アイテムを直行軸に沿って配置。
- align-content:直行軸方向のスペースの管理。
- flex-wrap:折り返すかどうか。
- flex-flow:flex-directionとflex-wrapのショートハンドプロパティ。このふたつのプロパティは同時に使われることが多い。
- order:アイテムの順序を指定。すべてのアイテムのデフォルトはゼロ。なので先頭に持ってきたければ-1、末尾に持ってきたければ1を指定すればいい。
- align-self:アイテムを直行軸に沿って配置。
- flex: アイテムの比率を決める。ふたつのアイテムにflex: 1;とflex: 1;を指定すると1対1の幅になる。
要素を縦方向で中央寄せしたいとき
text-align: centerとかline-heightを要素の高さにあわせるとかposition: absoluteでtop: 50%でtransoform: translateY(-50%)とかいろいろあるが、なんかわからんがそれでもずれることがある。いちばん手っ取り早いのはflexboxを使うこと。
1 2 3 |
display: flex; align-items: center; /* 上下中央寄せ */ justify-content: center; /* 左右中央寄せ */ |
親要素のCSSに↑を設定するのがいちばんすっきり書ける。
中央揃え
基本は
1 |
margin: 0 auto; |
ブロック要素はそれでいいけど、インライン要素は親で
1 |
text-align: center; |
注意すべきはdiv要素とかがa要素とかでラップされている場合。この場合divやaにmarginあててもだめ。aの親で
1 |
text-align: center; |
要素を浮かしたい場合
1 |
float: left; |
か、
1 |
position: absolute; |
ただ浮かしたいだけなら親要素の状態によらないfloatのほうがいいと思われ。ただ、ほかの人のコードみてるとposition使っていることもある。
positionはtopとかleftとか指定しないとただ浮かすだけだが、指定すると親のposition属性の状態によって挙動が変わる。たとえばこのように指定すると、
1 2 3 |
position: absolute; top: 20px; left: 20px; |
自分からみてposition属性がstaticではないいちばん上の親の左上を起点にして(20px, 20px)の位置になる。上にstatic以外の親がいない場合はウィンドウの左上が起点になる。
自分的な理解だと、とりあえず浮かせて左か右に寄せたい場合はfloat。もっと細かに位置を調整したい場合にpositionをいじる。floatとpositionはそういう関係。たぶん。
表を小さくしたくてwidth属性いじっても小さくできないとき
表のなかのtd要素、th要素の文字を小さくすればいい。
1 2 3 |
table td, table th { font-size: xx-small; } |
トンチかよ。
サイトをレスポンシブにする場合
スタイルシートにメディアクエリ書くだけでは正しく動作しない。HTMLファイルのhead要素のなかに次を入れておく。
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
DIV要素を隙間をあけつつ横並びにする
floatと隣接結合子を使う方法。
1 2 3 4 5 6 7 8 9 |
.box { width: 100px; height: 100px; float: left; } .box + .box { margin-left: 5px; } |
あるいはinline-blockにする。
1 2 3 4 5 |
.box { width: 100px; height: 100px; display: inline-block; } |
あと、flexboxを使う方法がある。
絶対配置で親要素の真ん中に配置する
真ん中の数値を計算してもいいけど、以下のようにすると左右真ん中に配置してくれる
1 2 3 4 |
position: absolute; left: 0; right: 0; margin: 0 auto; |
もちろん親要素はposition: relative。
親要素いっぱいに配置する
親要素いっぱいに配置するには
1 2 3 4 5 |
position: absolute; top: 0; bottom: 0; left: 0; right: 0; |
ついでにウィンドウいっぱいに配置するにはposition: fixedにするだけ。
1 2 3 |
position: absolute; left: 0; right: 0; |
だと左右いっぱいに配置する。
relativeとabsoluteのちがい
relative | absolute | |
---|---|---|
基準 | 自分 | 親要素 or window |
前の要素が詰められるか | 詰められない | 詰められる |
すこしずらしたいときはrelative。右端からの相対位置を指定したいときはabsoluteでマイナス値を指定。
親がstatic以外で自分がabsoluteのとき、左上が基準と解説している記事も多い。しかし親要素全体が基準と考えたほうがいい。マイナス値を指定すると、たとえば右端からの相対位置を指定できる。