よく使うリスト要素のメニュー・ナビゲーションをデザインするスタイルシートのアイデア・実装方法のまとめ
リスト要素を使ったシンプルなHTMLで実装されたメニューやナビゲーションをどのようにデザイン、スタイルするかのコンテストがCodePenで開かれているので紹介します。 次のプロジェクトで使用できそうなアイデアから、こんなの初めて見る！ ここから更に広げていけそう！ といった面白いアイデアまで、さまざまなメニューの実装が楽しめます。 CodePenChallenge: Menus CodePenChallengeの今回のお題は、メニューです。 実装のポイントになるのは、 ネストされたアイテムを常に表示させておくのか、サブメニューとしてインタラクションを使用するか。 スマホのような小型スクリーンとワイドスクリーンにどのように対応させるか。 リスト要素で実装されたメニューにさまざまなデザイン、アニメーションやインタラクションを与えます。ベースになるHTMLは、下記のようになります。
効果的なナビゲーションを設計する5つの大切なポイント
How To Design Effective Navigation Menus [ad#ad-2] 下記は各ポイントを意訳したものです。 Positon -ポジション Simplicity -シンプル Wording -ワーディング Color -カラー Icons -アイコン [ad#ad-2] Positon -ポジション ナビゲーションをページのどこに配置するかは、非常に重要です。 ユーザーがページを見る際にある特定のパターンがあります。ユーザビリティの大家ニールセンによるFパターンが有名です（F-Shaped Pattern）。これは、ユーザーがページを走査する際、上部と左部に（Fの文字のように）フォーカスを合わせるというものです。 こういったパターンを理解し、それがどのように機能するかを学び、何を期待するべきかのアイデアを得るために使います。数多くのサイトを見て、ユーザーに配慮
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
