[JS]余分なHTMLは加えずに、セマンティックに実装するスマートフォン用のナビゲーション
デスクトップ時はアイテムが水平に並び、スマートフォン時は省スペースのドロップダウン型に変わるナビゲーションを実装するチュートリアルを紹介します。 デモページ：幅480pxで表示 実装 HTML HTMLは非常にシンプルで、リスト要素を使いnav要素で内包するだけです。 <nav id="nav-wrap"> <ul id="nav"> <li><a href="#">Button</a></li> <li><a href="#">Button</a></li> </ul> </nav> JavaScript スクリプトではスマートフォン用にdiv要素で「Menu」を加え、それがクリックされるとアニメーションでスライドします。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7
[JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs
デモページ jQuery.fracsの実装 分けるエレメントの定義 エレメントはjQueryのセレクタを利用して定義できます。 var fracs = $( selector ).fracs(); 全体マップ 全体マップは空のcanvas要素を使用します。 <canvas id="outline" width="200" height="400"></canvas> 全体マップはJavaScriptで設定します。 $( "#outline" ).fracs( "outline", { crop: true, styles: [ { selector: 'header,footer,section,article', fillStyle: 'rgb(230,230,230)' }, { selector: 'h1', fillStyle: 'rgb(240,140,060)' } ] } )
「次（Next）」と「前（Previous）」というナビゲーションには何かスッキリしないものがある - モジログ
ウェブサイトで連続的な複数のページがある場合、そのナビゲーションには 「次（Next）」 と 「前（Previous）」 が使われることが多いが、これにはいつも、何かスッキリしないものを感じている。 ブログに代表されるように、たいていの場合は「日時の降順」、つまり「新しい順」に並んでいることが多い。それを考えれば、 「次（Next）」 ＝ もっと古いもの（過去） 「前（Previous）」 ＝ もっと新しいもの（未来） となるのは明らかではある。 しかし、ウェブやブログを前提としない、普通の「時間感覚」でいえば、前方に未来があり、後方に過去があるので（注）、 「次（Next）」 ＝ 未来（もっと新しいもの） 「前（Previous）」 ＝ 過去（もっと古いもの） という連想も働かないわけではない。 つまり、まったく反対の意味が、オーバーラップして重なってしまうわけだ。 ここでは、意味やラベ
飛び出しに「注意を」、音声で安全運転支援…実験ルポ（読売新聞） - Yahoo!ニュース
交差点に設置した光ビーコンを活用して、衝突事故などが起きる前にドライバーに音声で警告する「安全運転支援システム」（ＤＳＳＳ）の走行実験が、今月２８日まで東京・お台場で一般公開されている。 なぜ事故の危険を察知できるのか−−。“未来の車”に同乗して、その秘密を探った。 東京・お台場のゆりかもめ「テレコムセンター駅」近くの片側１車線の道路。信号機のない丁字路交差点に、車がさしかかると、突然、車内に警告音が鳴り、「左からの自転車に注意してください」という音声が流れた。カーナビの画面には瞬時に自転車のイラストが浮かび上がる。スピードを落として交差点の前で一時停止した直後、目の前の横断歩道を左から右へと自転車が通過していった。 すぐ近くの見通しの悪い交差点でも再び、「脇道からの飛び出し車両に注意してください」という音声が流れる。お台場のコースを約３０分かけて１周するうちに警告が鳴ったのは７回。
ink 要素をナビゲーションに利用することの注意点（改訂）：我的春秋
［2007-02-08 18:00: 内容を増訂しました。］ パンくずリストがベストとは限らない（WWW WATCH）で、link 要素を使ってページ間を関連づけるという方法が解説されています。本文でも指摘されているように、ブラウザの実装上の問題で、現実的にはナビゲーションとしては使えませんけど、セマンティックウェブという観点で見れば、むしろパンくずリストなどよりも、よほど重要な要素には違いないので、僕も興味深く拝見させていただきました。（「参考までに」で済ませてしまうのは、ちょっともったいないくらい。） 実装面について 機能として標準実装されている Opera に加え、Firefox 向けの可視化 Tips が FirefoxでOperaのようなlink要素を表示させる「Mozeraナビ=叢ナビ」 (インターネット帳面)と、link 要素を可視化してみる（double-team.org）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google のすべてのプロダクトとサービスを見る - Google
