JavaScriptの.execCommand(‘copy’)でテキストをクリップボードにコピー
JavaScriptの .execCommand(‘copy’) を使って、クリップボードの操作をします。 現在このメソッドは、非推奨となっている為、今後利用できなくなる可能性があり、その場合には Clipboard A …
JavaScriptのYouTube Player APIで複数のサムネイル付き動画の設置
YouTubeにはいくつかのAPIが用意されていて、YouTube Player APIはIframeで動画の組み込みをするAPIです。 詳細のリファレンスでいろんなカスタマイズも可能なAPIですが、この記事では複数動画 …
JavaScriptのIntersectionObserverでスクロールして表示されたブロックにclassの付与
今回は、「PhotoshopVIP」のレイアウト紹介記事を基にした内容です。 スワイプエフェクトをCSSメインで、コード量も少なく実装できてしまうので、是非最後までご覧ください。 スワイプエフェクトで使用するCSS スワ …
JavaScriptの.targetでその他の入力欄がチェックされたらテキストフィールドを表示
チェックボックスを利用したフォームの選択肢で「その他」が選択された場合、フリーの入力欄が表示される。そんな感じのサンプルも作っているので、参考にしてみてください。 .target JavaScriptの.target は …
JavaScriptの.trim()でテキストの空白を削除
テキストの両端にある空白を、JavaScriptの .trim() メソッドを使って削除します。 簡単なコードと内容ですが、参考にしてみてください。 .trim() JavaScriptの .trim() は、文字列の両 …
JavaScriptの.classList.toggle()でツリー構造のアコーディオン
今回は、ツリー構造のブロックを、アコーディオンのように「クリックで表示・非表示の切り替え」で表示させてみます。 CSSのチェックボックスを使って実装できる内容ですが、JavaScriptを使いHTMLもスッキリさせたコー …
アイコンの役割と使い方の記事をご紹介いただきました。
先日、フリーランサー向け案件紹介サービス「freelancehub」 さんにて、当サイトのブログ記事をご紹介頂きました。 freelancehub freelancehubさんは、10万件以上のエンジニア・デザイナー・デ …
JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示
以前、jQueryのスライダーライブラリ「slick」で高さを揃えるスニペットを記事にしましたが、この記事ではネイティブなJavaScriptのライブラリ「Swiper」で、かつ要素の高さを揃えるコードもネイティブな記述 …
JavaScriptの.innerHTMLでスクロールインするとタイプライター風に表示される複数行のテキスト
ページ内のテキスト表示に動きをつける「タイプライター風」を、複数行のテキストでも対象になるようJavaScriptで作ってみました。 この記事では、ページ描画時ではなく「スクロールイン時」がトリガーにして、ヒーローエリア …
見よう。知ろう。学ぼう。国内企業のデザインシステム事例10選
海外のデザインシステムは比較的目にしますが、国内企業がデザインシステムを公開している企業は少なく、調べてみました。 この記事では、そんな国内の企業でデザインシステムを導入・活用している企業10個に絞り、具体的な事例をご紹 …
