ページのデザイン時に悩むのが、2カラムレイアウトなどでサイドバーにどのくらいのコンテンツを配置するのか、というのがあります。 理想的なのは、メインとなるコンテンツと同じくらいの高さになるのが無駄もなくいいかもしれません。しかし、メインのコンテンツ量が決まったものではなく、しかも長い場合はサイドバーに未使用のスペースが多く生じてしまいます。 [ad#ad-2] この無駄になってしまう空きスペースの解決方法の一つとして、スペースの量に合わせてダイナミックにサイドバーのコンテンツを配置する方法を紹介します。
jQueryを使用して、リスト要素で実装したテキストリンクを指定した範囲内だけでスクロールさせるスクリプトを紹介します。 The MoveUp Menu デモページ [ad#ad-2] テキストリンクのリストはマウスを上下に移動すると、ものすごい勢いでスクロールします。 デモではマウス操作だけでは難しいため、キーボードの矢印キーの操作にも対応しています。 実装 実装はHTML, CSSともに最小限の形で実装されています。 HTML <div id="menu"> <ul> <li><a href="#">Nature</a></li> <li><a href="#">Receivability</a></li> <li><a href="#">Alone time</a></li> /ul> </div> CSS リストの可視範囲（高さ）を指定します。表示されないリストはスクリプトで表示し
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
可変グリッドレイアウトjQueryプラグイン(jquery.vgrid.js) なんだか可変グリッドレイアウトがまた流行ってる（？）ようなので、jQueryプラグイン書いてみた。 一通りブラウザで表示確認ぐらいはしたけど、テストは十分じゃありません。 Demo Demo Index 利用方法はデモのソースを確認してください。(ウィンドウリサイズして動きも確認してね) Download github zip file 利用には、jQuery本体とjquery.easingプラグインが必要です。別途読み込んでください。 更新情報 v0.1.8 (20120421) display属性で、グリッド要素の表示/非表示を切り替えれるように修正しました。 demo009を追加 v0.1.7 (20111110) 複数の可変ボックスを指定すると、開始位置がおかしくなるバグを修正しました。 demo008
複数の電話番号や住所などを入力できる、フォームの項目をユーザーが追加・削除できるようにするjQueryのプラグインを紹介します。 SheepIt! - Form Cloning Jquery Plugin デモページ [ad#ad-2] SheepIt!の特徴 フォームのアイテムを追加したり、削除することができます。 フォームのアイテムの数をコントロールできます。 フォームのコードは通常のHTMLで実装します。 フォームのアイテムにデータをロードすることができます。 コールバック機能を備えています。 SheepIt!の実装 前述のデモのHTMLは、下記のようになります。 HTML フォームの箇所は通常のHTMLです。 <!-- sheepIt Form --> <div id="sheepItForm"> <!-- Form template--> <div id="sheepItForm
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Acquiring OakvilleMaids.com through HugeDomains was a good experience. We’ve operated our business on OakvilleMaids.ca for years, but securing the .com version was important to eliminate any customer confusion and strengthen our brand credibility. HugeDomains made the entire process easy! It was fast, clear, and hassle-free. We highly recommend them to any business looking to upgrade or protect th
つぶやきが流れるバナーを簡単に作成できるjQueryプラグイン Twitterのつぶやきをヘッドラインニュースとして流したり、ブログパーツのように表示したい時、jQueryで簡単にマーキー風（文字が流れる）表示ができるプラグインを作成しました。特定のユーザーのつぶやきを流したい場合以外に、キーワードで検索してヒットしたつぶやきを流すこともできます。（※個人利用・商用利用を問わず自由に改変してご利用いただけますが、ライセンスをご理解いただき、自己責任の上でご使用ください。） 動作サンプル 対応 InternetExplorer6～8、Firefox3～、Chrome2～、Safari3～ jQuery1.3.2、1.4.2で動作確認済み。 設置方法（特定のユーザーのつぶやきを表示する） 「#twiline」は、プラグインを適用したいdivのidに置き換えてください。「search」の箇所（サ
商品の改良等にともない、成分や使用量などが変わる場合があります。ご購入、ご使用の際には、商品に表示されている内容をご確認ください。 ※掲載基準は、変更になる場合がございます。 ※掲載されていない商品についてはお問い合わせフォームよりお問い合わせください。
テキストリンクをはじめ、p, span要素のテキスト、li要素のテキスト、div要素、img要素などさまざまなDOM要素に、アニメーションを伴ったツールチップを表示するjQueryのプラグインを紹介します。 jQuery Bubble Popup v.2.0 デモページ：さまざまなDOM要素への実装例 [ad#ad-2] Bubble Popupの対応ブラウザ Internet Explorer 6.5, 7, 8, 9 (beta) Firefox 3.5.x Safari 5.0.x Opera 10.x Chrome 6.0.x iCab 4.x Webkit based browser (reKonq, Arora) KHTML-based browser (Konqueror) Bubble Popupの主な特徴 あらゆるDOM要素にツールチップ、ポップアップを作成できます。 ツ
div要素で配置したコンテンツ（パネル）を自動で重ねて、本のようにページをめくるアニメーションで次々にコンテンツを表示するスクリプトを紹介します。 Viewbook - jQuery Plugin デモ [ad#ad-2] 次のページをめくるには三通りの方法が用意されています。 「Next」「Previous」で、次・前へ ページのナンバリング ※違和感がありますが キーボードの矢印キー 中でも、キーボードでの操作が楽でいいですね。 Viewbookの実装 各パネル（ページ）はdiv要素のため、画像やテキストなどさまざまな要素が配置できます。 HTML コンテンツはdiv要素の入れ子で構成されています。 idのmybookは自由に変更できます。 <div id="mybook"> <div class="vb-load"> <div>Page 1</div> <div>Page 2</di
Webページに書かれている文章はバリエーションが多く、中には情報産業や医学用語など、専門的な言葉が含まれていることがあります。知っている人が読むのであれば専門用語など気にならないでしょう。しかし、そうでない人の場合には、ちょっとした用語が分からなかったりすると、いちいちWikipediaやGoogleなどを使って調べることになります。 そんな時に、特定の単語に自動的にリンクを貼ってくれるようなプラグインがあれば便利です。たとえばテキスト中に「腸捻転」という単語があれば、「http://ja.wikipedia.org/wiki/腸捻転」にリンクする、といったイメージです。 jQueryプラグイン講座3日目は、特定の単語に対して自動的にリンクを追加するプラグインを作成してみましょう。 リンクする単語とURLは配列に 今回作成するプラグインの名前（メソッド名）は「addlink」としました。こ
リンクをクリックしてページを遷移する際に、フェードやスクロールのアニメーションを加えるスクリプトを紹介します。 デモページ Pageswitchの実装 実装は簡単です。 HTML 既存のHTMLに、特に手を加える必要はありません。 idに使用している「example」は適当なものに変更できます。 <div id="example"> <a href="//coliss.com/">Example #1</a><br /> <a href="http://www.example.com">Example #2</a><br /> </div> [ad#ad-2] JavaScript PageswitchはjQueryのプラグインのため「jquery.js」と当スクリプトを外部ファイルにし、下記のように各リンクにエフェクトを指定することができます。 $(document).ready(fun
jQueryとCSSで、ボタンがゆっくりと切り替わるチュートリアルです。とても簡単にできる上に、実用面での使い勝手も良いかもしれません。 まずは、こちらのデモをご覧ください Demo マウスオーバーでゆっくり画像が切り替わるのがお分かり頂けると思います。jQueryでシンプルに動かしています。 使用するには、以下のサイトからスクリプトやコードをダウンロードしてください。 Link もうそこにやり方が書いてありますが、一応チュートリアルです。 既存のブログなどに使用する場合は、 以下のコードを「head」内に書き込みます。 <link href="style.css" rel="stylesheet" type="text/css" /> CSSに以下の記述を追加 .button2{ background:url("images/download.png") 0 -45px; height:
2010年4月10日 画面サイズにフィットして伸縮する背景画像を、スライドショウするjQueryプラグインの紹介。 フルFlashサイトなどで見かける、画面サイズに合わせて画面いっぱいに画像が表示されるアレ。それにスライドショウ機能が付いたjQueryプラグインを、自分のサイトで使ってみました。 動作サンプル www.daichifive.com 自分のサイトで使ってみました。なんか、いいカンジでしょ？ちなみに、使用している写真は、足成さんでダウンロードしました。 追記 上記で紹介している僕のサイトのソースコードをまるまる流用する人が増えています。分からないからといって、CSSファイルやデザインまで全部パクるのはやめましょう。head内のアクセス解析用コードまでそのまま使う人が多いのもホント焦る。僕のGoogleAnalyticsの結果に知らないタイトルのページがたくさん入ってきてます。
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
2014年8月22日 CSS, jQuery どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。 ↑私が10年以上利用している会計ソフト！ フォームの仕様 今回チャレンジするフォームの主な仕様です！ グラデーション・ボックスシャドウを使って立体感を表現 角丸で丸みをつける（モダンブラウザ） 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari フォーム制作の流れ CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。 テキストボック
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
