- GSAP アニメーションライブラリ入門
- アニメーションライブラリのGSAPを使った初めての方向けのサンプルです。 GSAPというメジャーでかなり機能が充実したアニメーションライブラリの導入のサンプルです。 処理も軽く、読み込みの早い、高機能なライブラリです。 以下...
- 2021-06-04 00:14:00
UIサンプルギャラリー「キプレ」
MENU
用途
新着
履歴
分類
★
デザイン
デザインに関するUIのサンプルです。
「デザイン」に関するサンプル
- CSS tableを使わないgridの表
- display:gridを使って、テーブルを使わない表組みを作るサンプルです。 グリッドはレスポンシブ対応などでよく耳にしますが、表を作る時にも便利です。 静的に書かれたtableタグの場合、列を消したり、人マス消すのは一苦労です。...
- 2020-03-11 23:27:24
- jQuery 狭いエリアに文字をアニメで格納する
- 文字列を動的に埋め込むとき、デザインの都合上、どうしても横幅に 制限あるときがよくある。そんな時に使ってほしいサンプルがこちら。 スマホなどの横幅が狭い画面で、人の名前や地名など動的に入ってくる文字を設置したいことがあります。 そんなときサーバーサイドで文字を切って「…...
- 2020-01-27 00:36:08
- CSS デバイスの高さまで縦を広げる
- CSSのvhの単位を使ってデバイスやブラウザの高さを要素にセットするサンプルです。 100vhを指定するとデバイスの縦幅いっぱいの高さとなります。 以下の親要素（破線の部分）の高さは300pxを指定しています。 height:100%; height...
- 2019-12-01 16:00:37
- CSS デバイスの横のサイズを扱う
- CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位...
- 2019-11-16 12:53:42
- CSS 画像のぼかし、補正
- CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画...
- 2019-07-30 22:28:24
- CSS ヘッダー固定
- ヘッダーやフッターなど、バナーやメニューを簡単に固定できるCSSのposition:stickyのサンプルです。 以下のようにヘッダーにdiv要素で画像やメニューなどを簡単に固定できるスタイルの紹介です。 以前はこのようなことがやりたくてもz-indexやfixedで表現して...
- 2019-07-28 13:37:32
- CSS 左右に行き来するアニメーション
- 車、電車などホームページでちょっとした演出を施したいときのサンプルです。 CSSのアニメーションを利用して、画像を左右に行き来させています。 画像を変えればいろんなものに応用ができます。 一部jQueryを使ってますが、ほぼCSSの...
- 2019-07-28 14:44:36
- jQuery スライドスイッチ
- スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。 右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。 以下のスワイプではなく、スイッチ全体をタップするだけで、切り...
- 2019-08-03 23:00:36
- jQuery クラスで一括操作
- クラスが付いている要素にだけ処理を実行したい場合のよく使うメソッドです。 filterとhasClassのメソッドのサンプルの二つを用意しました。 実行している内容はほぼ同じです。 まずはfilterメソッドを使った場合...
- 2019-08-07 23:45:03
Top