プログラミング

【CSS】ヘッダーを固定したら、メニューが左寄せになってしまった! を解決します 

スポンサーリンク

art

プログラミングを勉強中のみなさん、こんにちは!

今回は、ヘッダーを固定したら、メニューが左寄せになってしまった!
というエラーの解決方法を紹介します。

とっても簡単ですので、是非参考にしてください。

初心者向けのメモ書きとして執筆しておりますので、あしからず。

クリックできる目次

実体験

過去に、ポートフォリオ用にデモサイトを作成していたときです。

「ようし、ヘッダー完成!」
(左端)ロゴ・・・・・・(右端)メニュー1メニュー2メニュー3
こんな感じです。

「あ、そうだ、スクロールしてもヘッダーが見えるように位置を固定しておこう」

得意気にCSSで「position:fixed;」を設定しました。

完璧、と思い、実際にプレビューを見てみると、

「あれ、ヘッダーのロゴとメニューが左寄せになってる!!」
「ロゴが左端、メニューは右端に設定したはずなのに・・・」

(左端)ロゴ メニュー1メニュー2メニュー3

こんなエラーでした。

解決コード

CSSの「position:fixed;」の次に、

「width:100%;」

を追記してください。

positionを固定すると、どうやら幅を認識しなくなるみたいです。

まとめ

いかがでしたでしょうか。

ほとんどの方が、ヘッダーでflexをすると思いますので、
「position:fixed;」と「width:100%;」は、
セットで覚えておくといいかもしれませんね。

ヘッダー関連の記事も紹介しておきます。



スポンサーリンク

-プログラミング
-, , , , , , , , ,

© 2022 サカらいふ Powered by AFFINGER5