- jQuery メディアクエリと同様の出し分け
- CSSのメディアクエリによって、ウィンドウの幅に応じたスタイルの出し分けは、よく見かけるようになってきました。 そこで、そのウィンドウサイズに応じてJS...
- 2019-07-28 15:49:54
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
デザイン
デザインに関するUIのサンプルです。
「デザイン」に関するサンプル
- jQuery パララックス 簡易版
- パララックスとは、視差効果を使って奥行きを出す表現のことです。 よくいろんなサイトで使われるのは、マウスやスクロールによって、要素が時間差で動くこと...
- 2019-08-07 17:44:53
- jQuery メニューのトグルボタン
- スマホの左上や右上によく見かけるメニューボタンのサンプルです。 ハンバーガーメニューとも言われますが、そのボタンを押すとクローズボタンに切り替わりま...
- 2019-07-29 06:29:24
- jQuery アコーディオンメニュー
- スマホなどの限られたスペースの中で、いろんな項目の内容を表示させたいときに、便利なのがアコーディオンメニューです。 クリックすると見出しごとに詳細情...
- 2019-07-29 05:54:34
- jQuery オーバーレイ スマホ版
- スマホを意識したオーバーレイの表現のサンプルです。 bodyタグの直下にJSで挿入し、ヘッダーに強制追加するパターンと、画面下部に常に表示されるパターンの２...
- 2019-07-28 16:37:41
- jQuery レスポンシブデザイン
- jQueryを使ってレスポンシブなデザインを組む時の代表的なプラグインの紹介です。 一般的にはグリッドレイアウトなどと言われており、ブラウザの横幅によって...
- 2019-07-30 21:45:18
- jQuery IDやClass指定でスタイルを変える
- jQueryを用いてHTMLで書かれた要素を後から変更をかけたいということが、よくあります。本件ではスタイルを変更するために、クラスを追加するサンプルを用意しま...
- 2019-08-02 23:18:15
- jQuery 時差読込レイジーロード
- 画像の読み込みをわざと遅らせて、スクロールによって読み込みを開始させます。 スマホでよく使われる技法ですが、PCでもよく見かけるようになりました。...
- 2019-08-02 08:42:56
- jQuery ツールチップ
- ツールチップとは、ちょっとした説明を追加したいときに使う吹き出しのような表現です。 何か説明を付け加えたい時のこの表現 → ? こんな感じで説明が表示されます。 マウスのカーソルを合わせると付加情報が表示されます。 上のサンプルでは...
- 2019-08-06 23:47:09
- CSS3 オンマウスで画像拡大
- PCで画像にマウスを合わせると画像が拡大します。 css3限定での手法になります。 スマホではタップすると、１度だけズームします。 .imgs { wid...
- 2019-08-02 08:30:13
Top