プログラミング備忘録

プログラミングの学習状況をメモしています

29日目

今日の学習

CSS

Flexbox

dotinstall.com

Flexboxで並べた要素のことをflex item、親要素のことをflex containerと呼ぶ。

Flexboxを使うには、親要素にdisplay: flex;が必要。 ＊直近の子要素のみがflex itemになる。

まずflex containerを設定し、さらにflex itemにプロパティを設定することでレイアウトを作っていくことができる。

display: flex;を使用してFlexboxを設定するが、設定すると左から右に「主軸」が、主軸に直交する形で上から下に「交差軸」というものが設定される。

主軸に沿って要素が並べられていく。軸がどちらの方向（右か左か、上か下か）を意識する必要がある。

座標で言うと、主軸がx軸で、交差軸がy軸という捉え方をしておけばいいだろうか。

alignとあれば、交差軸に対しての操作になる。

また、縦方向のFlexアイテムでは、marginの相殺が起こらない。

Flex Containerで使えるプロパティ
flex-direction

主軸の方向を決めるためのプロパティ。

  • row　flex-direction: row
    初期値はrowで、主軸が左から右に設定されている。
    →→→
    ①②③

  • row-reverse
    主軸が反転し、右から左に要素が並べられる。
    ←←←
    ③②①

  • column
    基本の形から主軸と交差軸が逆になる
    ①
    ②
    ③

-column-reverse
主軸の向きが反転し、下からの順番になる
③
②
①

justify-content

主軸に沿った要素の揃え方を指定できる。

  • flex-start　justfycontent: flex-start
    主軸の始点からスタートする。主軸が左からスタートであれば、左揃えになる。

  • flex-end
    主軸の終点からスタートする。主軸が左からスタートであれば、右揃えになる。

  • center
    主軸に沿って中央揃えになる

-space-between
要素の間に余白が均等に配置される

align-items

交差軸方向に余裕がある場合にのみ使用できるプロパティ。

  • flex-start　align-items: flex-start
    交差軸の始点からスタートする。交差軸が上から下であれば、上揃えになる。

-flex-end
交差軸の終点からスタートする。交差軸が上から下であれば、下揃えになる。

-center
中央揃えになる。

flex-wrap

並べたい要素の幅がコンテナの幅を超える場合に使えるプロパティ。

  • nowrap（初期値） 　flex-wrap: nowrap
    何も指定しない場合は、折り返さずにそれぞれのコンテナの幅が縮んで収まる。
    →
    ①②③④

  • wrap
    はみ出した部分を折り返したいときに使用する。
    あふれたら交差軸の方向に次のコンテナが作られる。
    ①②③↓
    ④

  • wrap-reverse
    交差軸が反転する。交差軸が始まる位置から主軸に沿って並べられる。
    →
    ④
    ①②③↑

align-content

交差軸方向に余裕がある場合にのみ使用できるプロパティ。

align-itemsとの違いは、align-contentはflex-wrapで複数行になっているときに使用する。

アイテムが折り返されているときのみに違いがある。

  • flex-start　align-content: flex-start
    交差軸の始点から揃えられる。

  • flex-end
    交差軸の終点から揃えられる。

  • center
    中央に揃えられる。

  • space-between
    余った余白が要素の間に配分される。

flex-flow

flex-directionとflex-wrapを一括で指定することができる

flex-direction: row
flex-wrap: wrap

↓書き換え

flex-flow: row wrap
Flex Itemで使えるプロパティ
align-self

交差軸方向の揃えを指定する。個々の要素の位置を調整することができる。

flex-start, flex-end, centerが設定できる。

order

順番を指定することができる。初期値は0。

.box①  { order: 2; }
.box② { order: 3; }
.box ③ { order: 1; }

③①②

flex-basis

flex-grow、flex-shrinkでの計算に使われる要素のサイズを決めるためのプロパティ。

初期値はauto。（widthが設定されていれば、その数値が適用される）

