CSSのanimationプロパティでできるアニメーション20選
マークアップ言語は非常に奥が深く、いろんな表現やアニメーションも簡単な記述でできてしまうので、知識のアップデートは欠かさず行うようにしています。 そこで今回の記事では、よく使うCSSのアニメーションを20個紹介します。 …
JavaScriptの.addEventListenerスクロールでプログレスバー
プログレスバーは、「ユーザーが記事やコンテンツをどの辺りまで読んでいるのか？」が視覚的に分かるUIです。 そんなプログレスバーを、ネイティブのJavaScriptで作ってみました。 目次.addEventListener …
JavaScriptの.toLowerCaseで絞り込みインスタント検索
サイト内検索を作ろうと思うと、データベースとの連携設定が必要だったりと、なかなか苦戦しますが簡易的な絞り込み検索であれば、JavaScriptで実装可能です。 この記事では、そんな絞り込みのインスタント検索をJavaSc …
JavaScriptの.classList.toggle()でよくある質問のアコーディオン
よくある質問は、Google検索でも回答の一覧がリッチリザルトとして表示されたりするので、重要なコンテンツです。 この記事は、.classList.toggle()を使ったネイティブJavaScriptで作った「よくある …
JavaScriptの.addEventListenerのクリックでドロワーメニュー
ドロワーメニューは多く見るUIで、ボタンをクリックすると横からスライドしてメニューなどのコンテンツを出すことができます。 この記事は、.addEventListenerを使ったネイティブJavaScriptのドロワーメニ …
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()の使 …
