JavaScriptの.getBoundingClientRect()のスクロールでふわっと要素をフェードイン
この記事のスニペットは、以前記事にした「jQueryでフェードインさせるスニペット」のネイティブなJavaScriptバージョンです。 フェードインは、.getBoundingClientRect() でトリガーを作って …
JavaScriptのdocument.cookieでcookieの書き込み
JavaScriptでは、ブラウザのcookieファイルに情報を書き込んで利用することができます。 目次document.cookieボタンクリックでdocument.cookieが実行されるサンプルdocument.c …
CSSだけで画像を加工・装飾する覚えておくと便利なスニペット3選
CSSは、見た目を整えるのに欠かせない言語で、最近では動きのあるものもCSSで簡単にできてしまいます。 この記事では、そんな2021年個人的に使うことの多かった画像装飾系のCSSスニペットを紹介しています。 覚えておくと …
JavaScriptのhistory.back()・history.forward()で前のページへ戻る・次のページへ進むボタン
あまり使う機会がありませんが、history.back()・history.forward() を使う事で、「戻る・進む」ボタンを簡単に作れます。 目次history.back()・history.forward()前の …
JavaScriptの.className.replace()でタブ
.className.replace() で、class名を置換します。クリックイベントと併せて使うと、色々できる便利な関数です。 目次.className.replace().className.replace()の使 …
カスタムタクソノミーとタームで条件分岐
CPT UIで設定できるカスタムタクソノミーを使って、ターム毎の条件分岐の方法についてご紹介します。 目次一致するタームで条件分岐して出力条件分岐の記述方法や設定方法ターム名の出力や記事一覧の出力 一致するタームで条件分 …
JavaScriptのstyle.displayでモーダル
JavaScriptの style.display で、要素のdisplayプロパティを変更できます。この記事では、そのプロパティでモーダルを作ります。 目次style.displaystyle.displayを使ったモ …
JavaScriptの.classList.toggle()でアコーディオン
JavaScriptの .classList.toggle() を使ってアコーディオンを作ります。 目次.classList.toggle().classList.toggle()を使ったアコーディオンサンプルアコーディ …
JavaScriptの.replaceで文字列の置換
.replace メソッドで、指定した文字列を任意の文字列で置換します。 目次.replace.replaceを使ったサンプル.replaceを使ったコード .replace .replaceメソッドは、指定した文字列を …
JavaScriptの.addEventListenerのスクロールでclassの追加と削除
マウスクリックや画面をスクロールした時に、.addEventListener で状態を取得してDOM操作をします。 目次.addEventListener.addEventListenerスクロールを使ったサンプル.ad …
