CSSを非同期で読み込んで高速化
Lighthouseのパフォーマンススコアの「レンダリングをブロックするリソースを排除する」に対応するための対策方法をメモ。
media=”print” onload=”this.media=’all'”をつける方法
もっとも簡単な方法です。
<link rel=”stylesheet” href=”/path/to/my.css” />
これに、media="print" onload="this.media=’all…
JavaScript | Shiftを押しながらのイベントを実装する方法
JavaScriptのaddEventListener()を使ってShiftキーを押しながらクリックやエンターキーが押された際に発火するイベントの実装方法を紹介しています。 ここでの動作サンプルは紹介しているスクリプトを […]…
JavaScript | カレンダーの日付選択フォームの入力イベントを実装する方法
JavaScriptを使ってHTML5から実装されているカレンダーの日付選択フォーム（input type=”date”）の入力をトリガーにしたイベントの実装方法を紹介しています。 日付選択フォー […]
JavaScript | セレクトメニューの変更イベントを実装する方法
JavaScriptを使ってセレクトメニューの変更をトリガーにした発火イベントの実装方法を紹介しています。 セレクトメニューの変更イベント セレクトメニューの切り替え、変更が行われた時にそれをトリガーにしたイベントを発火 […]…
JavaScript | スライダー（range）の変更イベントを実装する方法
JavaScriptでフォームパーツのひとつ、スライダー（range）の変更をトリガーにしたイベントの実装方法を、決定時とリアルタイム取得と2パターンで動作サンプル、サンプルコードで紹介しています。 スライダー（rang […]…
JavaScript | ラジオボタン（radio）の切り替えイベントを実装する方法
JavaScriptでジオボタン（radio）の入力切り替えをトリガーにしたイベントの実装方法を紹介しています。 ラジオボタン（radio）の切り替えイベント addEventListener()メゾットを使ってラジオボ […]…
JavaScript | addeventlistener()でドラッグ＆ドロップのイベントを実装する方法
JavaScriptのaddeventlistener()で要素のドラッグやドロップをトリガーにした発火イベントの実装サンプルとサンプルコードを紹介しています。 「ドラッグ開始時」「ドラッグ中」「ドロップ可能エリアに入っ […]…
JavaScript | 検索フォームの入力イベントを実装する方法
JavaScriptで検索フォームへの入力をトリガーにした発火イベントの実装サンプルで「いずれかのキーが離された時」「Enterキーが押された時」「submitボタンが押された時」の3パターンのサンプルコードを紹介してい […]…
JavaScript | チェックボックスの入力イベントを実装する方法
JavaScriptでチェックボックスの入力をトリガーにしたイベントの実装方法紹介しています。 チェックボックスの入力イベントサンプル チェックボックスをトリガーにした入力、オンオフを取得するイベントの動作サンプルとJa […]…
【JS】videoタグ動画の画面クリックでPlay/Pauseできるようにする
画面タッチで再生/停止をしたい
サイトにvideoタグで動画埋め込みました。その動画はページ背景に使うイメージ動画です。
背景なので、デザイン的にcontrolsで再生ボタンなどのツールバーは表示させたくありません。それを避けながらPlay/Pauseの機能を付けたいといった要望に応えることになりました。そこで、方法を調べたらありました。結構、簡単にあっさり実現できました。参考にさせていただいたのは以下のページ。
…