2020-03-03JavaScriptのclosestメソッドをIEに対応させるポリフィルCODEJavaScriptのclosestメソッドは最も近い先祖の要素を取得するために使用する非常に便利なメソッドですがIEには対応していません。しかしIEに対応するポリフィルが公開されていますのでご紹介します。JavaScript
2020-02-09【簡易版】スクロール時に画面内に入ってきたらCSSでアニメーション!JavaScriptはコピペOK!CODEこの記事ではスクロールに応じて特定の要素(HTML)画面内に入って来た場合にCSSでアニメーションさせる方法をご紹介します。JavaScriptを使用しますがコピペでOKです。CSSJavaScript
2020-02-05マウスストーカーを作ってみた。作り方もご紹介します。CODEマウスストーカーというものをご存知でしょうか?マウスカーソルに追従してくるアレです。昔のホームページではキラキラしたものやキャラクターが追従してきて結構鬱陶しいものが多くありました(笑)しかし、現在ではお洒落なサイトでよく見かけるようになってきました。今回の記事ではマウスストーカーを調べながら作ってみましたのでご紹介します!JavaScript
2020-01-30CSSアニメーションの開始時・終了時・ループ時にjavascriptで処理をする方法CODEcssアニメーションの開始時や終了時などに処理を加えたいと思ったことはありませんか?javascriptを使えばcssアニメーション(animationもしくはtransition)の開始や終了を取得できるイベントが用意されていますのでこの記事ではその方法をご紹介します。CSSJavaScript
2020-01-22【画像の遅延読み込み】ページの表示速度を向上させるlazyload.jsの使い方【高速化】CODE制作したサイトのページの表示速度が遅いと感じたことはありませんか?imgタグで配置した画像は通常見えている画面内に映っていなくてもそのページにあるもは全て読み込まれてしまいます。つまり見えてもいない画像を読み込むためページ表示速度が遅くなってしまいます。しかしその問題は画像の遅延読み込みという技術を用いることにより解消することができます。この記事ではそれ実装できるlazyload.jsをご紹介します!JavaScript
2020-01-19【ScrollMagic】スクロールに応じてclassを付与しcssでアニメーション【ES6】CODEwebサイトを閲覧していてスクロールに反応して要素がフェードインしてくるなどのアニメーションを見たことがありませんか?この記事では僕が実際に案件で使用しているスクロールに反応するアニメーションの実装方法をご紹介していきます。CSSJavaScript
2019-07-31【JavaScript】ブラウザ毎に使用出来ないcssを判別して分岐する方法【IE対策】CODEInternet Explorerで使用出来ないcssって多いですよね。その場合は大抵JavaScriptでどうにかすると思います。今回はブラウザで使用出来ないcssを判別して分岐するJavaScriptを紹介します!JavaScript
2019-07-17Snap.svgでアウトラインアニメーションを作る方法【IE対応】CODEsvgを使用したラインアニメーションにも色々あるかと思いますがこの記事ではアウトラインのアニメーションを紹介していこうと思います!CSSJavaScript
2019-07-10【vue.js】nuxt.jsでパンくずリストを作る方法CODEこの記事ではnuxt.js(vue.js)を使用したパンくずコンポーネントを紹介します!当ブログでも使用している方法です。JavaScriptVue.js
2019-06-21【jQuery不要】javascriptで画像保存を禁止する方法【右クリック・スマホで画面長押し禁止】CODE普段使う場面はほとんど無いかと思いますが、仕事で「webページの画像を保存できないようにしてくれないか?」と言われ対応したことがあり今回はその方法を紹介したいと思います!JavaScript