株式会社オンズのブログ記事一覧
タグ "JavaScript" を含む投稿を表示中:68件
-
【JavaScript】画像の遅延読み込みを行うライブラリ[lazysizes.js]をオススメします ウェブサイトの表示速度を上げるために「画像の遅延表示」を導入することは非常に効果的です。 遅延表示に対応するJavaScriptは多数公開されており、このブログでも[Unveil Lazy Load]や[Layzr.js]などを紹介してきま... 【JavaScript】画像の遅延読み込みを行うライブラリ[lazysizes.js]をオススメします続きを読む →
-
PageSpeed Insights で「第三者コードの影響を抑えてください」の原因が Analytics & AdSense である場合 ウェブサイトのパフォーマンス改善に欠かせない PageSpeed Insights で、「第三者コードの影響を抑えてください」という警告が表示されることがあります。 これは外部から読み込まれる「第三者コード」、特に Google Analy... PageSpeed Insights で「第三者コードの影響を抑えてください」の原因が Analytics & AdSense である場合続きを読む →
-
デジハリ受講生が陥ったエラー全リスト[コーディング編] 私が講師を勤める『デジタルハリウッドSTUDIOつくば』にて。 実際に、デジハリ受講生が遭遇したエラーの数々を以下にリストアップします。 HTML編 HTMLタグの中の得体の知れない半角スペース、全角スペース、タブ、改行 単純なスペルミス(... デジハリ受講生が陥ったエラー全リスト[コーディング編]続きを読む →
-
【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法 カスタムデータ属性(この場合は「data-color」)で指定した値を、マウスホバー時のテキストカラーとして使う方法を紹介します。 現在のCSSの仕様では、要素の属性値を直接CSSのプロパティ値として使用することはできないので、JavaSc... 【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法続きを読む →
-
【JavaScript】変数名や関数名などで使えない予約語一覧 JavaScriptの変数名や関数名などで使えない予約語の一覧です。 ECMAScriptで定義されています。 await break case catch class const continue debugger default del... 【JavaScript】変数名や関数名などで使えない予約語一覧続きを読む →
-
jQuery不要の最新スライダー[Splide]の使い方と全オプション 今日は最新のJavaScriptスライダー[Splide]を紹介します。 まずは[Splide.js]の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く 軽量(圧縮版で11kB) IE10以降対応 ブレイ... jQuery不要の最新スライダー[Splide]の使い方と全オプション続きを読む →
-
意図していない横スクロールの原因を一瞬で特定する方法 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない!」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹... 意図していない横スクロールの原因を一瞬で特定する方法続きを読む →
-
JavaScriptが無効になっているとき限定のCSSを適用する方法 何らかの理由でJavaScriptが無効化されている環境でウェブページを表示させるとき、JavaScriptが無効になっているとき限定のCSSを読み込む方法を紹介します。 JavaScriptを利用する方法 先に仕組みをすると、あらかじめH... JavaScriptが無効になっているとき限定のCSSを適用する方法続きを読む →
-
【JavaScript】ビューポートに入った要素をアニメーション表示する[Animon]の使い方 ブラウザのビューポートに要素が入ったことを検知して、アニメーションで表示させるJavaScriptライブラリ[Animon]の使い方を紹介します。 JavaScriptファイルの容量はなんと「0.75kB」と超軽量。 仕組みは、Google... 【JavaScript】ビューポートに入った要素をアニメーション表示する[Animon]の使い方続きを読む →
-
初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします 「ウェブサイトのアニメーションの基礎を網羅している書籍がほしい」 そんな想いを抱く初心者ウェブクリエイターの方々に超絶オススメの書籍があります。 『動くWebデザインアイディア帳』です。 久保田涼子さんと杉山彰啓さんによる共著。 とある場所... 初心者ウェブクリエイターの方々に「動くWebデザインアイディア帳」をオススメします続きを読む →
-
【JavaScript】ラジオボタンのチェックをすべて外す方法 ラジオボタンは通常、何も選択されていない状態ですが、一度どれかを選択してチェックマークをつけると「何も選択していない状態」には戻れないんですよね。 そこでJavaScriptを使って「どのラジオボタンにもチェックが入っていない状態」に戻す機... 【JavaScript】ラジオボタンのチェックをすべて外す方法続きを読む →
-
【JavaScript】非推奨の「document.write()」の代替方法 これ。 つい先日まで知らなかったんですが。 JavaScriptの「document.write()」を使うのは現在はNGとされているようですね。 W3CではHTML5でのdocument.write()の使用を非推奨としています。 またG... 【JavaScript】非推奨の「document.write()」の代替方法続きを読む →
-
【jQuery】右クリックを禁止する方法 ウェブサイトで右クリックを禁止して、コンテキストメニューを表示させなくする方法を紹介します。 ウェブサイト全体で右クリックを禁止にする方法 なにがなんでも、とにかく右クリックを禁止にする方法です。 以下のコードで実装できます。 $(func... 【jQuery】右クリックを禁止する方法続きを読む →
-
JavaScriptが無効な環境でのスタイルシートの読み込み タイトルのとおり。 JavaScriptが無効なブラウザや、都合によりJavaScriptが使えない環境でのみ、特別にCSSを読み込みたいときの方法を紹介します。 解決策はとても簡単で、「noscript」タグを使います。 <head... JavaScriptが無効な環境でのスタイルシートの読み込み続きを読む →
-
【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法 スマートフォンやタブレット端末で、デバイスを回転させて画面が縦横に切り替わったときに、イベントの判定処理を行う方法を紹介します。 回転イベント「orientationchange」を使う デバイスを回転させたときにイベントを発火させるには「... 【JavaScript】スマホやタブレット端末で、デバイスを回転させたときにイベントを発動する方法続きを読む →
-
【JavaScript】超軽量でカード型レイアウトを実装できる[Magic Grid]の使い方 今日こちらで紹介するJavaScriptのプラグイン[Magic Grid]は、高さの異なる複数のカード型レイアウトを実装する際に役立つライブラリです。 高さが揃っている複数のカードを配置するのであれば CSS Grid や Flexbox... 【JavaScript】超軽量でカード型レイアウトを実装できる[Magic Grid]の使い方続きを読む →
-
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.pe... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法 ブラウザの「戻る」ボタンを押したとき。通称「ブラウザバック」と呼ばれる画面遷移が行われたときに、強制的にページを再読み込みさせる方法です。 window.onpageshow = function(event) { if (event.pe... ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
【JavaScript】ツールチップを表示させる超軽量ライブラリ[Tippy.js]の使い方 今日ご紹介する[Tippy.js]は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。 特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示さ... 【JavaScript】ツールチップを表示させる超軽量ライブラリ[Tippy.js]の使い方続きを読む →
-
映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見... 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →
-
【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。 指定した要素がブラウザの可視領域に入ったことを検出するJavaScriptのライブラリ[Emergence.js]を紹介します。 ブラウザをスクロールして、指定した要素が特定の範囲に入ったときにアニメーションを実行させることができる便利なプ... 【JavaScript】指定した要素がビューポートに表示されたことを[Emergence.js]で検出する。続きを読む →
-
【JavaScript】親要素の大きさにテキストをフィットさせる[Fitty]の使い方 今回は親要素の大きさに合わせてテキストをフィットさせるJavaScriptライブラリ[Fitty]の使い方を紹介します。 レスポンシブにも対応して、親要素とテキストのサイズを自動で計算して大きさを調整してくれます。 百聞は一見に如かず。 ま... 【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.s... 【JavaScript】超便利「Masonry」の簡易版[MiniMasonry.js]の使い方続きを読む →