タグ "JavaScript" を含む投稿を表示中:63件
-
【JavaScript】マウスホバー時のテキストカラーをカスタムデータ属性で指定する方法 たとえば次のようなHTMLを書いたとき。 <a href=”#” data-color=”#ff0066″>リンク文字列</a> カスタムデータ属性(この場合は「data-color」)で指定した値を、マウスホバー時… 【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… ブラウザの「戻る」ボタンで画面遷移したときに強制的にリロードする方法続きを読む →
-
【JavaScript】ツールチップを表示させる超軽量ライブラリ[Tippy.js]の使い方 今日ご紹介する[Tippy.js]は、jQueryやZeptoなど他のリソースに依存せずに、単体で簡単に使えるJavaScriptのライブラリです。 特定の要素にマウスカーソルを合わせると、シンプルなアニメーションと共にツールチップが表示さ… 【JavaScript】ツールチップを表示させる超軽量ライブラリ[Tippy.js]の使い方続きを読む →
-
映画『マトリックス』の背景エフェクトを canvas で実装してみた。 映画『マトリックス』のオープニングで使われている、コンピューターの画面上を緑の文字が流れる映像。通称「マトリックス・コード」を、ウェブページの背景エフェクトとして canvas で実装したサンプルを紹介します。 もとはネットサーフィン中に見… 映画『マトリックス』の背景エフェクトを canvas で実装してみた。続きを読む →