人気のあるUIサンプル

• NodeJS 画像をHTMLで表示する
• NodeJSを使って、HTMLを読み込み、画像を表示するサンプルです。 JSをサーバサイドで実行することで、そのJSが置いてある配下のディレクトリから画像を読み込んでくるコードです。 とりあえずapp.jsとか名付けました。 [[...
• 2019-07-29 05:41:20

• CSS3 ウィンドウサイズ変更でアニメーション
• ウィンドウのサイズが変わった時にアニメーションでレイアウトを変えたいときに使う表現です。 MediaQueryを使ってウィンドウサイズによってレスポンシブに変...
• 2019-07-29 05:49:53

• jQuery アコーディオンメニュー
• スマホなどの限られたスペースの中で、いろんな項目の内容を表示させたいときに、便利なのがアコーディオンメニューです。 クリックすると見出しごとに詳細情...
• 2019-07-29 05:54:34

• CSS3 要素を揺らす
• 画像やテキストなど要素を目立たせるために縦や横に揺らすサンプルです。CSS3で実装しています。 位置を移動させループ再生をしています。 縦に揺らす...
• 2019-07-29 05:58:03

• jQuery 指定の高さを超えたらボタンを表示
• 文章のデザインを組んでいる時に、高さを抑えたい場合がたまにあります。 スクロールをつけることもありですが、他に以下のように隠れた情報は、ボタンを押す...
• 2019-07-29 06:11:18

• jQuery スクロール最下部を検知
• スクロールして最下部にきたときを検知し、発火させる記述例です。 [[$(window).on("scroll", function() { var scrollHeight = $(document).h...
• 2019-07-29 06:22:40

• jQuery メニューのトグルボタン
• スマホの左上や右上によく見かけるメニューボタンのサンプルです。 ハンバーガーメニューとも言われますが、そのボタンを押すとクローズボタンに切り替わりま...
• 2019-07-29 06:29:24

• VueJS ifのクリックで切り替え
• コードを書くときに、条件分岐は必須です。 その中で重要な役割を果たす「if」のコードのサンプルです。 .demo_code { background-color: #DDD; m...
• 2019-07-29 06:38:27

• CSS3 画像を左右に回転する
• 要素をCSSのアニメを使い、左右にかしげるような表現のサンプルです。 CSS3で手軽にアニメーションが使えるようになり、回転とループアニメを組み合わせると下記のような動きをつけることができます。 左右に回転するアニメーショ...
• 2019-07-29 06:53:21

• jQuery 自動ドア風アニメーション
• 画像や文字などを隠しておいて、クリックで表示させるサンプルです。 まずは、シンプルに表示させるパターンです。 toggle fadeToggle slideToggle トグルは表示、非表示。フェードは徐々に透明度で変化。ス...
• 2019-07-29 07:56:24