レスポンシブレイアウトで構築したWebページの場合、閲覧している画面サイズによってレイアウトが最適化される構成になるのでPC用レイアウトとスマートフォン用レイアウトを任意で切り替えることは出来ないものだと思っていたのですがjQuery等を使ってmetaの「viewport」を切り替えることによってスマートフォンでもPC… →ReadMore

今までもハイクオリティなフリーアイコン素材など何度か紹介してきましたが、フラットなものやロングシャドウ等々、様々な種類の中からデザインを選択しとても簡単にカスタマイズしながらアイコンを作成することができるツール「Iconion : Free Icon Maker」がとても便利だったので自分用メモとして紹介してみます。様… →ReadMore

最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くありその都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですがjQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ自分でもいろいろと試してみたので実験内容と併せて紹… →ReadMore

先日、AllAboutさんの記事でWebページ上のテキストに対して「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題したjQuery+CSS3を使って1文字ずつ装飾を変える方法を解説していましたがこれをCSS3未対応ブラウザでも実装できるようにjQueryのみで文字単体に… →ReadMore

Facebook上にWebページをシェアした際に表示されるOGP画像。最近では様々な表示パターンがあり実際にどう表示されるか、画像を作成する際に悩みどころだったりします。そんな際にFacebook上でOGP画像がどう表示されるかブラウザ上でシミュレートできるサービス「og:image Simulator」がこの先便利に… →ReadMore

パララックスサイトやAppleのプロダクトページの様な動きを付ける為のスクロールして特定の位置でアニメーション等の処理を実行させることができるjQueryプラグイン等をここでも何度か紹介しましたがプラグインのバージョンによって動作仕様が変わってしまっていたり上からのスクロールと、下からのスクロールの判断が微妙だったりし… →ReadMore

jQueryを使ってのレスポンシブに対応したスライドショーを実装するいくつかのパターンを紹介してきましたが、サムネイルも何もなしでただ画像(コンテンツ要素)がクロスフェードするだけのシンプルなスライドショーのレスポンシブに対応したパターンの要望を多くいただいたので試しに作ってみたのを紹介してみます。jQueryでレスポ… →ReadMore

Webページ上のテキストや数値を表示する演出でスロットマシンの様な回転アニメーションの必要性に駆られた事がこれまでに何度かありその度に苦労していたのですがとても簡単に同様のアニメーションを実装することができるスクリプトがあったので自分用メモとして紹介してみます。Odometer - Transition numbers… →ReadMore

以前に「jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験」と題して「もっと見る」ボタンで画像を次々と読み込ますUIを紹介しましたがそこで紹介したスクリプトでは連番で構成している画像要素のみの追加だったので「jQueryでページ最下部までスクロールした際に外部HTML(JSON形式)化した要素を追加する… →ReadMore

Webページ作成時にリストやdivなど連続したブロック要素を並べた際に中の要素量によって高さがまちまちになってしまった場合個々の高さを揃えるのはCSSだけだと何かと面倒だったりします。Webページ内に並べられたブロック要素の高さを揃えるjQueryプラグインは多々ありますが、ここ最近新たに話題になった高さを揃えるプラグ… →ReadMore