2020-07-25から1日間の記事一覧

【js】addEventlistnerについて

js

JavascriptのaddEventListnerについてまとめています。 サマリ オブジェクトにJavascriptのイベントを登録することができる 複数のイベントを登録することができる イベント内のthisはaddするオブジェクトを指す <body> <button id="btn">Change ButtonText Color</button> <script src="index.js"></script> </body> const btn = doc…

【js】reduceメソッドについて

js

Javascriptのreduceメソッドについてまとめています。 サマリ 配列をループ処理するときなどに利用する accumulatorとcurrentValueの考え方がある accumulator(第一引数)に前のループの戻り値、currentValue(第二引数)に現在の値(配列の値)をとる redu…

【js】forEachメソッドについて

js

JavascriptのforEachメソッドについてまとめています。 サマリ デフォルトで引数が3つ渡り、1つめが値、2つめが添字、3つめが配列となる for文よりシンプルにループ分をかけるのでなるべくforEachを使う方が良い forEachは変数を余分に宣言しなくて良い また…

【js】コールバック関数について

js

Javascriptのコールバック関数についてまとめています。 サマリ コールバック関数とは、他の関数から呼び出されて実行される関数のこと 呼び出し先の関数内でコールバック関数を実行することができる コールバック関数に引数を渡して実行することもできる 無…

【js】アロー関数を使って記述する方法

Javascriptのアロー関数についてまとめています。 サマリ アロー関数は関数を簡略化して記述する方法 returnで戻り値を返す場合は、returnの記述を省略できる 関数で定義する場合は、関数の呼び出し元が関数より前にあっても実行される 関数を変数に格納して…

【js】比較演算子について

js

Javascriptの比較演算子について覚えておきたいことをメモしています。 サマリ ==は値を比較すが型までは比較しない ===は値と型を両方比較してtrue/falseを判定する ==で型が一致しない場合の比較は、まずjsが自動的に型を一致させ、そこから値の比較を行う…

【css】要素をレイアウトする方法

css

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

【css】3Dアニメーションの設定(transform-style、perspective)

css

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

【css】transitionのタイミングファンクションについて

transitionのタイミングファンクションについてまとめています。 サマリ taransitionプロパティの第三引数で指定できる(easeなど) どのような速度でアニメーションするかを指定する chromeのディベロッパーツールで画面からタイミングファンクションを指定…

【css】擬似要素before、afterについて

cssの擬似要素と呼ばれるbefore、afterについてまとめています。 サマリ beforeは要素内の先頭に挿入される afterは要素内の末尾に挿入される 空のspanのような役割 プロパティでcontent:'';を指定しないと効果を発揮しない 1つのhtml要素に対して指定できる…

【css】positionとz-indexについて

css

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