WebDesign Dackel

JavaScriptでCSSセレクタを使ったEvent Delegationの実装

はじめに まだDOMツリーに描画されていない要素に対してイベントを設定したい場合、jQueryを使用していると以下のメソッドを使いますよね。 jQuery.fn.on(events, selector...

WordPressのブログでプチリニューアルを兼ねて高速化に挑戦してみた

先週の土日を使って、ブログのプチリニューアルをしました。 見た目は大きく変えていませんが、 背景色をベージュから白へ コンテンツ幅を少し広く 行間を調整 など、細かい点を調整してみました。 スタイルを...

react-routerでページ遷移にちょっとしたアニメーションを付ける

react-routerのリポジトリを見ると、アニメーション用のサンプルがありました。 以前、同じような事をやろうとして上手く出来なかったので、この機会に試してみました。 それぞれのライブラリのバージ...

iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる

iOS9で追加されたForceTouch(3DTouch)をJavaScriptで操作してみる

先週、2年使って画面のバッキバキになったiPhone 5sを6sに買い換えました。 買い換えてみて便利だなぁと思ったのは、やっぱりForce Touch(3D Touch)でした! カーソルの移動や、...

webpackで複数のディレクトリへ出力する

最近、仕事でもプライベートでもwebpackを使う機会が少しずつ増えてきましたが、複数のエントリーファイルを扱う際に少し迷ったことがあったのでメモです。 具体的にどんなことで迷ったかといいますと、 ....

OwlCarouselとPhotoSwipeでモバイルフレンドリーなギャラリーを作る

OwlCarouselとPhotoSwipeでモバイルフレンドリーなギャラリーを作る

はじめに OwlCarouselとPhotoSwipe、どちらも細かい制御が出来てモバイル環境での動作も非常に軽快です。僕もよくお世話になるお気に入りのライブラリです。 それぞれ別々で使うことはありま...

jQueryで画像がPC画面をスライドしていくようなエフェクトを実装する

jQueryで画像がPC画面をスライドしていくようなエフェクトを実装する

はじめに 今回は、画像がPC画面の中をスライドしていくようなエフェクトをjQueryを使って実装してみたいと思います。 たまにポートフォリオサイトなんかで見かけるやつです。 数行の簡単なコードで実装で...

JavaScriptで「どシンプル」なテンプレート文字列の展開を実装する

JavaScriptで「どシンプル」なテンプレート文字列の展開を実装する

はじめに JadeやEJSなどのテンプレートエンジンを導入するほどでもなく、underscore.js(lodash.js)を導入していない場合に使える、「どシンプル」なテンプレート文字列の展開をご紹...

【初心者向け】jQueryでツールチップのプラグインを自作しよう – Part3

【初心者向け】jQueryでツールチップのプラグインを自作しよう – Part3

はじめに これまでPart1、2とやってきましたが、今回で「jQueryでツールチップのプラグインを自作しよう」シリーズも最後です! 今回は、前回のPart2でプラグイン化したコードを更に発展させて、...

【初心者向け】jQueryでツールチップのプラグインを自作しよう – Part2

【初心者向け】jQueryでツールチップのプラグインを自作しよう – Part2

はじめに 前回はプラグイン無しでツールチップを表示するところまで進めました。 いよいよ今回から、jQueryプラグインとして機能をまとめていきたいと思います。 恐らくここが、Part1~3の中で一番ワ...