jQuery キーを押されたら実行 キーボードのボタンを押されたときに何かを実行するときのサンプルです。 例えば「a」のボタンが押されたときに、何かイベントを発動させたいときjQueryで発動させることができます。 まずは、キーを押された時に取得できる値を確認... 2019-08-03 22:05:56
CSS3 要素を回転させる 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず... 2019-08-03 21:58:12
JS 文字列一致 if文で文字列の部分一致を判定して出しわける構文のサンプル。 よく使うけど、忘れがちなので備忘録です。 正規表現の文字列一致 [[ ua = navigator.userAgent; if(ua.match(/chrome/)) { conso... 2019-08-07 23:05:10
jQuery 日付指定 jQueryのUIに特化したプラグインを利用した日付を選択する入力欄の作り方です。 文字を入力して日付を記入するのは、面倒ですし、フォーマットがそろわなくて、データとして使いにくい値になってしまいます。 そんな時に以下のようなサンプ... 2019-08-07 22:52:52
HTML5 ダウンロードボタン HTML5であればaタグに、download属性を書くだけでダウンロードボタンが作れます。 下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合... 2019-07-28 04:49:43
JS 感圧で遊ぶ iPhone6s以上限定ですが、押し込んで面白い表現を作ってみようと思います。 タッチ3Dの押し込まれた値によってどんなことができるか検証します。 この記事はiPhone6s以上で閲覧をお願いします。 #press_area3{ width:200px; hei... 2019-08-07 22:47:03
JS 感圧の検証 この記事はiPhone6s以上で使える3Dタッチ(感圧)についての検証です。 iPhone6s以上だと画面を強く押すと圧力を感知して、タップとは違う挙動になります。 その挙動に対してJSによる感圧を取得する関数でトリガーを実装すると、どう... 2019-08-07 22:43:16
JS 元画像のサイズと表示画像のサイズ サイト上で画像を小さく表示することはよくありますが、表示されている縦横のサイズはよく使うのですが、たまに元の画像のサイズを使いたい時があります。 そんな時は以下のようなJavaScriptで元の画像のサイズを取得することができます。 [[<img id="neko" src="/img/demo/cat/002.jpg"... 2019-08-07 22:34:44
jQuery BMIの計算ツール JSはいろいろできるので、せっかくなので標準体重を図るツールを作りました。 BMI (Body Mass Index)と呼ばれる指数は、成人の体格の肥満度を表す指数です。 算出方法は「体重(kg)÷身長(m)の二乗」とシンプルですので、JSを用いて計算す... 2019-08-03 21:52:15
CSS3 flexを使った配置3(行間の操作) 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun... 2019-08-03 21:29:20