おしゃれなローディング画像をサクッと実装するjQueryプラグイン「fakeLoader.js」
問い合わせアップにつなげる、入力フォームのスマートフォン最適化
郵便番号から住所を入力させる国産jQueryプラグイン「jQuery.jpostal.js」
【Javascript】多彩なアニメーションでモーダルウィンドウを表示できる「animatedModal.js」
機能が豊富なフリック対応のスライドショー「Flickity」beta版がオススメ！
CSSだけで簡単実装！入力フォームの新しいエフェクト
Codropsで、入力フォームにフォーカスした時の、面白いエフェクトが紹介されていました。CSSトランジションやアニメーションを使い、様々なエフェクトを実現しています。
INS ...レスポンシブのグリッドレイアウトを作ってくれるスクリプト「Masonry」
複数のボックスをタイル状に並べるグリッドレイアウト。これを、簡単に実装できるスクリプト「Masonry」をご紹介します。
サイズの異な ...
CSS3でサクッと実装！かっこいいナビメニュー
CodePenにCSSのみで実装できる、ホバーエフェクトがかっこいいナビメニューが紹介されていました。マウスを置くと左からカーテンを引くよう ...
CSSプロパティを簡単にチェックできるchromeの拡張機能「CSS Dig」
Webサイト内で使用しているCSSを解析してくれるChormeの拡張機能「CSS Dig」。コーディングがうまく行かない時のCS ...
【css3】レスポンシブレイアウトに使いこなしたい！CSS3の単位指定「vw」「vh」「vmin」「vmax」
これまで、CSSでのサイズ指定にはpxや%を用いることが多かったのですが、CSS3では新しい単位の指定が可能になりました。そ ...
【jQuery】ブランドサイトにも最適！ゴムのように弾むコンテンツスライダー
限られたスペースの中で、効果的にコンテンツを見せていくスライダーは訴求力が高く、ブランドサイトなどにも ...
【CSS】 すぐに使える！デザイン・アニメーションともに洗練されたツールチップ９種
デザイン性にも優れ、きれいにアニメーションするツールチップがCODROPSで公開されていたので、ご紹介します。
まずはデモ
【Javascript】alert（アラート）をスタイリッシュにデザインするスクリプト「Sweet Alert」
Webサイトで警告メッセージを出すとき、Javascriptのalert（アラート）を使用しますが、ブラウザ独自のものをそ ...
【jQuery】かっこよくて実用的！レスポンシブ対応のLightbox風ギャラリー
画像をかっこよくギャラリー化してくれるjQueryプラグイン「Strip」。レスポンシブで、しかも、IE7以上の主要なブラウザに対応。動画にも対応してい ...
【CSS】スクリプトを使わず、CSSだけで手軽に連番を振る方法
表やリストに順番に連番を振りたいとき、Javascriptでも実装することができますが、もっと手軽な方法があります。
CSSの「counter-reset」と「co ...
【CSS】@font-faceでのWebフォント指定方法と気をつけるべきこと
以前、「今さら聞けない「Google Web fonts」の使い方」という記事で、Webフォントについてご紹介しました。この時はGoogleが提供するサービス ...
【javascript】レスポンシブなタブメニューをサクッと実装できる「Responsive Full Width Tabs」
PCサイトをレスポンシブ化する上で悩むのが、メニューのあしらい。
特にタブメニューとなると、スマホサ ...
CSSオンリーでローディングアニメーションを簡単に作るジェネレーター「CSS Load」
【CSS3】CSSだけで実現！背景画像を固定＆スクロールで切り替えるパララックス風効果
背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...
【CSS3】SCSSで作るスライドメニュー！マウスオーバーで背景色チェンジ
背景画像を画面いっぱいに表示し、パララックス効果のようにスクロールで画像を切り替えるCSSをご紹介します。スクリプトを使用していないので動作が軽く、 ...
【Javascript】３Dアニメーションで切り替わるレスポンシブのコンテンツスライダー
奥行きのある３D効果で画像を配置し、アニメーションをしながら切り替わる「Tilted Content Slideshow」。Janvascript ...
すぐに使える！CSS３で画像を加工する「フィルタ」まとめ
【CSS】CSSで簡単カスタマイズ！きれい、かわいい、軽いSVGアイコン28個がおすすめ！
美しいグラッフィクが魅力のSVGアイコン28個がセットになった「Optimized Inline SVG Icons」。JPEGやGIFなどの画 ...
【HTML5】もう入力でうんざりされない！一問一答、全画面のフォームアイデア
商品の注文やアンケートの入力フォームというと、一画面の中に名前やアドレスなどの記入必須事項が縦にいくつも並んでいるものがほとんどです。
ですが、今回紹 ...
【jQuery】テーブルの見出しがスクロールに付いてくる方法
テーブルで大量のデータを見せたい時におすすめなjQueryプラグイン「Sticky Table Headers」をご紹介します。縦 ...
アンカーテキストに色々なエフェクトをかける方法。
ホバー効果は画像やボックスだけではありません。CSS3を使えば、アンカーテキストにも、遊び心たっぷりのホバー効 ...
【Javascript】CSS3に自動で、必要最低限のベンダープレフィックスを付けてくれるプラグイン「cssFX」
ベンダープレフィックス対応が面倒なcss3のgradientsやbox-shadowなど、どのように記述していますか？
【便利ツール】CSS3のグラデーションをあっという間に作ってくれるジェネレーター２つ
css3のコーディングの中でも、特に記述が煩雑なのがグラデーション。いちいちカラーコードで指定せず、ジェネレータを使って視覚的に、サクッと実装してしま ...
【jQuery】テーブルのデータを棒グラフにしてくれるプラグイン「TableBarChart」
「TableBarChart」は、テーブルの数値をアニメーション付きで棒グラフとして見せてくれるプラグイン。
使い方もカスタマイズも ...
【jQuery】飛び出して弾む！アニメーションがキュートなツールチップStackbox.js
飛び出したり、ひっくり返ったり、ぶら下がったり、多彩なアニメーションで楽しませてくれるツールチップ「Stackbox.js」。遊び心満載で、軽 ...