[HTML] パンくずリンクについてのまとめと考察
パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。 ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。 パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、 よくあるデザインパターンは次の通りである。 1行テキスト テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。 ページタイトルを > で繋いだもの ページタイトルを > 以外の文字で繋いだもの シンプルなリンクの羅列 区切り文字を入れずに画像やCSSで階層を表現する。 マルチステップ 開始から完了までの行程を表示する。 サブナビゲーションつき 各ページリンクに属するページを
![[HTML] パンくずリンクについてのまとめと考察](https://cdn-ak-scissors.b.st-hatena.com/image/square/d43d21ea93cda04d99f538309d396c15d2b3bb3f/height=288;version=1;width=512/http%3A%2F%2Ftenderfeel.xsrv.jp%2Fwtn%2Fwp-content%2Fuploads%2F2010%2F12%2Fdelicious.png)
これは要チェック！豊かなユーザエクスペリエンスを与えるナビゲーション集
ナビゲーションはウェブサイトにとって重要なエレメントであり、基盤となるものです。素晴らしいナビゲーションは豊かなユーザエクスペリエンスを与えます。 ユーザーは使いにくくない困惑されないナビゲーションを望み、シンプルなナビゲーションはたいていの場合、ダイナミックなものよりユーザフレンドリーなものです。ここではダイナミックでクリエイティブなナビゲーションの素晴らしいインタラクションと若干の欠点をSmashing Magazineから紹介します。
アイコンがふわっと拡大するjQuery – creamu
マウスオーバー時に気持ちのいい効果をつけたい。 そんなときにおすすめなのが、『BubbleUP』。アイコンがふわっと拡大するjQueryです。 アイコンにマウスオーバーすると、ふわっとサイズが大きくなりますね。動きが滑らかで気持ちいいです。 デモは以下から。 jQuery Menu Plugin: BubbleUP 実装方法も詳しく解説されているので、ぜひ見てみてください。 Learning jQuery: Your First jQuery Plugin, “BubbleUP” ブログ遅くなりました。。昨日は書けなかった。すんまへんm(_ _)m 急いで作業しているところでOSが起動しなくなり、ここ数年で一番大変な日を過ごしました。。。 セキュリティーについて深く考えさせられたので、心機一転してがんばります。
45 jQuery Navigation Plugins and Tutorials - noupe
By Paul Andrew As many of us know, the initial 15-20 seconds of a new user's visit to a web site will have a large impact on whether on not they are going to like or dislike the site, prompting them to decide whether they will stay or go. This means it's vital that you follow usability rules with common design practices and layout your site, especially the navigation, in a style that the user can
かっこいいjQueryのスライダー25 – creamu
WebDesignFanで、かっこいいjQueryのスライダーがまとまっています。 いくつかご紹介しますね。似たようなエントリーを書いていますが、あまり見たことのないものがいろいろあります。 jQuery Plugin – Feature List 左にナビゲーションがあって自動で切り替わる Accessible News Slider ナビゲーションがわかりやすいニューススライダー。広げる、たたむ機能もあり Animated JavaScript Accordion V2 シンプルで使いやすいアコーディオンメニュー Easy Slider 1.7 – Numeric Navigation jQuery Slider とてもクールなスライダー。左右にナビゲーションあり SlideItMoo 1.1 – improved image slider 左右のナビゲーションでスライドするタイプ M
キッチン・システムキッチン | TOYO KITCHEN STYLE | トーヨーキッチンスタイル
ABOUT US 「住む」をエンターテインメント キッチンは調理をするだけのものではなく、 生活を豊かにする場所であってほしい。 私たちはキッチンを中心に 住宅すべてのインテリアまでご提案します。
nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer
数年前に「日本語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、１月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。 カテゴリという（階層構造も含む）分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状
![nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜｜withComputer](https://cdn-ak-scissors.b.st-hatena.com/image/square/6bfac3b933cc6d724ac32a64f3bcd1b289ae1176/height=288;version=1;width=512/http%3A%2F%2Fwithcomputer.jp%2Fthemes%2Fwc%2Fimages%2Ffacebook%2Fogp200.png)
chibirashka journal » Blog Archive » 『デザイニング・ウェブナビゲーション』読書会 - Life is short, Eat dessert first!
8日の土曜日、linkerさん主催の『デザイニング・ウェブナビゲーション』読書会（第2回）に参加しました。会場はコンセントのサロン。 『デザイニング・ウェブナビゲーション ー最適なユーザーエクスペリエンスの設計ー』は、Myボス長谷川さんが、浅野紀予さんと共に監訳した本で、3月に行ったIA Summitでは、原著者のJames Kalbach氏にもお会いしているので、とてもなじみ深い本。 読書会は、各参加者が1章ずつ担当し、内容をまとめて、参加者全員でそれを共有し理解を深めるというもの。全部を自分で読むと大変だから、分担して読むことで負担を減らしつつ、学ぶべきエッセンスは学べちゃう、みたいな良さがある。特に翻訳されていない原著の場合は。 ただし、日本語版の場合は、自分で読んでも、べらぼうに時間がかかるってものでもないので、負担が減るということよりも、読んでいて疑問に思うこととか、他の人はどう
MECE（ミーシー）の落とし穴 - Feel Like A Fallinstar
『モレなくダブリなし』の考え方として、今では学生ですら知っているMECE（ミーシー）。 当然ですが、コンサルティングをする人の間では定番の思考方法のひとつです。 でも、「MECE＝良い」あるいは「MECEじゃない＝不完全・微妙」と考えるのはかなり危険だなって思うこともしきり。 というわけで、MECE（ミーシー）の落とし穴について自戒を込めて。 MECEの良さ MECEのよさは、なんといってもチェックもれを起こさないことです。 Wikipediaの例を借りると、 製品故障をなくして生産性を上げるために、発生箇所・原因箇所を「空間」的に漏れなく挙げる 工程を 原材料 - 製造 - 加工 - 輸送 - 販売 - 使用 - 廃棄 というように「時間」的に漏れなく挙げる といったところでしょうか。 たとえばソフトウェア開発のバグつぶしなんかではMECEはとっても重要です。 ウェブサイトのサイトマップ
Bridge Word
This shop will be powered by Are you the store owner? Log in here
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集:phpspot開発日誌
25 jQuery Plugins for Navigation ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集。 階層メニュー、タブ、ツリーやページャにいたるまで、ナビゲーション部分に使えるjQueryプラグイン集25種がまとまっていました。 jQuery (mb)Menu クールなアイコン付階層メニュー BDC Drilldown Menu (iPod Style) iPod風ドリルダウンメニュー jBreadCrumb 動くパンくずリスト Treeview そのまんまツリービュー jQuery Full Width Navigation Widthを指定のサイズにあわせる jQuery Nested Tabs タブ内タブというネストが可能なプラグイン FastFind Menu クールなメニュー実装 jQuery Pagination Pagerを実装 全部見る 最近
[JS]ナビゲーションの背景画像をアニメーションさせるスクリプト
Snook.caのエントリーから、「ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2」のように、ナビゲーションの背景画像にさまざまなアニメーション効果つけるスクリプトを紹介します。 Using jQuery for Background Image Animations デモ デモでは、上下のアニメーション、左右のアニメーション、フェードのアニメーションがあります。 スクリプトにはjQueryがメインに使用されており、それぞれのアニメーションは下記のように記述されています。 「#a」は上下、「#b」は左右、「#c, #d」はフェード。 <textarea name="code" class="js" cols="60" rows="5"> $(function(){ $('#a a') .css( {backgroundPosition: "-20px 35
jQueryやCSSを使ったナビゲーションメニュー300選 – creamu
かっこいいナビゲーションメニューをさくっと実装したい。 そんなあなたにおすすめなのが、『300+ Jquery, CSS, MooTools and JS navigation menus』。jQueryやCSSを使ったナビゲーションメニュー300選だ。 以下にいくつかご紹介。 » Fancy menu かっこいいナビゲーションメニュー » Amazing apple style navigation menu Appleのサイトのようなナビゲーションメニューの作り方。↑のキャプチャはこちら » jQuery idTabs 8つのクールなjQueryメニュー » navigation-3 プルダウンメニューなど4つの例 » block-navigation CSSデザインのメニュー9選 その他のリストは以下から。 » 300+ Jquery, CSS, MooTools and JS na
オムロン
2024/06/20 ニュースリリース つくばエクスプレス線一部でクレジットカードやデビットカード等のタッチ決済 およびＱＲ乗車券による乗車サービスの実証実験を2025年内に開始 ～新たな乗車券サービスにより、お客様の利便性向上～ 2024/06/17 ニュースリリース 太陽光発電用パワーコンディショナの定額貸出サービス「POWER CONTINUE」へのラインナップ追加について 2024/06/14 ニュースリリース 関係会社役員人事異動のお知らせ 2024/06/05 ニュースリリース オムロン、「DCエクセレントカンパニー 制度運営部門」を初受賞 ～DC制度の社内浸透ガバナンスが高評価～ 2024/06/04 ニュースリリース 【開示事項の経過】構造改革プログラム「NEXT 2025」：人員数・能力の最適化に関するお知らせ ＜PDF 483.6KB＞ 2024/06/04 ニュースリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IA Wiki
マウスオーバーをデザインする | DesignWalker
ナビゲーション・メニューまとめ - DesignWalker