cssのAnimationとKeyframesについてまとめています。 サマリ Animationを楽に、簡潔に記述するための方法としてKeyframesがある animationプロパティの第一引数にKeyframesを記述する animationプロパティの第二引数には、アニメーションが行われる間隔を記…

cssの:nth-child、:nth-of-typeについてまとめています。 サマリ :nth-childは親要素の中の子要素の中で、何番目かを判定してcssを適用する つまり、子要素は指定していない別のhtmlタグもカウント対象となる 逆に、:nth-of-typeは親要素の中の子要素の中で…

cssを使ってhtml要素をレイアウトする方法についてまとめています。 サマリ letter-spacingを使うと文字間を調整できる display: inline-blockはblock要素を横並びにする flexは縦・横並びだけでなく幅や要素の比率を指定することができる /** * 横方向のレ…

cssを使って3Dアニメーションを設定するtransform-style、perspectiveについてまとめています。 サマリ 3Dアニメーションをcssを実現するにはtransform-style、- perspectiveの2つのプロパティが必要 3Dで動かしたい要素の親要素に設定する 子要素にtransfor…

cssのpositionとz-indexについてまとめています。 サマリ position:relativeの子要素にposition:abusoluteを指定すると、親要素の高さが消える デフォルトではposition:staticが設定されている positonでstatic以外、かつz-indexが指定されていると、スタッ…

cssのtransformプロパティの使い方について サマリ アニメーションを定義する際に使う 物体の移動位置・回転・拡大・縮小を定義できる 複数の関数を組み合わせて使うことができる .rect { width: 100px; height: 100px; margin: 0 auto; background-color: o…

cssのtransitionプロパティについて サマリ transitionはアニメーションを簡単に定義できる 移り変わりを定義するプロパティ 引数の定義内容によって要素の変化を詳細に決められる .btn { background-color: white; color: black; border: 1px solid black; …