人気のあるUIサンプル

• SVG ひし形のサンプル
• SVGでひし形、ダイヤを描くサンプルを紹介します。箇条書きやアイキャッチによく使われますが、画像をいちいち作るのは面倒です。SVGにもひし形を簡単に描けるよ...
• 2019-07-30 21:41:30

• jQuery レスポンシブデザイン
• jQueryを使ってレスポンシブなデザインを組む時の代表的なプラグインの紹介です。 一般的にはグリッドレイアウトなどと言われており、ブラウザの横幅によって...
• 2019-07-30 21:45:18

• CSS3 flexを使った配置２（要素の改行）
• 以前掲載した、flexでシンプルに横に並べるサンプルに続き、子要素の数が多くなった時の応用編です。 まずは共通のスタイルを用意します。 .demo_box{...
• 2019-07-30 21:50:18

• jQuery マウスオーバーで画像入れ替え
• マウスのカーソルを合わせると画像が入れ替わるサンプルです。 jQueryで画像の読み込みが完了した後に、オンマウスすると別の画像を表示します。 画像の入れ替えは、imgタグのsrc属性の値の文字列を置換するシンプルな記述...
• 2019-07-30 21:58:07

• jQuery 同じ処理の部分だけまとめる
• 多数の要素に同じ処理を書くとソースが増えて、ちょっとした修正もコピペ祭りになってしまいます。そんなときはaddメソッドが便利。 まずこのようなサンプルを用意しました。 ３つの要素にアニメーションをjQueryでつけています。 demo1 demo2 demo3 動きが終わっ...
• 2019-07-30 22:17:10

• CSS 画像のぼかし、補正
• CSSのfilterを使って簡単な画像補正が可能です。何がどう調整できるのかサンプル一覧を作りました。 フォトショップを使わずにCSSでも画像の補正がかなりできるようになりました。 たくさんの種類があるので、どんなことができるのか並べてみましょう。 画...
• 2019-07-30 22:28:24

• CDNの使用例
• CDNを使うときのコードのサンプルを紹介します。 CDNとはContent Delivery Network略で、簡単に言うとユーザのブラウザにいち早くコンテンツを届くよう準備してくれるネットワークのこと。 何がいいかという...
• 2019-07-31 07:51:15

• HTML headに書く代表的なタグ
• metaタグの種類でスタンダードなもの、よく使うもののサンプルです。 HTMLのタグの間に記述するよく使われるタグを紹介します。 実際たくさんの種類がありますが、その中でこれだけ知っておけば大丈夫というものを列挙します。...
• 2019-07-31 08:09:12

• jQuery モーダルウィンドウ
• モーダルウィンドウとは、JSを使ってポップアップウィンドウのような表現でボックスを表示し、基本的にはこのボックス以外の操作をさせないことを目的として設置...
• 2019-07-31 08:38:31

• CSS3 角を丸くする
• CSSのみで要素の角を丸くする表現のサンプルです。 丸角（まるかど）、角丸（かどまる）などと呼ばれることがありますが、角を丸くする表現はよく使われます。 ひと昔前までは、角のための画像をわざわざ作って...
• 2019-07-31 22:08:47