Flexboxは、flex-directionを変えることで主軸の方向を変更することができる。

そのため、widthとheightを統一的に扱うために、「主軸方向の大きさ」であるflex-basisを使用する。

主軸が右から左→であれば、flex-basisで指定されるのは要素の幅になる。

witdhが指定してあっても、Flexbox内ではflex-basisの大きさが優先される。

ただし、max-widthが設定されていれば、そちらが優先される。

＊Flexbox内の優先順位
width < flex-basis < max-width

flex-grow

主軸方向に余白がある場合、それぞれの要素をどれだけ伸ばすかを決める。

flex-growの初期値は0。この数値を指定することで、余ったpx（余白）をどのように分配するか決める。

.box { width: 100px; }
.box1 { flex-grow: 1; }
.box2 { flex-grow: 1; }
.box3 { flex-grow: 2; }

上の例だと、主軸全体が400pxだった場合、100px*3boxで、100px余った状態になっている。○の部分が余白とする。

①②③○

この○の部分を、1:1:2の割合で分けて、boxを引き伸ばす。

数値を一つだけ1にすることもある。どれか一つだけに余白を割り当てたいときに。

flex-shrink

コンテナの幅が足りなかったとき、どの要素をどれだけ縮めるかを指定する。

初期値は1。

主軸全体が300pxの部分に、一つ100pxのboxを4個並べるとすれば、100px足りなくなる。

その場合、100pxをどのような割合で分配して、要素を縮めるかを指定できる。

flex

flex-grow, flex-shrink, flex-basisをまとめて設定することができる。

.box1 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;

↓書き換え

.box1 { 
  flex: 1 1 100px;
}

★flex: initial
0, 1, autoなので、領域が余ったときに伸ばさないが、領域が足りなくなったら縮める。

★flex: auto
1, 1, autoなので、領域が余ったら広げる、足りなくなったら縮める。

★flex: none
0, 0, autoなので、伸ばさない、縮めない。

