HTML/CSS メモ

Contents

1 CSSアニメーション
2 flex-box
3 要素を縦方向で中央寄せしたいとき
4 中央揃え
5 要素を浮かしたい場合
6 表を小さくしたくてwidth属性いじっても小さくできないとき
7 サイトをレスポンシブにする場合
8 DIV要素を隙間をあけつつ横並びにする
9 絶対配置で親要素の真ん中に配置する
10 親要素いっぱいに配置する
11 relativeとabsoluteのちがい

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を使うこと。

display: flex;
align-items: center; /* 上下中央寄せ */
justify-content: center; /* 左右中央寄せ */

display: flex;

align-items: center; /* 上下中央寄せ */

justify-content: center; /* 左右中央寄せ */

親要素のCSSに↑を設定するのがいちばんすっきり書ける。

中央揃え

基本は

margin: 0 auto;

1	margin: 0 auto;

ブロック要素はそれでいいけど、インライン要素は親で

text-align: center;

1	text-align: center;

注意すべきはdiv要素とかがa要素とかでラップされている場合。この場合divやaにmarginあててもだめ。aの親で

text-align: center;

1	text-align: center;

要素を浮かしたい場合

float: left;

1	float: left;

か、

position: absolute;

1	position: absolute;

ただ浮かしたいだけなら親要素の状態によらないfloatのほうがいいと思われ。ただ、ほかの人のコードみてるとposition使っていることもある。
positionはtopとかleftとか指定しないとただ浮かすだけだが、指定すると親のposition属性の状態によって挙動が変わる。たとえばこのように指定すると、

position: absolute;
top: 20px;
left: 20px;

position: absolute;

top: 20px;

left: 20px;

自分からみてposition属性がstaticではないいちばん上の親の左上を起点にして(20px, 20px)の位置になる。上にstatic以外の親がいない場合はウィンドウの左上が起点になる。
自分的な理解だと、とりあえず浮かせて左か右に寄せたい場合はfloat。もっと細かに位置を調整したい場合にpositionをいじる。floatとpositionはそういう関係。たぶん。

表を小さくしたくてwidth属性いじっても小さくできないとき

表のなかのtd要素、th要素の文字を小さくすればいい。

table td, table th {
  font-size: xx-small;
}

table td, table th {

font-size: xx-small;

}

トンチかよ。

サイトをレスポンシブにする場合

スタイルシートにメディアクエリ書くだけでは正しく動作しない。HTMLファイルのhead要素のなかに次を入れておく。

<meta name="viewport" content="width=device-width, initial-scale=1">

1	<meta name="viewport" content="width=device-width, initial-scale=1">

DIV要素を隙間をあけつつ横並びにする

floatと隣接結合子を使う方法。

.box {
  width: 100px;
  height: 100px;
  float: left;
}

.box + .box {
  margin-left: 5px;
}

.box {

width: 100px;

height: 100px;

float: left;

}

.box + .box {

margin-left: 5px;

}

あるいはinline-blockにする。

.box {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.box {

width: 100px;

height: 100px;

display: inline-block;

}

あと、flexboxを使う方法がある。

絶対配置で親要素の真ん中に配置する

真ん中の数値を計算してもいいけど、以下のようにすると左右真ん中に配置してくれる

position: absolute;
left: 0;
right: 0;
margin: 0 auto;

position: absolute;

left: 0;

right: 0;

margin: 0 auto;

もちろん親要素はposition: relative。

親要素いっぱいに配置する

親要素いっぱいに配置するには

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

ついでにウィンドウいっぱいに配置するにはposition: fixedにするだけ。

position: absolute;
left: 0;
right: 0;

position: absolute;

left: 0;

right: 0;

だと左右いっぱいに配置する。

relativeとabsoluteのちがい

	relative	absolute
基準	自分	親要素 or window
前の要素が詰められるか	詰められない	詰められる

すこしずらしたいときはrelative。右端からの相対位置を指定したいときはabsoluteでマイナス値を指定。

親がstatic以外で自分がabsoluteのとき、左上が基準と解説している記事も多い。しかし親要素全体が基準と考えたほうがいい。マイナス値を指定すると、たとえば右端からの相対位置を指定できる。