人気のあるUIサンプル

• JS URLクエリ取得
• URLから情報を取得するときの例です。 URLについているパラメータ情報だけでなく、JavaScriptでURLからいろいろな情報を得ることができます。 [[location....
• 2019-08-03 12:22:10

• JS idやclassの値取得
• JavaScriptで特定のidやclassの要素を指定し、そのタグ内の値の取得や出力をします。 読めばわかるものの、使わなければ忘れがちな値の取得と出力です。 classの場合は「getElementsByClassName」 idの場合は「getElementById」 idは一つ...
• 2019-08-03 12:36:14

• AngularJS リピートのフィルターいろいろ
• 以下のようなAngularJSのリピートの構文を使う場合様々なフィルターが用意されています。 [[<div ng-repeat="item in items | filter : 'あ'"&g...
• 2019-08-03 12:40:15

• CSS3 flexを使った配置３（行間の操作）
• 以前掲載した、flexで配置した時の改行のサンプルに続き、行全体の配置のサンプルです。 まずは共通のスタイルを用意します。 .demo_box{ backgroun...
• 2019-08-03 21:29:20

• jQuery BMIの計算ツール
• JSはいろいろできるので、せっかくなので標準体重を図るツールを作りました。 BMI (Body Mass Index)と呼ばれる指数は、成人の体格の肥満度を表す指数です。 算出方法は「体重(kg)÷身長(m)の二乗」とシンプルですので、JSを用いて計算す...
• 2019-08-03 21:52:15

• CSS3 要素を回転させる
• 要素にクラスを指定して回転、逆回転させるサンプルです。 CSS3では簡単に画像やオブジェクトを回転させることができます。 アイキャッチにはなりますが、多用すると目が疲れるので使うところは考えましょう。 まず...
• 2019-08-03 21:58:12

• jQuery キーを押されたら実行
• キーボードのボタンを押されたときに何かを実行するときのサンプルです。 例えば「a」のボタンが押されたときに、何かイベントを発動させたいときjQueryで発動させることができます。 まずは、キーを押された時に取得できる値を確認...
• 2019-08-03 22:05:56

• CSS3 やわらかい動き
• ポヨンと弾力のあるアニメーションの演出です。 CSSのアニメを使ってやわらかい表現を付加します。 表示時とクリックしたときに発動するサンプルです。 クラスを設定すれば、要素は画像でもSVGでも文字で...
• 2019-08-03 22:14:07

• CSS マーカーのような表現
• 蛍光ペンで文字の上に線を引いたような表現のサンプルです。 文章の中で、目立たせたいときに、よく蛍光ペンで線を引きます。 CSSで思いのほか、簡単にできます。 サンプルの文章で、大事な部分に、水色をつけて...
• 2019-08-03 22:19:57

• jQuery 要素のクローンを作成
• 表示されている要素と同じものを動的に作成するサンプルです。 ユーザーがクリックしたら同じ要素が複製されるような機能を作るときには、cloneメソッドが便利です。 わざわざクローンを生成しなくても、同じタグをappend...
• 2019-08-03 22:50:00