【javascript】バブリングについてイベントは子要素から親要素に向かって伝播していく stopPropagation()でバブリングを止める

画面をクリックすると「クリックしたよ！」という情報が子要素から親要素に向かって順番に発生していくらしい。 See the Pen イベントの伝播 by たまきこう (@ulqvhvox) on CodePen. イベントの伝播を止めるには?? stopPropagationでバブリングを防ぐこと…

2020-10-27

addEventListenerなどの時の es6での記述

es6で利用されるアロー関数 function func() { } この書き方から const func = () => { } この書き方に変更されました。 addEventListerner時の書き方だと btn.addEventListener('mousedown', function() { this.classList.add('class'); }); ↓ btn.addEvent…

2020-10-26

ディベロッパーツールの検索系「cmd + F」で文字検索「cmd + P」でファイル内検索

最近知ったchromeのディベロッパーツールの検索機能ファイル内検索「cmd + F 」 Elementでの「検索」コマンド・cmd + F 画面の赤枠の位置に入力スペースが出現します。さらに文字列を検索するだけでなく、 div.class#id のようなXPathと呼ばれる書き方で…

2020-10-22

gitでリモートブランチをローカルにcheckoutする

新しくmasterブランチをクローンしてきて、別のブランチもcheckoutしてpullしたい時がありますよねそういう時は、このコード git checkout -b local_branch_name origin/remote_branch_name 通常のチェックアウトのコマンドに、続けてリモートのブランチ…

2020-10-20

【javascript】targetプロパティーでクリックした要素の情報を取得する

クリック先の情報を取得する target プロパティーの使い方です。同じイベントを呼び出すコードが複数あったときに、一つの関数で条件に応じた処理ができるの便利です。 <body> <h1 id="title">イベントのtargetプロパティを使う</h1> <button id="button" type="button" data-new-Word="こんにちは">昼</button><br> <button id="button2" type="button" data-new-Word="こんばんは">夜</button> <script> var button = documen…</body>

2020-10-15

【css】scroll-snapプロパティーで気持ちいスクロールを

スクロールで特定の要素にピタッと止まるスクロールありますよね実はjsではなくcssで実現できるそうです。 scroll-snapというプロパティーを使って表現します。 100vhの要素が二つ重なっている状態を作って <div class="container"> <section class="area">1</section> <section class="area">2</section> </div> それぞれにcssscroll-snap-align: start;を…

2020-10-14

【css】repeating-radial-gradient()関数を重ねることでユニークな模様も1行で完結

background-image: repeating-radial-gradient()を使うことで上記のような複雑な模様も作ることができる、、、とのこと。 (笑) ポイントはrepeation-radial-gradientを重ねること background-image: radial-gradient(A), radial-gradient(B), radial-gradie…