- jQuery セレクタでエスケープする文字
- jQueryを使っていて、HTMLのIDやクラスや属性を参照するときに記号がある時の注意です。 少しこんなのあったな、くらいに覚えておきたい内容です。 以下の...
- 2021-01-24
UIサンプルギャラリー「キプレ」
jQuery
HTML
Package
CSS
JavaScript
PHP
jQuery
HTML5
CSS3
Smarty
Twig
AngularJS
SVG
python
VueJS
BackboneJS
Blade
GoogleAppsScript
Laravel
Node.js
PWA
React
SCSS
Git
D3.js
Unix
Three.js
close
MENU
用途
新着
履歴
分類
★
- デザイン [37]
- jQuery 時差読込レイジーロード
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery スクロールで表示
- jQuery オーバーレイ
- CSS3 アニメーション
- CSS3 角を丸くする
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- jQuery レスポンシブデザイン
- jQuery スライドスイッチ
- jQuery 透明度を変更する
- CSS マーカーのような表現
- CSS3 flexを使った配置３（行間の操作）
- jQuery IDやClass指定でスタイルを変える
- jQuery メニューのトグルボタン
- jQuery アコーディオンメニュー
- jQuery フェードインアウト
- jQuery スクロールでクラス付加、解除
- jQuery オーバーレイ スマホ版
- jQuery メディアクエリと同様の出し分け
- CSS 左右に行き来するアニメーション
- CSS ヘッダー固定
- CSS 湯気の表現
- jQuery 長押しで発動
- CSS3 グラデーション
- CSS displayやvisibilityなど非表示にする
- CSS3 陰影
- jQuery ツールチップ
- jQuery パララックス 簡易版
- jQuery クラスで一括操作
- CSS デバイスの横のサイズを扱う
- CSS3 flexを使った配置１（横の位置）
- CSS3 flexを使った配置２（要素の改行）
- jQuery 狭いエリアに文字をアニメで格納する
- CSS デバイスの高さまで縦を広げる
- CSS tableを使わないgridの表
- HTML 【基本編】 [3]
- グラフいろいろ [7]
- jQuery プラグイン [6]
- 図形いろいろ [12]
- オーバーレイ [3]
- スクロール [13]
- ajax 非同期通信 [5]
- コピー [2]
- 便利なウェブツール [8]
- 震える [3]
- ブラウザ制御系 [14]
- SQL [1]
- 画像 [26]
- CSS3 オンマウスで画像拡大
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- webGL 図形を描画してみる
- jQuery 透明度を変更する
- jQuery 時差読込レイジーロード
- NodeJS 画像をHTMLで表示する
- jQuery スワイプできるカルーセルスライド
- jQuery カードをめくる表現
- CSS3 背景のサイズ
- exif 画像に付随した情報を調べる
- jQuery 右クリックを画像ごとに制御
- jQuery 画像のコピー防止の比較
- jQuery 画像読み込んでから発火
- jQuery 画像遅延読み込みのサンプル
- CSS 画像の切り取り
- CSS 画像をフィルターするアニメーション
- jQueryとCSS カードをクリックでめくる表現
- CSS 湯気の表現
- CSS3 画像を左右に回転する
- jQuery 自動ドア風アニメーション
- jQuery カルーセル
- HTML Base64エンコードで画像を表示
- JavaScript 画像をcanvasに変換する
- JavaScript 画像の色からカラーチャート
- JavaScript 画像をクリックして色を抽出
- 印刷 [2]
- JavaScript【基本編】 [5]
- htaccess [4]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [13]
- jQuery ハマりがち [5]
- メニュー [6]
- リンク [1]
- アコーディオン [2]
- PHP [2]
- ローカルストレージ [1]
- フォーム [12]
- 文字が多い時 [8]
- ティッカー [2]
- モーダルウィンドウ [1]
- 配置 [13]
- ウェブ広告関連 [4]
- Google関連 [2]
- 文字を目立たせたい [6]
- 時間的な制御 [5]
- 数字 [2]
- 条件分岐 [3]
- アニメーション [24]
- CSS3 やわらかい動き
- CSS3 要素を回転させる
- CSS3 アニメーション
- jQuery スクロールでアニメ
- jQuery 自動ドア風アニメーション
- CSS3 画像を左右に回転する
- CSS3 要素を揺らす
- jQuery アコーディオンメニュー
- CSS3 ウィンドウサイズ変更でアニメーション
- CSS3 震える表現
- jQuery スワイプできるカルーセルスライド
- CSS 左右に行き来するアニメーション
- jQuery カードをめくる表現
- CSS 湯気の表現
- JS 波のアニメーション
- jQuery フォームに非同期で値をセット
- SVG 読み込みアニメ
- jQuery パララックス 簡易版
- jQuery パララックス基本動作
- jQuery 狭いエリアに文字をアニメで格納する
- CSS 画像をフィルターするアニメーション
- jQuery 告知テキストの演出
- WebGL 立体を回転してみる
- CSS ボタンのホバーアニメ
- 絞り込みフィルター [3]
- viewportでできること [1]
- ライトなDB操作 [1]
- ボタン [7]
- URL [2]
- パララックス [1]
- 変数 [1]
- 音 [1]
- データサイエンス [2]
- 通信環境 [2]
- HTML
- Package
- CSS
- CSS3
- SCSS
- CSS デバイスの高さまで縦を広げる
- CSS デバイスの横のサイズを扱う
- CSS 画像をフィルターするアニメーション
- CSS 文字の縦書き
- SCSS スタイルをまとめて一つにする
- CSS 要素の可変の制御
- css3 計算した値をスタイルに使う
- CSS 画像の切り取り
- CSS 画像のぼかし、補正
- CSS ヘッダー固定
- Storybookの実行メモ（Vue.js版）
- CSS 湯気の表現
- CSS マーカーのような表現
- CSS 印刷のときに非表示
- CSS floatとheightとtopの50%
- CSS positonのabsoluteとrelative
- CSS 吹き出し
- CSS 初めてのCSS
- CSS 覚えておくと便利なセレクタ
- CSS displayやvisibilityなど非表示にする
- CSS floatで子要素の高さを親要素へ反映させる
- JavaScript
- jQuery
- jQuery セレクタでエスケープする文字
- jQuery XMLをパースする
- jQuery 上部スクロールでローディングアニメ
- jQuery スクロールの値を取得する
- jQuery 画像をサイズ変更してモーダル
- jQuery 告知テキストの演出
- jQuery フォームに非同期で値をセット
- jQuery フォームの値を取得
- jQuery 独自メソッドを作る
- jQuery 狭いエリアに文字をアニメで格納する
- jQuery フォーム入力によるフィルター
- jQuery 画像遅延読み込みのサンプル
- jQuery スクロールでURLを書き換える
- jQuery 自動ドア風アニメーション
- CSS 左右に行き来するアニメーション
- jQuery 消去法のUI
- jQuery タブ（横）シンプル版
- jQuery 要素をタグで囲う
- jQuery スライドスイッチ
- jQuery クラスで一括操作
- jQuery 透明度を変更する
- jQuery コンテンツの選択と変更
- jQuery 要素のクローンを作成
- jQuery 入力フォームの変更時に発動させる
- jQuery フォームをフォーカスする、はずすで発動
- jQuery 非同期通信の完了検知
- jQuery 要素を追加・移動する
- jQuery 要素を追加するいろんな方法
- jQuery 同じ処理の部分だけまとめる
- jQuery 使ってしまいそうな非推奨のメソッド
- jQuery マウスオーバーで画像入れ替え
- jQuery 長押しで発動
- 広告費の指標「ROI」
- 広告費の指標「ROAS」
- 広告費の指標「CPA」
- jQuery フェードインアウト
- jQuery 処理を遅らせる
- CSS3 やわらかい動き
- jQuery キーを押されたら実行
- jQuery 日付指定
- jQuery BMIの計算ツール
- jQuery 画像読み込んでから発火
- jQueryとCSS カードをクリックでめくる表現
- jQuery スクロールでクラス付加、解除
- jQuery マウスのトリガーいろいろ
- JS 緯度経度を取得する
- jQuery クラスをSVGタグに追加、変更
- jQuery 要素のスライド
- URLエンコード、デコードツール
- jQuery iframeを後から読み込み
- jQuery JSONの読み込み
- jQuery 処理の実行
- jQuery 指定の高さを超えたらボタンを表示
- jQuery メディアクエリと同様の出し分け
- jQuery パララックス 簡易版
- jQuery スタイルの数値取得
- jQuery メニューのトグルボタン
- jQuery スクロールで移動速度を変える
- jQuery 画像のコピー防止の比較
- jQuery 文字数に応じてスタイル変更
- jQuery デバイス判別
- jQuery 右クリックを画像ごとに制御
- jQuery アコーディオンメニュー
- jQuery オーバーレイ スマホ版
- jQuery HTMLの属性を指定して編集
- jQuery Cookieで表示回数制限
- jQuery スムーズスクロール
- jQuery レスポンシブデザイン
- jQuery IDやClass指定でスタイルを変える
- jQuery クッキーに保存
- jQuery 時差読込レイジーロード
- jQuery ツールチップ
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery カードをめくる表現
- jQuery ドロワーメニュー
- jQuery プルダウン
- jQuery フォームの値を取得する
- jQuery スクロールで表示
- jQuery オーバーレイ
- jQuery テキストティッカー
- jQuery IDを取得する
- jQuery スクロール最下部を検知
- jQuery 「.live」メソッドは使わない
- jQuery 一覧の絞り込み
- jQuery 離脱時に警告を出す
- jQuery 初めてのjQuery
- jQuery タブ（横・縦）
- jQuery カルーセル
- jQuery ウィンドウ操作
- jQuery モーダルウィンドウ
- jQuery スクロールでヘッダー表示
- jQuery パララックス基本動作
- AngularJS
- BackboneJS
- Node.js
- D3.js
- Three.js
- JS 選択文字の抽出と連携
- WebGL 立体を回転してみる
- JavaScript 配列→JSON、JSON→配列。
- JavaScript 配列の追加と削除
- JavaScript クリックして直線を描く
- JavaScript 重複のユニーク化とカウント
- JavaScript 画像をクリックして色を抽出
- JavaScript 画像の色からカラーチャート
- JavaScript 画像をcanvasに変換する
- JavaScript 配列の値をユニークにする
- JS cookieのライブラリ
- Riot.jsを試してみよう
- JS 波のアニメーション
- JS 音が出るボタン
- JS 動画から静止画を作成
- JS カメラの映像を表示させる
- JS ブラウザでQRコード読み込み
- JS アナログ時計を作る
- JS 値の型について
- JS 通信速度の検知
- TypeScript 編集とコンパイル
- JS 数字のカウントアップ演出
- JS 時間取得と加工
- JS ESモジュールを使ったDOM操作
- JS 文字列一致
- JS 感圧で遊ぶ
- JS 感圧の検証
- JS 元画像のサイズと表示画像のサイズ
- JS タップ圧力（感圧）検知
- JS URLのハッシュ値をUIに活用する
- JS 加速度検知
- JS 傾き検知
- JS idやclassの値取得
- JS バイブレーション
- JS CSV読み込みjQueryで表示
- JS クリックでコピー
- JavaScript 値のチェック
- JS URLクエリ取得
- JS cookie書き込み
- JS メーラー起動
- JS unixタイムを取得
- JS aタグを使わないリンクいろいろ
- JS ブラウザのURLを書き換える
- webGL 図形を描画してみる
- enchant.js ゲームやアプリ作りの入門
- JavaScript 文字省略 clamp.js
- JS レーダーチャート
- JS 線グラフ
- JS 棒グラフ
- JS 円グラフ
- JS はじめてのJavaScript
- PHP
- SVG
- GoogleAppsScript
- デザイン [37]
- jQuery 時差読込レイジーロード
- CSS3 オンマウスで画像拡大
- jQuery カラーピッカー
- jQuery スクロールで表示
- jQuery オーバーレイ
- CSS3 アニメーション
- CSS3 角を丸くする
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- jQuery レスポンシブデザイン
- jQuery スライドスイッチ
- jQuery 透明度を変更する
- CSS マーカーのような表現
- CSS3 flexを使った配置３（行間の操作）
- jQuery IDやClass指定でスタイルを変える
- jQuery メニューのトグルボタン
- jQuery アコーディオンメニュー
- jQuery フェードインアウト
- jQuery スクロールでクラス付加、解除
- jQuery オーバーレイ スマホ版
- jQuery メディアクエリと同様の出し分け
- CSS 左右に行き来するアニメーション
- CSS ヘッダー固定
- CSS 湯気の表現
- jQuery 長押しで発動
- CSS3 グラデーション
- CSS displayやvisibilityなど非表示にする
- CSS3 陰影
- jQuery ツールチップ
- jQuery パララックス 簡易版
- jQuery クラスで一括操作
- CSS デバイスの横のサイズを扱う
- CSS3 flexを使った配置１（横の位置）
- CSS3 flexを使った配置２（要素の改行）
- jQuery 狭いエリアに文字をアニメで格納する
- CSS デバイスの高さまで縦を広げる
- CSS tableを使わないgridの表
- HTML 【基本編】 [3]
- グラフいろいろ [7]
- jQuery プラグイン [6]
- 図形いろいろ [12]
- オーバーレイ [3]
- スクロール [13]
- ajax 非同期通信 [5]
- コピー [2]
- 便利なウェブツール [8]
- 震える [3]
- ブラウザ制御系 [14]
- SQL [1]
- 画像 [26]
- CSS3 オンマウスで画像拡大
- CSS 画像のぼかし、補正
- jQuery マウスオーバーで画像入れ替え
- webGL 図形を描画してみる
- jQuery 透明度を変更する
- jQuery 時差読込レイジーロード
- NodeJS 画像をHTMLで表示する
- jQuery スワイプできるカルーセルスライド
- jQuery カードをめくる表現
- CSS3 背景のサイズ
- exif 画像に付随した情報を調べる
- jQuery 右クリックを画像ごとに制御
- jQuery 画像のコピー防止の比較
- jQuery 画像読み込んでから発火
- jQuery 画像遅延読み込みのサンプル
- CSS 画像の切り取り
- CSS 画像をフィルターするアニメーション
- jQueryとCSS カードをクリックでめくる表現
- CSS 湯気の表現
- CSS3 画像を左右に回転する
- jQuery 自動ドア風アニメーション
- jQuery カルーセル
- HTML Base64エンコードで画像を表示
- JavaScript 画像をcanvasに変換する
- JavaScript 画像の色からカラーチャート
- JavaScript 画像をクリックして色を抽出
- 印刷 [2]
- JavaScript【基本編】 [5]
- htaccess [4]
- unix [1]
- jQuery【基本編】 [5]
- スマホならでは [13]
- jQuery ハマりがち [5]
- メニュー [6]
- リンク [1]
- アコーディオン [2]
- PHP [2]
- ローカルストレージ [1]
- フォーム [12]
- 文字が多い時 [8]
- ティッカー [2]
- モーダルウィンドウ [1]
- 配置 [13]
- ウェブ広告関連 [4]
- Google関連 [2]
- 文字を目立たせたい [6]
- 時間的な制御 [5]
- 数字 [2]
- 条件分岐 [3]
- アニメーション [24]
- CSS3 やわらかい動き
- CSS3 要素を回転させる
- CSS3 アニメーション
- jQuery スクロールでアニメ
- jQuery 自動ドア風アニメーション
- CSS3 画像を左右に回転する
- CSS3 要素を揺らす
- jQuery アコーディオンメニュー
- CSS3 ウィンドウサイズ変更でアニメーション
- CSS3 震える表現
- jQuery スワイプできるカルーセルスライド
- CSS 左右に行き来するアニメーション
- jQuery カードをめくる表現
- CSS 湯気の表現
- JS 波のアニメーション
- jQuery フォームに非同期で値をセット
- SVG 読み込みアニメ
- jQuery パララックス 簡易版
- jQuery パララックス基本動作
- jQuery 狭いエリアに文字をアニメで格納する
- CSS 画像をフィルターするアニメーション
- jQuery 告知テキストの演出
- WebGL 立体を回転してみる
- CSS ボタンのホバーアニメ
- 絞り込みフィルター [3]
- viewportでできること [1]
- ライトなDB操作 [1]
- ボタン [7]
- URL [2]
- パララックス [1]
- 変数 [1]
- 音 [1]
- データサイエンス [2]
- 通信環境 [2]
人気のあるUIサンプル
1
HTML5 ダウンロードボタン
2
JS 波のアニメーション
3
CSS 左右に行き来するアニメーション
4
JS ブラウザのURLを書き換える
5
jQueryとCSS カードをクリックでめくる表現
6
HTML 横書きのふりがな
7
JS CSV読み込みjQueryで表示
8
JS メーラー起動
9
SVG 三角形のサンプル
10
jQuery 長押しで発動
11
jQuery 一覧の絞り込み
12
NodeJS ディレクトリ構成を作る
13
jQuery 使ってしまいそうな非推奨のメソッド
14
JS aタグを使わないリンクいろいろ
15
CSS3 flexを使った配置２（要素の改行）
16
jQuery マウスオーバーで画像入れ替え
17
jQuery 離脱時に警告を出す
18
jQuery スライドスイッチ
19
NodeJS 画像をHTMLで表示する
20
CSS3 角を丸くする
11〜20
更新されたサンプル
-
jQuery セレクタでエスケープする文字投稿：2021-01-24 更新：2021-01-24
![]()
-
Threejs 基本的な描画とアニメ投稿：2021-01-10 更新：2021-01-10
![]()
-
JS 選択文字の抽出と連携投稿：2021-01-03 更新：2021-01-03
![]()
-
CSS ボタンのホバーアニメ投稿：2021-01-01 更新：2021-01-03
![]()
新着サンプル
- Threejs 基本的な描画とアニメ
- WebGLを簡単に扱えるJSのライブラリを実装してみました。 まず、Three.jsを読み込みます。 手っ取り早くCDNを利用する場合はこちら [[<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r124...
- 2021-01-10
- JS 選択文字の抽出と連携
- 選択した文字の情報をJSで抽出したり、SNSボタンに連携するサンプルです。 ブラウザで文字を選択した状態になると、その値をJSで検知することができます。 選択した文字を抽出したり、その文字を使って他のAPIに情報を連携するサンプ...
- 2021-01-03
- CSS ボタンのホバーアニメ
- ボタンにマウスを合わせた時の斜めに色がつくアニメーションのサンプルです。 CSSのhoverやfocusで発動するボタンのエフェクトのサンプルを用意しました。 デザインで調整をすることが多いため、わかりやすくシンプルなCSSにしています。...
- 2021-01-01
- WebGL 立体を回転してみる
- 立体を描画し、それを3Dで回転させるサンプルです。 参考サイトMDNを参考にサンプルをそのまま実装してみました。 まだ、筆者も理解が浅いので、今日はここまでです。 下記のサイトを参考にしていま...
- 2020-11-03
- JavaScript 配列→JSON、JSON→配列。
- 配列をJSONにしたり、JSONを配列に戻したりするサンプルです。 配列を文字として扱い時など、JSON形式にすることがあります。 以下のような配列をJSON形式に変換します。 [[demo_arr = ["123", "123&q...
- 2020-10-31
- JavaScript 配列の追加と削除
- 配列の要素の追加と削除のサンプルです。 ボタンを押すと、値を配列の先頭や末尾に追加するサンプルです。 合わせて、追加した値を削除するサンプルと、すでに同じ値が存在する場合、は追加しない記述...
- 2020-10-31
- jQuery XMLをパースする
- XMLファイルをJavaScriptのjQueryで解析し、情報を加工するサンプルです。 例えば以下のようなXMLがあるとします。 [[ <?xml version="1.0" encoding="UTF-8"?> <urlset> <url> <loc&...
- 2020-10-04
- PHP 乱数について
- PHPでランダムな数字を発生させる関数のメモです。 例えば、ランダムに違うコンテンツを出しわけたいときがあるとします。 １のときはA、２のときはB、それ以外ならCを出したいといったときです。 JavaScr...
- 2020-09-27
- JavaScript クリックして直線を描く
- 画像の上を２回クリックすると直線を引くことができるサンプルです。 ユーザーに画像か何かの要素の上で、直線を引かせたいときがあるとします。（稀ですが） 開始の点と終了の点をクリックすると、要素の上に直線が現れます。...
- 2020-09-22
Top