JavaScriptの.classList.toggle()でツリー構造のアコーディオン
今回は、ツリー構造のブロックを、アコーディオンのように「クリックで表示・非表示の切り替え」で表示させてみます。 CSSのチェックボックスを使って実装できる内容ですが、JavaScriptを使いHTMLもスッキリさせたコー …
アイコンの役割と使い方の記事をご紹介いただきました。
先日、フリーランサー向け案件紹介サービス「freelancehub」 さんにて、当サイトのブログ記事をご紹介頂きました。 目次freelancehubご紹介いただいた記事 freelancehub freelancehu …
JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示
以前、jQueryのスライダーライブラリ「slick」で高さを揃えるスニペットを記事にしましたが、この記事ではネイティブなJavaScriptのライブラリ「Swiper」で、かつ要素の高さを揃えるコードもネイティブな記述 …
JavaScriptの.innerHTMLでスクロールインするとタイプライター風に表示される複数行のテキスト
ページ内のテキスト表示に動きをつける「タイプライター風」を、複数行のテキストでも対象になるようJavaScriptで作ってみました。 この記事では、ページ描画時ではなく「スクロールイン時」がトリガーにして、ヒーローエリア …
見よう。知ろう。学ぼう。国内企業のデザインシステム事例10選
海外のデザインシステムは比較的目にしますが、国内企業がデザインシステムを公開している企業は少なく、調べてみました。 この記事では、そんな国内の企業でデザインシステムを導入・活用している企業10個に絞り、具体的な事例をご紹 …
JavaScriptのIntersectionObserverでスクロールインしたら縦書きのテキストをタイピング風で表示
縦書きのテキストを、ネイティブなJavaScriptを使い「タイピング風」に一文字ずつ表示させてみます。 「端的で、メッセージ性の強いクリエイティブに使える」スニペットなので、引き出しの一つにでもなるよう参考にしてみてく …
プラグイン無しでお気に入りに追加した記事をページ遷移せずにページ一覧で解除可能にするスニペット
ブックマーク機能は、後で見返したいときに簡単に呼び出せるように保存しておく機能です。 そんな「ブックマーク＝お気に入りに追加」の機能ですが、以前の記事のスニペットをカスタマイズし「ページ一覧でお気に入り解除」の機能を追加 …
JavaScriptの.addEventListenerでヒーローエリアのサイズを収まりきるように可変
最新のスマートフォンでも解像度・縦横比率が少しずつ変化しているように、デスクトップの解像度も少しずつ上がっていくかもしれません。 Webページのヒーローエリアは、ユーザーが最初に見る情報なので、離脱されないためにもこのサ …
JavaScriptの.addEventListener でフローティングバナーの表示・非表示
主に広告で使いそうで、日常的な実用性がなくCSSメインの為JavaScriptなのかは微妙なところですが、ごく簡単なコードで実装できるフローティングバナーです。 簡単なコードでできているスニペットなので、JavaScri …
JavaScriptの.addEventListenerクリックで検索フォームのモーダル
ユーザーが検索フォームに検索条件を入力して「検索」ボタンを押すと、一覧画面に表示される。Webサイトのどのシーンでも当たり前に活用されている「検索フォーム」ですが、この記事では、そんな検索フォームをボタンクリックで「モー …
