プログラミング

CSSで固定メニューバー設置する方法[初心者向け]

みなさんこんにちは!ワトスンです。
今回は、、

メニューバーをヘッダーに/フッターに固定したい。でも固定の仕方がわからない。どうやって固定すればいいの?

といった疑問に答えます。

■読んでほしい人
HTML言語を理解している方

今回は下↓の画像のように常にヘッダー上部にメニューバーを表示する”固定メニュー”の作り方をご紹介します!

固定メニューバー

すごく簡単なので、トライしてみて下さい。

ではご紹介していきます。

メニューバーを固定する方法[CSS/HTML]

今回は、メニューバーをヘッダーに固定します。
そのためにはまず、メニューバーそのものを用意する必要があります。
今回はヘッダーに固定するため、<header></header>タグ内にメニューバーを用意していきます。
その後にCSSでメニューバーを固定していきます。

それではまず、<header></header>タグ内にHTMLを記述していきます。

メニューバーの用意[HTML]

<header></header>タグ内に以下のコードを記述していきます。

もちろんメニュー内容は各自変えて下さい。
HTMLは理解できていることを前提で進めていきます。

CSSでメニューバーを固定する

では次に,CSSでメニューバーを固定していきます。

以上のようにCSSを記述していきます。
メニューバーの固定、メニューの横並びと文字サイズや色などを指定しました。

「postion:fixed」で固定できる

今回のポイントは「postion:fixed」です。

これは要素を指定の位置に固定してくれるもので、今回はtop:0;left:0;に固定しました。

要素を指定の位置に固定したい時は「postion:fixed」を使用しましょう!

以上で固定メニューの設置は完成です!

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

コピペするだけでもできるので一度試してみて下さい。

わからないことがあればコメントかTwitterのDMでご連絡下さい。お待ちしてます!

以上です。

コメントを残す

メールアドレスが公開されることはありません。

関連記事