ヘッダー (ナビゲーションバー) の固定表示 | Accessible & Usable
公開日 : 2015年2月20日 カテゴリー : アクセシビリティ / ユーザビリティ ウェブページ上部にヘッダー (ナビゲーションバー) が固定表示されたサイトを最近よく目にします。特に、縦長な「ペライチ」のランディングページに多い印象です。 ヘッダー (ナビゲーションバー) が固定表示されたウェブページのイメージ。スクロールしても、ヘッダー (上部の黒い部分) は常にページのいちばん上に貼り付いた形で存在する。 サイト ID (サイトのロゴマーク) を押してホームに戻ったり、ナビゲーションメニューを押してサイト内を回遊したり、といったことが、いつでもやりやすいので、その意味では便利と言えます。ユーザーのサイト利用コンテキストやゴールを考えると、ナビゲーションメニューを常時露出させる必要性については疑問を感じることもありますが、サイトとして重要な Call To Action (たとえば
Re: ヘッダー (ナビゲーションバー) の固定表示
2015年2月21日 著 ヘッダー (ナビゲーションバー) の固定表示という記事を読みました。 PC や比較的画面サイズの大きなタブレットであれば、メインコンテンツの見通しが悪くなる程度で済むかもしれませんが、スマートフォンや小型のタブレットでは、この問題は「致命的」 (コンテンツが実質的に利用できない状態) になり得ます。メインコンテンツ領域を拡大表示したいと思ってピンチ＆ズームをすると、画面の大半がヘッダー領域によって覆い隠されてしまうことがあるのです。 これは非常に思い当たる節があるといいますか、自分もかつて某プロジェクトでヘッダー部分に position:fixed; なスタイルを適用していました。そして上記で指摘されている、画面の大半がヘッダー領域によって覆い隠されてしまうことがあるほかにも、iOS の Safari だとかで非常に問題になったのが、拡大された状態のヘッダーで見切
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ 表題のとおりですが、少しわかりにくいので詳しく説明します。 このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。 ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh
Hondatoto Togel - Agen Judi Toto Terpercaya Mode Togel 2D Seratus Ribu
Hondatoto Togel - Agen Judi Toto Terpercaya Mode Togel 2D Seratus Ribu Kecerdasan dalam memprediksi dapat dikonversikan menjadi penghasilan tambahan, terutama apabila yang ditebak adalah angka-angka. Di dalam pelaksanaannya, kreatifitas tersebut juga mesti dibarengi dengan kepandaian dalam mengatur budget permainan. Permainan yang kami maksud adalah togel yang kini banyak diselenggarakan oleh situ
[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック | コリス
去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。 まずは、スタイルシートのみ版から。 Fixed image backgrounds スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。 背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。 Fixed image backgroundsをスクロール 実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。 Demo 1のHTML HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。 <header> <a hr
ウェブページに固定表示させるエレメントの効果的な使い方
「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 Fixed position web elements [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダでしょう。 エレメントを固定表示することで最も大切なことは、それがユーザーにとって重要なものである、ということです。エレメントの重要性は変化することもありますが、基本的なゴールはページのいずれかの部分を永久にビューポートに表示することです。 もし、このテクニックを使うときは、慎重に検討することを勧めます。このエレメントは自動
iPhone で 「position:fixed」をスムーズに実現する 「Scrollability」
しかし、残念ながらiOS4.Xは position:fixed; は指定できません。そこで紹介したいのが「Scrollability」です。「Scrollability」は JavaScript で要素が画面最下部へ固定できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