★flex: 1
flex-growだけを設定したことになる。このとき、`flex-basisの初期値は0%になり、余った領域が全体の幅になるため、綺麗に配分されるようになる。

たいてい、余白があれば伸ばしてもらうために、一つのアイテムだけにflex: 1;を指定することがほとんどらしい。

Flexboxを使った中央揃え

親要素に対して、

親要素 {
  display: flex;
  justify-content: center;
  align-items: center;
}

と設定することで、子要素を中央揃えにすることができる。

CSSアニメーション

dotinstall.com

CSSで、ポップアップを出したり動くアイコンを作ることができるらしい。

動いたりするものはJavaScriptで書く、みたいなイメージがあったのでちょっと驚き。

作成の流れは、変化前のスタイルと変化後のスタイルを作成し、その中間を補完する。

中間をtransition-propertyで補完していく。

transition

四角いスタイルを、マウスホバーで丸くするようなアニメーションを作りたい場合は、まずそのような情報をCSSに記載する。

赤い正方形
.square {
  width: 100px;
  height: 100px;
  background: red;
}

マウスホバーで、丸くなるようにする
.square:hover {
  border-radius: 50%;
}

この中間の情報を継ぎ足すために、transitionを使用する。

変化元のセレクターに記載する
.square {
  width: 100px;
  height: 100px;
  background: red;

＊変化先を指定
  transition-property: border-radius;

＊変化にかかる時間を設定
  transition-duration: 1s;

＊変化が始まるまでの時間を設定
  transition-delay: 1s;
}

これで、.squareがホバーされてから1秒後に、1秒間かけて四角から丸い形に変化していくようにできる。

transform

変形させるために使われるプロパティ。よく使用されるものは三つある。

一括指定プロパティも用意されている。

transition - CSS: カスケーディングスタイルシート | MDN

  • translate
    要素を移動させることができる。xy方向の移動量を指定できる。
    translateX, translateY,で固定の方向への指定も可能。
    例：transform: translateX(100px) => x軸に100px移動させる

  • rotate
    角度を与えて、回転させることができる。
    例：transform: rotate(30deg) => 30度回転させる

  • scale
    リサイズすることができる。
    scaleXでx方向のリサイズ、slaceYでy方向のリサイズができる。
    例：transform: scale(2, 0.5) => x方向に2倍、y方向に0.5倍のサイズにする

＊複数の変形を同時に指定することもできるが、指定する順番に注意する。

  • transform-origin
    変形の起点を変更する。なにも設定しなければ、中心を基準に変形する。
    変形前のものに指定すること。
変化の速度

ドットインストールでは、「UIの変化速度は大体0.3秒くらいが小気味いい速度と言われている」と説明があった。

【翻訳してみた】マテリアルデザイン - 速度について｜Iori Iwaki｜Motion designer｜note

このサイトでは、UIが動いている場面と、実際の設定時間が掲載されており、とても分かりやすくて面白かった。

個人的には、あまりに動きが早いと酔うことがあるので、ゆったりしている方が好みだなと感じた。

イージングという概念も面白かった。

イージングはアニメーションの変化割合を調整する方法です。イージングを使用すると一定の速度で動くよりも要素の変化を加速させたり減速させることが出来ます。

現実世界では、ものは即座に動き始めたり止まることはありません。加速と減速までに時間がかかります。イージングは摩擦のような自然の力によって影響されるように要素を動かします。

transition-timing-function

アニメーションの速度に緩急をつけるためのプロパティ。

  • ease（デフォルト値）
    ゆっくり速度が上がり、ゆっくり速度が落ちる

  • ease-out
    初速が一番早く、徐々にゆるやかになる
    小さいUI部品によく使われる

  • ease-in-out
    easeよりも最初の動きがゆっくり
    大きいUI部品によく使われる

  • linear
    最初から最後まで同じ速度で動く
    ローディングアイコンなどに使われる

Chromeの検証からアニメーションを調整

調整したいもののtransition-timing-functionの部分をクリックすると、用意されているものを使用したり自分で速度を調整できる。

f:id:hasegawa_note:20210531182015p:plain

animation

animationプロパティを使用することで、アニメーションを繰り返したり、途中のフレームで他の変化を入れたりすることができる。

一括指定プロパティも用意されている。

animation - CSS: カスケーディングスタイルシート | MDN

【CSS3】@keyframes と animation 関連のまとめ - Qiita

まずは、はじめに@keyflamesを使って、どのようなアニメーションにするか？を設定していく。

アニメーションがどれくらい進行しているのかを%で表示する。0%が開始時で、100%が終了時。

@keyframes 任意の名前 {

＊最初の状態
  0% {
    transform: none;
  }

＊アニメーションが80%の進行時の状態
  80% {
    transform: translateX(200px) rotate(360deg);
  }

＊アニメーション終了時の状態
  100% {
    transform: translateX(300px) rotate(360deg);
  }
}

次は、@keyframesでつけた名前を、アニメーションさせたいセレクターに対してanimation-nameを使用して書き加える。

.box {
＊@keyframesでつけた名前をつける！
  animation-name: 任意の名前;
}
animation関連プロパティ

  • animation-duration
    変化にかかる時間を指定

  • animation-delay
    変化が始まるまでの時間を設定

  • animation-fill-mode
    アニメーション終了後に、どうするかを設定できる
    例：animation-fill-mode: forwards; => アニメーション後、その場に留まる

  • animation-iteration-count
    アニメーションを何回繰り返すかを決められる
    例：`animation-iteration-count: infinie; => 無限にアニメーションを繰り返す

  • animation-direction
    アニメーション再生の向きを順方向、逆方向、前後反転のいずれにするかを設定する
    例：`animation-direction: alternate; => アニメーションを折り返して再生する

  • animation-timing-function
    transition-timing-functionと同様に、timing-functionを設定できる