【JavaScript】非推奨である「document.write()」の代替方法 これ。 つい先日まで知らなかったんですが。 JavaScriptの「document.write()」を使うのは現在はNGとされているようですね。 W3CではHTML5でのdocument.write()の使用を非推奨としています。 またGoogleの PageSpeed Insights でも、document.wr... 【JavaScript】非推奨である「document.write()」の代替方法続きを読む →- 【jQuery】右クリックを禁止する方法 ウェブサイトで右クリックを禁止して、コンテキストメニューを表示させなくする方法を紹介します。 ウェブサイト全体で右クリックを禁止にする方法 なにがなんでも、とにかく右クリックを禁止にする方法です。 以下のコードで実装できます。 $(function(){ $(document).on("contextmenu",fun... 【jQuery】右クリックを禁止する方法続きを読む →
- JavaScriptが無効な環境でのスタイルシートの読み込み タイトルのとおり。 JavaScriptが無効なブラウザや、都合によりJavaScriptが使えない環境でのみ、特別にCSSを読み込みたいときの方法を紹介します。 解決策はとても簡単で、「noscript」タグを使います。 <head> ... <link rel="stylesheet&q... JavaScriptが無効な環境でのスタイルシートの読み込み続きを読む →
- 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法 スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。 回転イベント「orientationchange」を使う デバイスを回転させたときにイベントを発火させるには「orientationchange」を使います。 jQueryでの記述 $(wi... 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法続きを読む →
【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方 今日こちらで紹介するJavaScriptのプラグイン［Magic Grid］は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox で簡単に実装できますが、高さが異なるカードをレンガ状に綺麗に配置するとなると、... 【JavaScript】超軽量でカード型レイアウトを実装できる［Magic Grid］の使い方続きを読む →- ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方 今日ご紹介する［Tippy.js］は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。 特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示されるようになります。 サンプルは以下より。 Tippy.js : https:/... 【JavaScript】ツールチップを表示させる超軽量ライブラリ［Tippy.js］の使い方続きを読む →
映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見つけたものですが、改変して次のようなJavaScriptのコードを書いています。... 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ［Emergence.js］を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプラグインです。 サンプルのデモサイトは以下より。 デモ : https://xt... 【JavaScript】指定した要素がビューポートに表示されたことを［Emergence.js］で検出する。続きを読む →
【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方 今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ［Fitty］の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 まずはサンプルをご覧ください。 SAMPLE : https://on-ze.co... 【JavaScript】親要素の大きさにテキストをフィットさせる［Fitty］の使い方続きを読む →- 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方 このjQueryプラグイン、モーダルウィンドウを手軽に実装したい方に超絶オススメです！ まずは実際の挙動を確認してみましょう。 DEMO : http://humaan.com/modaal/ 「VIEW EXAMPLE」をクリックすると、背景が暗くなり、モーダルウィンドウがフワッと浮かび上がります。 とてもスムーズな... 【jQuery】モーダルウィンドウ実装する超秀逸［Modaal］プラグインの使い方続きを読む →
【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方 ［MiniMasonry.js］は有名なMasonryの機能を制限した簡易版のライブラリです。 データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。 使い方は以下より。 Sample : https://projects.spope.fr/masonry/example/index.html GitHu... 【JavaScript】超便利「Masonry」の簡易版［MiniMasonry.js］の使い方続きを読む →
【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方 ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ［Beautiful bubbly backgrounds］を紹介します。 ↓サンプルはこちら。 サンプル : https://on-ze.com/demo/js-bubbly-bg/ 導入方法 まずはGitHubにて配布されている本体ファ... 【JavaScript】美しい泡が漂う［Beautiful bubbly backgrounds］の使い方続きを読む →
【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方 Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ［Macy.js］を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じてカラム数が増減します。 jQyeryなどの外部ファイルは一切不要で、単体で動作す... 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる［Macy.js］の使い方続きを読む →- 【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介！ 今日紹介するJavaScriptライブラリ［MoveTo］は、容量が約1KBと軽量で、しかもjQueryに依存せずにスムーススクロールを導入できるスグレモノです。 サンプル：https://on-ze.com/demo/js-moveto/ 使い方は超簡単。 下記サイトからダウンロードしたスクリプトファイル『moveT... 【JavaScript】超軽量スムーススクロール『MoveTo』をご紹介！続きを読む →
- 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。 初心者のウェブ制作者の方でも簡単に扱えるカルーセルスライダー［Siema］を紹介します。 まずは実装してみたサンプルをどうぞ。 Siema 実装サンプル：https://on-ze.com/demo/js-siema/ 動作も軽快でサクッと動きますね。 公式の配布サイトは以下。 Siema : https://pawe... 【JavaScript】単体で使える超軽量スライダー［Siema］は初心者の方にオススメです。続きを読む →