人気のあるUIサンプル

• Storybookの実行メモ（Vue.js版）
• Vueを利用した環境で、Storybookを使うときの作業メモです。 Storybookは、最小単位でのデザインされたパーツを組み立ててサイトを構成する際に便利な内部向けツールです。 細分化されたパーツをサイトとは別に作品集よ...
• 2019-07-02 00:00:00

• Laradockでmysqlのtableを準備する
• laradockで環境を起動 [[docker-compose up -d nginx mysql redis beanstalkd]] DBの作成 mysqlのDBを作成する （初めていじるかたは、近隣のDBをバ...
• 2019-07-28 01:20:18

• jQuery 長押しで発動
• マウスやスマホ用の長押しボタンのサンプルです。 クリックやタップの他に、長く押された時にイベントを発生したときは以下のように作ります。 このサンプルではボタンに触れて２秒後に設定しています。...
• 2019-07-28 04:12:53

• CSS デバイスの横のサイズを扱う
• CSSのvwを使ってデバイスのサイズをデザインで扱うサンプルです。 viewportが「width=device-width」のとき、デバイスの横幅のサイズはユーザの端末次第となります。 その設定の場合、横幅をデザインで扱いたい時vwという単位...
• 2019-11-16 12:53:42

• jQuery Cookieで表示回数制限
• １日１回だけ、要素を表示したいときのコードのサンプルです。 複数の訪問やページを行き来して何度も表示したくない時によくCookieが重宝されます。 応用すれ...
• 2019-07-28 04:25:20

• jQuery iframeを後から読み込み
• youtubeなどをホームページに埋め込もうとするとiframeタグで貼ることが主流です。 iframeタグで貼ると非同期であるものの、imgタグと同様にそのsrc属性に...
• 2019-07-28 04:43:48

• CSS 画像をフィルターするアニメーション
• 切り抜いた画像を重ねて移動することで、画像の一部をフォーカスしたような演出をするサンプルです。 ぼかしている画像の一部が鮮明に見える表現です。 実際は、ぼかしている画像の上に切り抜かれた画像が置かれており、切り抜く部分をアニメーションで変化させ...
• 2019-11-15 17:47:52

• HTML5 ダウンロードボタン
• HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。 下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合...
• 2019-07-28 04:49:43

• JS CSV読み込みjQueryで表示
• CSVを読み込み、jQueryで出力するサンプルです。 HTML5のFile APIを使ってローカルのCSVファイルを取り込み、加工できる状態にするスクリプトです。 下記のようなカンマ区切りのファイルをローカルに置き、...
• 2019-07-28 04:54:43

• jQueryとCSS カードをクリックでめくる表現
• jQueryとCSSのアニメーションを使って、カードをクリックすると画像がめくれる表現のサンプルです。 以前カードをめくるような表現のサンプルを記載しましたが、改善版です。 要素をコピペで量産、順番を変えてもJSの修正は不要のため、編集が楽になりました。...
• 2019-07-28 04:58:36