UIサンプルギャラリー「キプレ」

jQuery

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

{{user.tag}}

用途

新着

履歴

分類

★

JavaScript

JavaScriptに関するキーワードから探す

acceleration addEventListener all Array baseNode catch Chart clamp clearInterval click connection console const cookie crossorigin CSV D3 Date decodeURIComponent devicemotion deviceorientation document DOMContentLoaded DOMParser draggable drawImage enchant encodeURI encodeURIComponent ES Modules event exitFullscreen File FileReader for force fullscreenchange fullscreenElement function geolocation getAttribute getBoundingClientRect getContext getElementById getElementsByClassName getHours getImageData getMinutes getRangeAt getSeconds getSelection getTime hash height hello history host howler href if Image import indexOf innerHeight innerHTML insertAdjacentHTML insertRule json length location log match Math module naturalHeight naturalWidth navigator offsetHeight onclick onload onmousedown open originalEvent pageYOffset parent parse parseFromString parseInt pathname port position preventDefault Promise protocol push pushState querySelector random readAsText replace replaceState requestFullscreen requestPermission script scrollHeight scrollTo search setAttribute setInterval setTimeout shift sort split stopPropagation stringify styleSheets targetTouches textContent then toFixed toggle toGMTString toLocaleString toLowerCase toString touches touchforcechange touchmove touchstart TypeScript unshift userAgent vibrate webgl width window write XDomainRequest XMLHttpRequest

JavaScriptに関するサンプル

JS Ajaxをプレーンで実装

プラグインを使わずにプレーンのJavaScriptで非同期通信Ajaxを実装するサンプルです。 XMLHttpRequestの関数を利用します。 XMLとありますが、JSONを使うケースが多いためJSONの例を掲載します。 [[ const xhr = new XMLHttpRequest();...

2023-01-06 00:12:08

JS タブボタンで要素切り替え

プレーンJSでタブの表現を実装するサンプルです。 jQueryなどを使わずにボタンを押すと、コンテンツを入れ替える表現を実装しました。一つ目の要素がデフォルトで表示されます。ボタン1...

2023-01-04 00:15:20

GTM リファラでコンテンツを変える

特定のURLからランディングしたとき、ページのコンテンツを差し替えるサンプルです。Google Tag Managerを活用しています。ツイッターからのリンクでこのページに飛ぶと下記のボタンが青くなります。リファラの値に「https://t.co/」が含まれると検知して、情報を差し替えます。...

2022-07-03 18:09:43

JS ページ内スムーズリンク

jQueryを使わずにページ内リンク（アンカーリンク）で滑らかに移動するリンクのサンプルです。「href="#link"」のようなページ内リンクを無効にし、クリックするとスムーズなスクロールで移動するaタグをJSで実装しました。 jQueryなしで実装しています...

2022-06-26 14:25:25

JS フルスクリーンの開始、解除

ページでブラウザのフルスクリーンモードを実装し、解除するサンプルです。動画の再生など大画面で見てほしいコンテンツは、全画面表示をしてほしいので、このサンプルはその制御をする時に使います。ボタンを押して、フルスクリーン...

2022-06-19 22:11:22

JS HTMLの上書きと挿入

JavaScriptを使って、HTMLの要素を挿入するサンプルです。一つの要素を書き換えるパターンと、押すたびに増えるパターンをJSのみで実装します。ボタンを押すと下部の枠にHTMLの要素が追加されます。 innerHTML...

2022-04-01 08:47:41

JS マウスの位置の取得

マウスが要素の上に来た時の位置を取得するサンプルです。マウスオーバーしたときと、クリックされたとき、それぞれのマウスの位置を取得します。以下の正方形にマウスを合わせてください。スマホではタップした...

2022-04-01 08:46:11

JS CSSを追加する

jQueryなどを使わずに、JSのみでCSSを変更する時のサンプルです。 JSでドキュメントのスタイル情報を取得して、JSで新しいCSSを追記します。下記の四角はサイズだけCSSで記述して描画しています。 width: 200px;height: 1...

2022-03-30 07:41:20

JS 複数の要素のクリック

ボタンが押された時にイベントを発生させるJavaScriptのみのサンプルです。 idで1箇所のみに実装するケースと、classで複数箇所に実装するケースがあります。よく見かけるサンプルはidのケースですが、実際サービスに実装するときは...

2022-03-18 07:25:03

JS クリックした位置から波紋がでるボタン

ボタンをクリックした時に、クリックした部分から波紋が広がる演出をつけたボタンのサンプルです。以下のボタンをクリックしてください。クリックした部分から波紋が広がります。以下にクリック位置が出力されます。このようなギミックは、複数...

2022-03-07 08:20:53

Top