JavaScriptのcontextmenuで右クリック禁止とアラート表示
右クリック時に処理を行う oncontextmenu イベントで、右クリック禁止とアラート表示を出してみます。 JavaScriptのコードだけで実装できるので、是非最後までご覧いただけたら嬉しいです。 目次contex …
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の.trim()でテキストの空白を削除
テキストの両端にある空白を、JavaScriptの .trim() メソッドを使って削除します。 簡単なコードと内容ですが、参考にしてみてください。 目次.trim()テキストの空白を削除したサンプルボタンを押す前（「空 …
JavaScriptの.classList.toggle()でツリー構造のアコーディオン
今回は、ツリー構造のブロックを、アコーディオンのように「クリックで表示・非表示の切り替え」で表示させてみます。 CSSのチェックボックスを使って実装できる内容ですが、JavaScriptを使いHTMLもスッキリさせたコー …
アイコンの役割と使い方の記事をご紹介いただきました。
先日、フリーランサー向け案件紹介サービス「freelancehub」 さんにて、当サイトのブログ記事をご紹介頂きました。 目次freelancehubご紹介いただいた記事 freelancehub freelancehu …
JavaScriptのMath.max()でSwiper内の要素の高さを揃えて表示
以前、jQueryのスライダーライブラリ「slick」で高さを揃えるスニペットを記事にしましたが、この記事ではネイティブなJavaScriptのライブラリ「Swiper」で、かつ要素の高さを揃えるコードもネイティブな記述 …
JavaScriptの.innerHTMLでスクロールインするとタイプライター風に表示される複数行のテキスト
ページ内のテキスト表示に動きをつける「タイプライター風」を、複数行のテキストでも対象になるようJavaScriptで作ってみました。 この記事では、ページ描画時ではなく「スクロールイン時」がトリガーにして、ヒーローエリア …
