[B! navigation] sabroのブックマーク

もうユーザーを迷わせない！ナビゲーションメニュー設置のコツ

2013年11月22日 Webサイト制作, ユーザビリティどのWebサイトにも必ずあるのがナビゲーションメニュー。各コンテンツページへリンクされている「Webサイトの目次」です。この目次をきちんと設置していないと、ユーザーは欲しい情報が見つけられず、離脱率が高くなります。そのサイトでしか手に入らない、本当に必要な情報でない限り、こちらから案内しないとユーザーはコンテンツを探そうとしません。そんなナビゲーションメニューについて考えてみましょう。 ↑私が10年以上利用している会計ソフト！ナビゲーションメニューの設置ポイントすべてのページに基本中の基本ですが、メインのナビゲーションメニューはどのページにも同じ場所に設置しましょう。ホームページでしか表示されない…なんてことがないように。というのも、ユーザーが最初にたどり着くのが必ずしもホームページとは限らないからです。検索で特定のコンテン

sabro 2011/10/19

リンク

[CSS]ナビゲーションを実装するスタイルシートのテクニックのまとめ | コリス

CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。

sabro 2011/07/20

リンク

[CSS]パンくずの実装はどのようにするのがよいかの考察

パンくずは何要素で実装していますか？　ul要素？　ol要素？　p要素？パンくずをどのように実装するのがよいかの考察を紹介します。 Exploring Markup for Breadcrumbs [ad#ad-2] 先日紹介したCSS-Tricksの「画像を使用しないでApple風のパンくずを作成するチュートリアル」に寄せられたコメントから考察されたもので、各ポイントを意訳したものです。パンくずのマークアップの考察のきっかけ -ul要素で同列配置パンくずのマークアップの考察 -ul要素で親子パンくずのマークアップの考察 -ol要素で順序づけパンくずのマークアップの考察 -セパレーターの使用パンくずのマークアップの考察 -Googleを参考にパンくずのマークアップの考察 -HTML5の使用パンくずのマークアップの考察 -おわりにパンくずのマークアップの考察のきっかけ -ul

sabro 2010/11/11

リンク

[CSS]シンプルでクールなデザインのパンくずを実装するスタイルシート

グラデーションを使用したアローでデザインされた、シンプルでクールなパンくずのスタイルシートをVeerle's blogから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="crumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main section</a></li> <li><a href="#">Sub section</a></li> <li><a href="#">Sub sub section</a></li> <li>The page you are on right now</li> </ul> </textarea>