sassの@mixinの記述方法についてまとめています。 サマリ cssを簡潔に書くための機能 変数を渡すことでcssのプロパティを適用できる関数のような使い方が可能 引数の初期値を設定できるので、mixinの呼び出し先で同じcssの記述をする必要がない animation~で…

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

Sassでfor文を使って記述する方法についてまとめています。 サマリ @forで宣言する 変数は$iで記述する from 1 through 2は1から始まって2回ループするの意味 四則演算は単位がついた状態で計算できる（-0.32sなど） background-imageのファイル名に数字が入…

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

Javascriptのthisについてまとめています。 サマリ class内でthisを使うとインスタンス化されたオブジェクトを参照する classの外で使うとグローバルオブジェクトを参照する classの中でwindow.setTimeoutを使い、その中でthisを指定するとwindowオブジェク…

JavascriptのDOMContentLoadedとloadについてまとめています。 サマリ DOMContentLoadedはhtmlをブラウザが解釈してDOMツリーを作成し終わったタイミングで発火する loadは画像や動画など全てのコンテンツをダウンロードし終わった後に発火する DOMContentLo…