JavaScript DOMの変化を監視してくれるMutation Observer
Java ScriptのObserver（監視者）にはいくつか種類がありますが、Mutation ObserverはDOMの変更を監視してくれます。単純にDOM...
JavaScript
JavaScript 
JavaScript ページ内リンクのスクロールを簡単に実装できるscrollIntoView
同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Scriptを使いたい...
JavaScript Java Scriptの第一歩
WEB制作を独学でやっていると、HTMLとCSSは理解できてもJava Scriptでつまづくケースは非常に多いと思います。私もかつて同じようにJSで絶望し、一...
JavaScript History APIで履歴に状態を記録する
ajaxを使って、１つのページ上で表示するコンテンツを切り替えたり、自動で続きのコンテンツを読み込んで表示する などよくありますネットショップでいえば、無限ロー...
JavaScript Vimeoの埋め込み動画に関する備忘録
サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。ネイティブLazyLoadiframeコードを編集して、lazylo...
JavaScript slick.jsのオプション設定をPC / モバイルで切り替える
slick.jsのレスポンシブ設定について説明します。レスポンシブ設定といっても『viewportに合わせたサイズで表示する』といった話ではなく、たとえばPCビューではドットを表示する、タブレット以下では表示しない、などのオプション切り替えの話です。slick.jsにはresponsiveオプションがあらかじめ用意されているので、respoinsiveオプションで、breakpointとsettingsを指定してやるだけです。respondToではレスポンシブ設定を基準を指定します。
JavaScript slickスライドをドットの代わりにサムネイル連動にする
slick sampleまれに質問があるので、スライダー系JQuery「slick」をサムネイルスライダーと連動させる方法について書いておきます。slickが優...
JavaScript トグルボタンを使ったメニューの開閉をaria-hiddenで統一したら楽になった
トグルボタンやタブパネルなど、表示のオンオフを切り替える方法はいくつもありますが、WAI-ARIAのaria-controls属性を利用してaria-hidden属性を切り替える形で統一したらCSSスタイリングが非常に楽になったので、備忘録として残しておきます。アクセシビリティにも対応できるのでおすすめです。
JavaScript 最近使ったIE対応まとめ
個人的にはIE対応なんて最低限で良い（多少の違いが出るのは仕方ない。だってIEだもの）派なのですが、”他のモダンブラウザ同様の動きでないといけない”とする案件が...
JavaScript トップページスライド（slick.js）のカスタマイズ
軽量スライダー系jQuery、slick.jsの解説記事です。slickにはあらかじめ豊富なオプションが用意されているため、スライダーの動作制御やレスポンシブ設定もオプションだけで簡単に行えます。よく使用するものを中心に、カスタマイズ方法をまとめています。