人気のあるUIサンプル

• jQuery 透明度を変更する
• 画像や要素の透明度を指定の値にフェードイン、フェードアウトするサンプルです。 ボタンを押すと１０段階で画像の透明度が上がり、画像が消えて行きます。 fadeOutメソッドを使うと一発で消えてしまうので、少しずつ透明度をコントロールす...
• 2019-08-03 22:56:20

• jQuery スライドスイッチ
• スマホの設定などでよく見かけるスライドしてスイッチをON/OFFするUIのサンプルです。 右にスライドするとON、左に戻すとOFFになるデザインをCSSだけで形と動きを実装しています。 以下のスワイプではなく、スイッチ全体をタップするだけで、切り...
• 2019-08-03 23:00:36

• jQuery タブ（横）シンプル版
• 過去に作ったタブのサンプルから、コードをよりシンプルに改変しました。 スタンダードなタブメニューですが、作るとなると意外と面倒です。 でもプラグインを使うほどでもないので、以下のソースをコピペでお使いください。...
• 2019-08-03 23:07:51

• PHP ハッシュについて
• PHPでいろんな種類のハッシュ値を表示してみたサンプルです。 ハッシュとは、ある入力値が特定のアルゴリズムの関数によって、別の出力値となる操作や値そのもののことをさします。 以下はPHPでハッシュの種類を配列で取...
• 2019-08-03 23:17:24

• PHP クラスの継承
• クラスの継承を使ったサンプルです。 継承したメソッドから、配列の値を受け渡し、色のついた文字を作るデータを作る例です。 上のcolorClassというクラスのメソッドが配列情報を持っていて、下の...
• 2019-08-03 23:23:11

• PWA ホーム画面に追加するボタン
• プログレッシブウェブアプリケーションが徐々にブラウザでサポートされ始めました。その機能を使ってアプリのようにホーム画面に追加することができるようになったので、実装してみました。 2018年2月頃からGoogle Chromeのアップデートの中でウェブサイトがアプリライクな機能を実装できるようになるPWAといういろんな機能が徐々にサポートされてきま...
• 2019-08-03 23:12:02

• PHP コードの再利用
• PHPの機能の一つtraitのサンプルです。 継承というと小難しいですが、こう見ると別のところに書いたコードを実行してるだけです。 [[//トレイトのサンプル trait demo1{ function do1(){...
• 2019-08-03 23:32:12

• SCSS スタイルの挿入や継承
• SCSSなら何度もCSSで同じ記述しなくてもよいような機能があり、その中で挿入や継承についてのサンプルです。 SCSSはコンパイルしてCSSを作成する必要がありますが、とてもスマートな記述でCSSを生成することができます。 「_commonCss.scss」を挿入する場合 [[ @im...
• 2019-08-03 23:41:45

• SVG 星のサンプル
• 星のマークはパワポでもイラレでも用意されてますが、サイト上でも使う機会があると思います。 そんなとき手軽にコードだけで使えるよう星のサンプルも用意し...
• 2019-08-04 00:02:35

• JS 数字のカウントアップ演出
• 数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。 今回はライブラリを使って数字をカウントアップさせます。 金額や点数を演出するときなどに使えそうです。 ここでは最低限のオプションだけ実装しています...
• 2019-08-04 00:05:58