JavaScript

JavaScript

ページ内リンクのスクロールを簡単に実装できるscrollIntoView

同じページ内を移動するリンクスクロールは、今やcssのscroll-behaviorプロパティだけでも実装できますが、どうしてもJava Scriptを使いたい...
JavaScript

Java Scriptの第一歩

WEB制作を独学でやっていると、HTMLとCSSは理解できてもJava Scriptでつまづくケースは非常に多いと思います。 私もかつて同じようにJSで絶望し、...
JavaScript

History APIで履歴に状態を記録する

ajaxを使って、1つのページ上で表示するコンテンツを切り替えたり、自動で続きのコンテンツを読み込んで表示する などよくあります ネットショップでいえば、無限ロ...
JavaScript

Vimeoの埋め込み動画に関する備忘録

サイト高速化の案件で、vimeoのiframeについて色々調べたので備忘録に残しておきます。 ネイティブLazyLoad iframeコードを編集して、lazy...
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にはあらかじめ豊富なオプションが用意されているため、スライダーの動作制御やレスポンシブ設定もオプションだけで簡単に行えます。よく使用するものを中心に、カスタマイズ方法をまとめています。