- jQuery スクロールでURLを書き換える
- URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。 <p>記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。</p> <p>今時は通信速度が速く、ついついたくさん読ま...
- 2019-03-26 19:03:32
kipure
UIサンプルギャラリー「キプレ」
jQuery
HTML
CSS
JavaScript
PHP
jQuery
HTML5
CSS3
Smarty
Twig
AngularJS
SVG
python
VueJS
GoogleAppsScript
PWA
MENU
定番
新着
履歴
- グラフいろいろ [4]
- 図形いろいろ [11]
- スワイプ [2]
- スクロール [11]
- タブ切り替え [3]
- オーバーレイ [2]
- ブラウザ制御系 [6]
- スマホならでは [9]
- HTML 【基本編】 [2]
- CSS【基本編】 [11]
- JavaScript【基本編】 [4]
- jQuery【基本編】 [10]
- jQuery プラグイン [4]
- Apple関連 [2]
- ajax 非同期通信 [2]
- コピー [2]
- 画像 [7]
- 印刷 [1]
- jQuery ハマりがち [4]
- リンク [1]
- ローカルストレージ [1]
- 文字が多い時 [2]
- ティッカー [1]
- フォント [1]
- モーダルウィンドウ [1]
- ウェブ広告関連 [3]
- Google関連 [2]
- 文字を目立たせたい [1]
- 動画 [1]
- SQL [1]
- htaccess [2]
- unix [2]
- 時間的な制御 [1]
- 特集タイトル [1]
- jQuery ABテストツールを作ろう [1]
- グラフいろいろ [4]
- 図形いろいろ [11]
- スワイプ [2]
- スクロール [11]
- タブ切り替え [3]
- オーバーレイ [2]
- ブラウザ制御系 [6]
- スマホならでは [9]
- HTML 【基本編】 [2]
- CSS【基本編】 [11]
- JavaScript【基本編】 [4]
- jQuery【基本編】 [10]
- jQuery プラグイン [4]
- Apple関連 [2]
- ajax 非同期通信 [2]
- コピー [2]
- 画像 [7]
- 印刷 [1]
- jQuery ハマりがち [4]
- リンク [1]
- ローカルストレージ [1]
- 文字が多い時 [2]
- ティッカー [1]
- フォント [1]
- モーダルウィンドウ [1]
- ウェブ広告関連 [3]
- Google関連 [2]
- 文字を目立たせたい [1]
- 動画 [1]
- SQL [1]
- htaccess [2]
- unix [2]
- 時間的な制御 [1]
- 特集タイトル [1]
- jQuery ABテストツールを作ろう [1]
人気のあるUIサンプル
1
jQuery 長押しで発動
2
JS ブラウザのURLを書き換える
3
JS CSV読み込みjQueryで表示
4
jQuery iframeを後から読み込み
5
SVG 矢印のサンプル
6
SVG 三角形のサンプル
7
JS バイブレーション
8
JS メーラー起動
9
jQueryとCSS カードをクリックでめくる表現
10
CSS3 スクロールバーのスタイル
11
jQuery メディアクエリと同様の出し分け
12
JS aタグを使わないリンクいろいろ
13
jQuery カードをめくる表現
14
JS テキストエリア文字挿入
15
jQuery スクロールでクラス付加、解除
16
JS cookie書き込み
17
CSS3 震える表現
18
jQuery オーバーレイ
19
CSS 印刷のときに非表示
20
VeuJS JSONの読み込み
11〜20
新着サンプル
- VueJS タブ切り替え
- クリックしてコンテンツが切り替わる表現のサンプルです。 <p>タブの表現はよく見かけるので、VueJSでもサンプルを実装してみました。</p> <p>デフォルトは一番左のコンテンツが表示され、タブをクリックすると、コン...
- 2019-03-24 20:07:46
- VueJS クッキーの操作
- Vue.jsを使ったソースでクッキーの操作を実装しました。 <p>フォームで入力した値をクッキーに書き込みます。</p> <p>その後、ページロードでも読み込みますが、読み込みボタン、削除ボタンを実装しました。</p>...
- 2019-03-24 00:02:14
- PWA ホーム画面に追加するボタン
- プログレッシブウェブアプリケーションが徐々にブラウザでサポートされ始めました。その機能を使ってアプリのようにホーム画面に追加することができるようになったので、実装してみました。 <p>2018年2月頃からGoogle Chromeのアップデートの中でウェブサイトがアプリライクな機能を実装できるようになるPWAといういろんな機能が徐々にサポートされてき...
- 2019-03-17 14:27:31
- jQuery 自動ドア風アニメーション
- 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 <p>まずは、シンプルに表示させるパターンです。</p> <div class="demo_box"><img src="/img/demo/cat/010.jpg"> <div class="demo_blind"></div> </div>...
- 2019-03-10 23:26:06
- CSS 左右に行き来するアニメーション
- 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 <p>CSSのアニメーションを利用して、画像を左右に行き来させています。</p> <p>画像を変えればいろんなものに応用ができます。</p> <p>一部jQueryを使って...
- 2019-03-03 22:19:33
- jQuery 消去法のUI
- 一覧になっている要素をユーザの操作で削除するUIのサンプルです。 <p>ニュースやECなど閲覧の傾向からレコメンドされることはありますが、私はそのおすすめが気に入らないことがよくあります。</p> <p>裏でいろいろな仕組みが...
- 2019-02-20 19:11:02
- jQuery タブ（横）シンプル版
- 過去に作ったタブのサンプルから、コードをよりシンプルに改変しました。 <p>スタンダードなタブメニューですが、作るとなると意外と面倒です。</p> <p>でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください...
- 2019-02-15 20:11:33
- jQuery 要素をタグで囲う
- 作った要素を、後から別のdivタグで囲みたいとき、wrapメソッドを使って囲うサンプルです。 <p>下記のサンプルは、クリックすると、クリックされた要素の外側がdivで囲まれ、影のスタイルが当たります。</p> <p>クリックするたびに、div要素が二重、三...
- 2019-02-11 14:46:03
- jQuery スライドスイッチ
- スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。 <p>右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。</p> <p>以下のスワイプではなく、スイッチ全体をタップするだ...
- 2019-02-10 22:17:27
Top