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

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

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

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

解決コード

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

「width:100%;」ともしくは任意の幅を設定してください。

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

widthの設定をした場合

詳しくみてみましょう。

下のコード、haderにwidth100％を設定しています。

※わかりやすいように、HTMLとCSSは非表示にしてください。（HTMLボタン、CSSボタンの表示されている方のボタンをクリックすると非表示にできます）

See the Pen
header-none-width by t.h (@tomtom15)
on CodePen.

widthの設定をしていない場合

そして、こちらのコード。

width:100%を削除しました。

メニューが左に寄ってしまいました。

※わかりやすいように、HTMLとCSSは非表示にしてください。（HTMLボタン、CSSボタンの表示されている方のボタンをクリックすると非表示にできます）

See the Pen
header-width-set by t.h (@tomtom15)
on CodePen.

まとめ

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

「position:fixed;」を設定するときはwidthの設定を忘れずにしましょう。

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