人気のあるUIサンプル

• jQuery オーバーレイ　スマホ版
• スマホを意識したオーバーレイの表現のサンプルです。 bodyタグの直下にJSで挿入し、ヘッダーに強制追加するパターンと、画面下部に常に表示されるパターンの２...
• 2019-07-28 16:37:41

• CSS 印刷のときに非表示
• ウェブページを印刷するときに、表示する要素を出し分けます。 使い所はそんなにないのですが、印刷する時に一部の画像や要素を非表示にしたい場合のCSSのサンプルです。 画像の高さを維持して、画像だけ真っ白にする場合...
• 2019-07-28 16:45:54

• SVG 矢印のサンプル
• たまに矢印が必要なとき、画像を作るほどでもないなぁ、と思う時があります。 そんな時はSVGが便利。 色やスタイルも変えられるので、コーディングの表現...
• 2019-07-28 17:02:11

• JS バイブレーション
• 現在はまだAndroidのみですが、バイブレーションをJSで発火させることができます。 スマホには大抵バイブレーションの機能がついています。 OSがAndroidの場合、以下のJavaScriptで簡単に発動できます。 $(document).ready(function() {...
• 2019-07-28 17:08:52

• jQuery スクロールでクラス付加、解除
• スクロールするとクラスを追加して、変化させるサンプルです。 要素がブラウザの中央付近になったときに、エフェクトがかかるデザインをよく見かけるようになりました。 このサンプルでは、特定クラスで囲った要素までスク...
• 2019-07-28 17:14:04

• jQuery 要素のスライド
• 左右のボタンをクリック、タップすると要素が左へ移動します。スワイプにも対応しました。 複数のテキストや画像を並べて表示する場合、そのまま並べてしまうと画面が埋まってしまいます。 そんな時のサンプルです。 高さや幅を固定して、はみ出す...
• 2019-07-28 17:21:54

• jQuery スワイプできるカルーセルスライド
• スワイプで次の画像が表示されるjQueryのみで実装した画像のスライドです。 jQueryを利用したプラグインのスライダーや、利用しないプレーンなスライダーもあ...
• 2019-07-29 05:02:26

• CSS3 震える表現
• 画像や文字がアニメーションすると、どうしても見てしまいます。 縦と横それぞれに揺らす表現は以前紹介しました。 縦と横の動きを混ぜることで、シャッフ...
• 2019-07-29 05:10:08

• jQuery フェードインアウト
• fadeIn,fadeOutのメソッドは、ミリ秒単位で速さの指定ができます。 jQueryの使う上で、最もシンプルでよく使う演出の一つです。 .demo_btn{ display:...
• 2019-07-29 05:14:24

• JS テキストエリア文字挿入
• textareaタグ内でカーソルを合わせ、ボタンを押すと特定の文字が入るサンプルです。 テキストの入力で定型文を使うときに、パソコンの予測変換などを使いますが、同じように入力を手助けする機能の一案を紹介します。 挨拶や署名などがよくあり...
• 2019-07-29 05:33:37