Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グローバルナビゲーション」を使ったWebサイト構築に2件ほど携わりました。1件はWordPress、もう1件は手打ちの静的サイトです。改めて思ったのは「固定ナビゲーションには落とし穴がある」ということでした。 そこで、固定ナビゲーション設置に際して、私が個人的に体験した「落とし穴」と、その解決のためにやってみたことを4つほどご紹介したいと思います。 必ずしもこれが正解というわけではありませんが、同じようなことがあったときのお役に立てば幸いです。 …と、その前に。そもそも固定ナビゲーションとは何モノか、下図をご覧ください。 例としてFacebookを挙げてみました。上部に固定された青いバーの部分は、スクロールしても常に上部に固定されて消えません。 このようなナビゲーションは、一般的に下記の

[elm_arata]

[position:fixed]

[kiyokichi]

スマホ対応するときとかページまたぐアンカーリンクのときとか

[neu1975]

“http://blog.teruterubouzu.net/net-mac/1882”

[nilab]

position: fixed;

[mkto118]

後で読む

[susanne]

“margin-top: -50px; /* 固定ナビの高さ分のネガティブマージン */ padding-top: 50px; /* 打ち消し用のパディング */”

[ku_marin]

固定系は結構ハマる

[sima-box]

Fixed固定ナビゲーション　上にメニュー固定

[skunk0915]

画面　回転　スマホ　sp smp

[hidex7777]

スマホのfixed問題、もっとスマートに解決する方法ないものか。

[akio0911]

【Share】Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG

[kamiaki]

“最近はブラウザの印刷機能にPDFで保存する機能がついていたりもして、意外に印刷用cssの重要性が高まっている気がします。”

[rozenkranz]

困ったとこがまとめてあった。

[a277e]

メモ。

[georgek5555]

たまに、これ困る時があるのでまとめは嬉しい。

[nayo74]

前にはまったポイントもまとめられてた。今後のためにもメモ。

[razokulover]

fixedでbottomに固定するのもけっこうはまる

[minonet]

Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと ライター内藤です。花粉、そして1pxと闘っているWebコーダーでもあります。 最近、立て続けに「上部固定グロー [...] The post Fixe...