vesna

no image

CSS

アニメーションの速度のパターンを設定する

animation-timing-functionプロパティを使うと、アニメーションを実行する速度のパターンを指定できます。animation-timing-functionプロパティは、アニメーショ ...

no image

CSS

アニメーションのキーフレームとアニメーション時間を設定する

トランジションの機能を拡張したもので、CSS3アニメーションという物があります。トランジションと同じようにプロパティの値を変化させることで効果を実現します。トランジションでは変化の始まりと終わりのスタ ...

no image

CSS

トランジションの速度のパターンを設定する

transtion-timing-functionプロパティを使うと、変化する速度のパターンをしていできます。キーワード、step関数、cubic-bezier関数のいずれかで指定する。 transt ...

no image

CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化させる効果のことです。FlashやJavaScriptを使用せずにスタイルの変化を表現できます。トラ ...

no image

CSS

IE限定?グリッドレイアウトを使う

グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイアウト方法のことです。今まではposition,floatプロパティを利用してコンテンツを配置しまし ...

no image

CSS

フレックスコンテナ内で複数行のとき、交差軸方向の配置方法を指定する

今回書くalign-contentプロパティは、フレックスコンテナ内にフレックスアイテムを複数行に配置して、交差軸の方向に余白が生じる時、フレックスアイテムと余白をどのように配置するかを指定します。 ...

no image

CSS

フレックスコンテナ内の主軸方向の配置方法を指定する

フレックスコンテナ内の主軸方向に余白ができるとき、フレックスアイテムと余白をどのように配置するのかを指定するのがjustify-contentプロパティです、このプロパティはフレックスコンテナに対して ...

no image

CSS

フレックスアイテムの幅の増減を個別指定

フレックスアイテムを配置したとき、フレックスコンテナの主軸方向に余白ができてしまうときや、逆に入りきらずはみ出してしまうときがあります。そんなときに、アイテムの幅を調整することで、コンテナ内にぴったり ...

no image

CSS

フレキシブルボックスレイアウトでアイテムの並び順を指定する

フレックスアイテムはソースコードに書かれた順番でフレックスコンテナ内に普通は配置されます。アイテムの配置順序をしたいときは、それぞれのアイテムがどの順序グループに属するのかをorderプロパティで指定 ...

no image

CSS

フレックスコンテナでアイテムを複数行に配置する

フレックスコンテナ内の全てのフレックスアイテムは、1行で配置されますが、flex-wrapプロパティを利用すると、コンテナ内のアイテムを、複数行に配置できます。 フレックスアイテムが複数の行に分割され ...