ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
codropsのギャラリーが素敵だったので WordPressのテーマにしてみました。 ライセンスは、個人でも商用でも利用可 で、コードも自由な利用を認めてくれて いました。唯一、記事を丸ごとコピーし ないで欲しい、との事。 そのライセンスはこちら。 先日も話題になったパクリ記事問題です(僕の記事もやられてました→ttp://ameblo.jp/sfida2010/entry-10758747352.html)が、codropsは心の広いブロガーさんのようで好感をもてますね。こうありたいものです。リスペクトも兼ねて、ライセンスに従い、WordPressのテーマにしたので配布します。 FullPageImageGallery このギャラリー(Full Page Image Gallery with jQuery)です。これをまんまテーマ化。 こんな感じでWPで管理できます。サムネイルの数は「
フォームの項目を入力すると、次の入力欄がアニメーションで表示されるコンテンツを実装するチュートリアルを紹介します。 Gravity Registration Form with Jquery デモページ [ad#ad-2] フォームの出来ぐあいは、ウェブアプリケーションとしての成功率を左右する要因となります。 一つのアプローチとして、ユーザーに入力欄の数を少なく感じられるように、入力する項目を一つずつ表示するスクリプトを紹介します。 フォームの実装 フォームの各項目は、リスト要素で実装しています。 HTML <form method="post" > <ul> <li class="email"><label>Email: </label><br/> <input type="text" username="email" id="email" AUTOCOMPLETE=OFF/><span
最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
限られたスペースに設置するのに最適、コンテンツにスクロールバーを設置するjQueryのプラグインを紹介します。 スクロールバーのデザインはCSSで簡単にカスタマイズできます。
I`m sure you noticed that almost every website has implemented at least one jQuery plugin. My opinion is that jQuery is beautifying a website and should be a must have. The offer varies from image gallery sliders to tooltips or to fancy navigation but the most popular plugins are the sliders. Below I`m presenting you the best and the most beautiful and fully functional jQuery Slider Plugins which
パネルに配置したテキストを下部にいくにつれフェードアウトで表示し、残りのテキストをアニメーションで表示するコンテンツを実装するチュートリアルを紹介します。 残りのテキストをアニメーションで表示したキャプチャ [ad#ad-2] 実装 HTML HTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。 <div class="sidebar-box"> <p>パネルのテキスト</p> <p class="read-more"><a href="#" class="button">Read More</a></p> </div> CSS パネルの初期状態のサイズはスタイルシートで設定します。フェードアウトはCSS3グラデーションを使用します。 .sidebar-box { max-height: 120px; position: relative; overfl
Websites pack more of a punch when the right gallery or image showcasing plugin is utilized. Are you often finding yourself at a loss of options for your next gallery plugin solution? Well, the good news is that jQuery plugin has plenty of gallery plugin solutions at hand for you. Furthermore, jQuery has long been touted as and delivered on being the best gallery creator available. Forget about CS
ドラッグできる地図実装ライブラリのまとめ。 この手のライブラリは色々とあるのですが過去に紹介したものと新発見の物をまとめてご紹介。 Google MapのAPIを利用したものも入れます mobily.pl - playground - MobilyMap 拡大機能はありませんが、ドラッグ&ドロップで移動させたりピンを立てる機能があります Googleマップ風のUIを実現できるJSライブラリ「Polymaps」 マウスホイールによる拡大・縮小機能があってサンプルも豊富なライブラリ ドラッグ&ドロップできる地図を実装できる3KBの軽量JSライブラリ「SpryMap」 独立して動作し、軽量なのが特徴 高解像度の画像のURLを入れるだけでGoogleマップみたいに拡大機能を付けられる「Zoom.it」 ライブラリではなく、画像URLを張り付けるだけでOKなサイト GoogleMap風でクールな地図
Fixed Center jQuery plugin David's Web Development Blog 1行でエレメントを縦・横センターに配置できるjQueryプラグイン「Fixed Center」。 $(element).fixedCenter(); のようにエレメントを指定するだけで要素をセンタリング出来ます。 難しいことを考えなくてよくて1行で指定できるので覚えておくと便利かも。 関連エントリ jQueryを使って画像の上にコンテンツをクールにアニメーションされてオーバーレイ表示するサンプル フォームに簡易電卓を組み込める「jQuery Calculator」 30近いウィジェットがセットになったjQueryプラグイン集「Wijmo」 どんなHTML要素もカルーセル化してしまえるjQueryプラグイン「CarouFredSel」
最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」 2010年12月06日- jQuery Apple Effect 最初に必要なものだけ効果的に見せるAppleサイト風エフェクト実装jQueryプラグイン「Apple Effect」。 最近Appleのサイトを見たことがある方なら分かると思いますが、最初に1枚の画像を表示しておいて、ナビゲーションなんかは少し待たせて、フェードインしながら表示するというカッコいい効果を作れます。 最初に1枚の画像を表示 フェードインしながらナビゲーションを表示する こちらのデモで動きを確認 実装は1行。 $('#target').appleEffect(); オプションを渡すことでアニメーション開始までの時間を設定したり、コールバック関数を指定できたりします。 ちょっとめんどくさそうなこの機
個人的に気に入ってよく使っている、又は いつか役に立ちそう、いずれ使いたい的な Lightbox風に拡大実装出来るjQueryプラグ インのまとめです。使うときにいちいち引っ 張り出しているのが面倒なのでまとめにして ついでにシェアしようと思って記事にします。 オーソドックスなものから、やや特徴的なもの、Twitterで「こんなのない?」って聞かれて探したものなど10個厳選です。特徴も一緒にメモしておきます。 なお、画像を使うjQueryプラグインにご興味が有るようでしたら、以前書いた画像を使ったいろいろなjQueryプラグイン224個まとめも参考にして頂けるかと思います。 colorbox 一番よく使っているかもしれません。MITライセンスで、グループ化⇒スライドも可能。また、iPhone、iPadでも動いて表示も崩れません。エフェクトも変更可能で、YoutubeやIframe、Flas
本連載では、JavaScriptライブラリの中でも人気が高まりつつあるjQuery UIとプラグインを取り上げます。今回は、Input Hint Overlay、Text input field filter、jQuery Validation、Password Strength、Simplest Twitter-like dynamic character countについて説明します。 はじめに 第2回「jQuery UIのウィジェットを使ってみよう」では、jQueryのユーザーインターフェースを拡張するjQuery UIのインストールから、jQuery UIのDialog、Datepicker、AutoComplete、ProgressBarの使い方を取り上げました。第3回では、第1回「jQuery UIのインタラクションを使ってみよう」でも簡単に触れたjQuery Pluginのフ
カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 2010年11月29日- JQUERY BUBBLE POPUP v.2.3.1 - display animated and shadowed "bubble" popups with few lines of code in jQuery カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 カーソルを合わせた際に、単にポップアップするのではなく、ポップアップ自体がフェードインアニメーションしながら動きをもって表示されることでより、利用者の注意をひくことができそうです。 見た目も影付きでカッコいいのが特徴です。 デザインは選べます。 何かにカーソルを合わせた時だけじゃなくて最初から特定のエレメント上に表示しておくこともでき
アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」 2010年11月29日- jQuery.superselect アイコン付きで自由にデザインできるselectボックス実装jQueryプラグイン「jQuery.superselect」。 以下が普通のselect ですが…。 使用後は次のようにファンシーな感じに。 なんかページデザインとselectボックスのデザインに統一感がないというようなケースや、アイコンを付けてわかりやすく選択してもらいたい場合に使えそうですね。 <option>タグのrel属性にアイコンを設定しておいて、$(element).superselect() とやると実現できるみたいです。 関連エントリ デザイン性に優れたクリエイティブなフォームデザインのサンプル集 斬新なコメントフォームデザイン集
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く