【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
日刊スレッドガイド : Google先生の検索窓が異様にデカくなった件
1 ： セイヨウタンポポ(愛知県) ：2009/09/10(木) 18:56:24.31 ID:I0sTAL1e● ?BRZ(10000) ソース http://www.google.co.jp/ Now S-U-P-E-R-sized! 9/09/2009 02:59:00 PM Search, that is. For us, search has always been our focus. And, starting today, you'll notice on our homepage and on our search results pages, our search box is growing in size. Although this is a very simple idea and aneven simpler change, we're excited ab
ちょっとした「大きな」変更
本日、検索の入り口であるGoogle ホームページに新たな改良を加えました。一見、ホームページに訪れた時には改良点に気づかないかもしれませんが、実際にウェブ検索を使ってもらえれば一目瞭然かと思います。 そう。ホームページの検索ボックスおよび入力キーワードの文字サイズを大きくしました。また、検索結果ページの検索ボックスおよび検索キーワードも大きくなっています。 この改良の背景には、ある一部のユーザーを対象に検索エンジンの使い勝手を試してもらう調査を行った際、比較的多かったフィードバックに「入力画面の文字が小さい」というコメントがあったことや、ユーザーにより検索に慣れ親しんで頂きたいという我々の思いがあります。この改良により、Google サジェストによって表示されるその他の検索キーワードなども見やすくなり、より選びやすくなっているのではないかと思います。ちょっとした改良ですが、ユーザーの皆様
フォームに入力を促すヒントを表示するJavaScript「jQuery Advisor plugin」
twitter facebook hatena google pocket フォームの申し込み率を上げるためには、入力内容をわかりやすくすることが必要です。 jQuery Advisor pluginを利用することで、JavaScriptを利用して、ヒントを明示できコンバージョンの向上が期待できるかもしれません。 sponsors 使用方法 jQuery Advisor pluginからjquery-advisor.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery-advisor.js"></script> <script> $(document).ready(fun
jQueryでフォームの入力内容を自動チェックするJavaScript「vanadium」
フォームの入力内容を送信前にチェックすると有益な情報を得る可能性が高くなります。 またコンバージョン、ユーザビリティの向上にも役立つことができるでしょう。 今回はjQueryプラグイン「vanadium」を利用します。 sponsors 使用方法 vanadiumからvanadium.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="vanadium.js"></script> あとは内容に応じてclassを振っていけば完成です。 なお、スタイルは以下となります。 正しい場合：.vanadium-valid 間違っていた場合：.vanadium-invalid 細かい指定は以下のサ
一般ユーザーとWeb業界人の温度差 : LINE Corporation ディレクターブログ
こんにちは、検索担当ディレクター須田です。 今回は私が制作を担当する時に一番気をつけてる事を書きたいと思います。 日進月歩で成長するWeb業界、日々新しい技術が生まれ、進化していく中でlivedoorはどちらかというと、そういった技術をよく取り入れていると思います。新しいWeb用語や機能が生まれる一方で、Webの成長に取り残されるユーザーの存在にお気づきでしょうか。 この業界で働いている人の中では常識な言葉でも実は一般のユーザーには理解できない言葉。作成した中の人やIT業界においてはすごく便利な機能でも一般ユーザーには理解できず、使いこなせていない機能というものが多く存在します。 そこで実際に一般のブロガーさんに用語についてその意味が答えられるかを聞いてみました。 ※選択した用語はyoutubeに良く出てくる用語とlivedoorでも良く使われている用語をピックアップしています。 何のこと
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
文字サイズ変更ボタンを考える - Kangaroonote
日本人はだいたい必要のないものを、あった方が良いという消極的な理由で、溜め込んだり、付け足したりするのが好きだ。 コンピュータにしても、日本メーカーのものを買うと、バージョンの古いアプリケーションがたくさんついてくる。そしてそれは往々にして、生涯使われることはない。 必要なものは、必要な時に、必要なだけ、必要とするひとだけが必要なものでしかない。 お得感をだそうとしているのかもしれないけれど、ぼくには貧乏性なだけのようにしかみえない。 先日も知人のコンピュータを買うのに付き合い、セットアップする際にハードディスクを圧迫する無用なものを全て削除するのに、ひどく時間をくった。 それはそれとして、最近、なぜかホームページで流行りの文字サイズ変更ボタン。 なぜ付けているのだろうか? もちろんあったほうがいいからに相違ない。確かに、あったほうが良い。ならいっそ、ビデオの予約と日焼け対策もしてくれると
手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル
なかなか素敵なまとめ記事がありました。 大規模なサイトに最適なリンク案内として、ドロップダウンメニューの導入が使われる事がありますが、今回のエントリーは、こうしたメニューの導入を簡単にしてくれるものとなるでしょう。 CSS、jQuery、MooTools、JavaScript WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger 14ある中で今回触った感触としてお勧めが5つ。 現れ方がカッコいいドロップダウンメニュー ClarkLab ? Animated Drop Down Menu with jQue
画像にオーバーレイのキャプションをつけられるjQuery – creamu
Quenessで、jQueryを使って画像にオーバーレイのキャプションをつけるサムネイルギャラリーの作り方が紹介されています。 ソースは以下のようになっていて、とてもシンプルですね。 <div class="photo"> <div class="heading"><span>Pier</span></div> <img src="images/pier1.jpg" width="300" height="186" alt="" /> <div class="caption"><span>Lorem de scua shemf huan rougt ecrit vato de souju kanasa.</span></div> </div> 画像にマウスオーバーすると、トランジションでキャプションが表示されます。 ぜひ見てみてください♪ » Create a Thumbnail Gall
使いやすさ日記: 107. 日本特有のWebデザイン・ガイドラインの提案
2001年7月17日 古田です。 日々ネット・サーフィン（死語）してて、微妙なフラストレーションを感じる点をレポートします。Webデザイナの方は是非ご一考いただければと思います。 よくECサイトなんかで名前とフリガナを入れるフォームがありますよね？例えばこんな風に。 よろしかったら記入してみてください。で、なんか買い物なり申し込みなりするとするじゃないですか。 で、少し時間をおいてメールでも書こうかなと思ったと気がします。この日記のように冒頭に自分の名前を名乗るクセがあると思ってください。さぁ、打って見てください。 自分の名前の読みを入れてタイプするとカタカナになりませんか？だって先のフォームで最後に自分の名前をカタカナ変換したのをIME（かな漢字変換プログラム）が学習してるはずですから。 察しの良い読者の方ならおわかりでしょう。そうです。 読み仮名フィールドは名前フィールドの前にして！
[検索]ボタンが無い検索窓 | Accessible & Usable
公開日 : 2009年8月2日 (2011年1月11日 更新) カテゴリー : ユーザーインターフェース (UI) ユーザーインターフェース（UI）設計のコンサルティング会社、ソシオメディアさんのサイトを見て気づいたのですが、サイト内検索窓があるものの、なんとそこに[検索]ボタンがありません。サイト内検索の機能を持つサイトは珍しくないですが、このように[検索]ボタンが無いものは、とても珍しいのではないでしょうか。 ソシオメディアさんは、UI設計におけるパイオニア的な存在で、私自身も時々、セミナーに参加して勉強させていただくこともあるのですが、パイオニアとして常に「斬新で」「シンプルで」「使える」UIを模索し続けた結果（または、ある仮説に基づく先進的なトライアル）なのでしょう。それにしても、[検索]ボタンを省いてしまうとは大胆だな...という第一印象を持ちました。 でもよくよく考えると、[検
![[検索]ボタンが無い検索窓 | Accessible & Usable](https://cdn-ak-scissors.b.st-hatena.com/image/square/209e8f1f1619be5b12870edbfb1df535dc04530d/height=288;version=1;width=512/https%3A%2F%2Faccessible-usable.net%2Fimages%2Faccessible-usable_ogp.png)
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌
GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ＆ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の１行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ
JavaScriptを使ったAutoCompleteの仕組み色々:phpspot開発日誌
20 Ready to Use Auto Completion Scripts ?|?Dzine Blog JavaScriptを使ったAutoCompleteの仕組み色々がまとまっていたので一部ご紹介。 当サイトでも過去に紹介したものが含まれていますが、こうしたライブラリは実際に使ってみると自分の理想に違ったものになっていたりするのですが、これだけ種類があれば、自分の理想に近いものが見つかりそうです。 Autocomplete AJAX Select Drowdown with ID jQuery Tag Suggest Google Suggest Style Filter with the AutoComplete Control 全部見る JavaScriptist ではベタに、prototype.js+script.aculo.us を使っています。 2006年にサイトを作っても
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/08/user-interface.html
Browse screenshots
サイトID（ページ左上の会社ロゴ）のリンク先はどうあるべき？ (ユーザビリティ実践メモ)
http://e0166nt.com/blog-entry-694.html
IDEA * IDEA
