JavaScriptの.addEventListener()のマウスオーバーで画像の切り替え
この記事では、マウスオーバーで画像の切り替えを、JavaScriptの .addEventListener() メソッドで実装します。 サンプルもあるので、最後までご覧いただけると嬉しいです。 目次.addEventLi …
JavaScriptの.createElement()で都道府県を選択可能なセレクトボックス
HTMLで、47都道府県を option タグで書いてもいいですが、見やすく・メンテナンスしやすいようにJavaScriptの .createElement() メソッドで記述することが可能です。 サンプルとあわせて参考 …
JavaScriptのwindow.scrollでボタンクリックすると一番上・一番下にスムーススクロール
CSSだけで、色々できるようになりましたよね。位置の細かい調整はできませんが、「スムーススクロール」もCSSだけで実装可能です。 そんなCSSのスムーススクロールにJavaScriptのコードを追加して、「一番上・一番下 …
JavaScriptの.URL .domain .title でページのURL・ドメイン・ページタイトルを表示
JavaScriptのコードを使って、ページのURL・ドメイン・ページタイトルの3つを取得して表示させます。 少し用途が限られそうなコードですが、参考にしてみてください。 目次.URL .domain .titleページ …
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()テキストの空白を削除したサンプルボタンを押す前（「空 …
