2020-02-28【Sass】特定の親セレクタの状態を変更するmixin ネスト外にも対応CODEネストされたセレクターの深い位置から上から上のセレクターの状態を楽に変更できるmixinを紹介します！BEMで書いている場合はネストをあまりせずに独立してスタイルを書くことが多いと思いますがそれにも対応しています。CSS
2020-02-28Sassでネストされたセレクタの直前の親セレクタを取得する関数CODESassでmixinを作成しているときにネストされたセレクターの直前の親セレクターが欲しいときがあったので、それを取得する関数を作ってみました。CSS
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-08-03tableでcss擬似要素のcontent: attr()を使用したレスポンシブ方法CODEtableのレスポンシブ対応ってすごく面倒だと思いませんか？・table内で横スクロールを実装する・単純にdisplay: block;で対応などありますがcss擬似要素のcontent: attr();を使用した方法を紹介します。CSS
2019-07-31【JavaScript】ブラウザ毎に使用出来ないcssを判別して分岐する方法【IE対策】CODEInternet Explorerで使用出来ないcssって多いですよね。その場合は大抵JavaScriptでどうにかすると思います。今回はブラウザで使用出来ないcssを判別して分岐するJavaScriptを紹介します！JavaScript
2019-07-25【nuxt.js】WordPressで記事を更新したときにフックしてNetlifyに自動デプロイする方法CODEこのブログはwordpressで記事を作成し、nuxt.jsでwp rest apiからデータを取得してNetlifyにデプロイしています。この記事ではwordpressで記事を更新したタイミングで自動デプロイする方法をご紹介します。WordPress
