CSS WEB制作

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

art

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

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

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

 

 

解決コード

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の設定を忘れずにしましょう。

 

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



-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5