2020-07-01から1ヶ月間の記事一覧
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…
JavascriptのaddEventListnerについてまとめています。 サマリ オブジェクトにJavascriptのイベントを登録することができる 複数のイベントを登録することができる イベント内のthisはaddするオブジェクトを指す <body> <button id="btn">Change ButtonText Color</button> <script src="index.js"></script> </body> const btn = doc…
Javascriptのreduceメソッドについてまとめています。 サマリ 配列をループ処理するときなどに利用する accumulatorとcurrentValueの考え方がある accumulator（第一引数）に前のループの戻り値、currentValue（第二引数）に現在の値（配列の値）をとる redu…
JavascriptのforEachメソッドについてまとめています。 サマリ デフォルトで引数が3つ渡り、1つめが値、2つめが添字、3つめが配列となる for文よりシンプルにループ分をかけるのでなるべくforEachを使う方が良い forEachは変数を余分に宣言しなくて良い また…
Javascriptのコールバック関数についてまとめています。 サマリ コールバック関数とは、他の関数から呼び出されて実行される関数のこと 呼び出し先の関数内でコールバック関数を実行することができる コールバック関数に引数を渡して実行することもできる 無…
Javascriptのアロー関数についてまとめています。 サマリ アロー関数は関数を簡略化して記述する方法 returnで戻り値を返す場合は、returnの記述を省略できる 関数で定義する場合は、関数の呼び出し元が関数より前にあっても実行される 関数を変数に格納して…
Javascriptの比較演算子について覚えておきたいことをメモしています。 サマリ ==は値を比較すが型までは比較しない ===は値と型を両方比較してtrue/falseを判定する ==で型が一致しない場合の比較は、まずjsが自動的に型を一致させ、そこから値の比較を行う…
cssを使ってhtml要素をレイアウトする方法についてまとめています。 サマリ letter-spacingを使うと文字間を調整できる display: inline-blockはblock要素を横並びにする flexは縦・横並びだけでなく幅や要素の比率を指定することができる /** * 横方向のレ…
cssを使って3Dアニメーションを設定するtransform-style、perspectiveについてまとめています。 サマリ 3Dアニメーションをcssを実現するにはtransform-style、- perspectiveの2つのプロパティが必要 3Dで動かしたい要素の親要素に設定する 子要素にtransfor…
transitionのタイミングファンクションについてまとめています。 サマリ taransitionプロパティの第三引数で指定できる（easeなど） どのような速度でアニメーションするかを指定する chromeのディベロッパーツールで画面からタイミングファンクションを指定…
cssの擬似要素と呼ばれるbefore、afterについてまとめています。 サマリ beforeは要素内の先頭に挿入される afterは要素内の末尾に挿入される 空のspanのような役割 プロパティでcontent:'';を指定しないと効果を発揮しない 1つのhtml要素に対して指定できる…
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; …
