-
アニメーションの速度のパターンを設定する
animation-timing-functionプロパティを使うと、アニメーションを実行する速度のパターンを指定できます。animation-timing-functionプロパティは、アニメーショ ...
-
アニメーションのキーフレームとアニメーション時間を設定する
2015/11/9 @keyframes, animation-duration, animation-name
トランジションの機能を拡張したもので、CSS3アニメーションという物があります。トランジションと同じようにプロパティの値を変化させることで効果を実現します。トランジションでは変化の始まりと終わりのスタ ...
-
トランジションの速度のパターンを設定する
2015/11/9 transition, transition-delay, transtion-timing-function
transtion-timing-functionプロパティを使うと、変化する速度のパターンをしていできます。キーワード、step関数、cubic-bezier関数のいずれかで指定する。 transt ...
-
トランジション効果を付けてみる
2015/11/9 transition-duration, transition-property, トランジション効果, 遷移
トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化させる効果のことです。FlashやJavaScriptを使用せずにスタイルの変化を表現できます。トラ ...
-
IE限定?グリッドレイアウトを使う
グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイアウト方法のことです。今まではposition,floatプロパティを利用してコンテンツを配置しまし ...
-
フレックスコンテナ内で複数行のとき、交差軸方向の配置方法を指定する
2015/11/5 align-content, フレックスコンテナ, 複数行
今回書くalign-contentプロパティは、フレックスコンテナ内にフレックスアイテムを複数行に配置して、交差軸の方向に余白が生じる時、フレックスアイテムと余白をどのように配置するかを指定します。 ...
-
フレックスコンテナ内の主軸方向の配置方法を指定する
2015/11/5 justify-content, フレックスコンテナ
フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを指定するのがjustify-contentプロパティです、このプロパティはフレックスコンテナに対して ...
-
フレックスアイテムの幅の増減を個別指定
2015/11/5 flex-basis, flex-grow, flex-shrink, フレックスアイテム
フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りきらずはみ出してしまうときがあります。そんなときに、アイテムの幅を調整することで、コンテナ内にぴったり ...
-
フレキシブルボックスレイアウトでアイテムの並び順を指定する
2015/11/5 order, フレキシブルボックスレイアウト
フレックスアイテムはソースコードに書かれた順番でフレックスコンテナ内に普通は配置されます。アイテムの配置順序をしたいときは、それぞれのアイテムがどの順序グループに属するのかをorderプロパティで指定 ...
-
フレックスコンテナでアイテムを複数行に配置する
フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。 フレックスアイテムが複数の行に分割され ...