プログラミング

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でご連絡下さい。お待ちしてます!

以上です。

ワトスン へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

2 件の投稿

  • 初めまして
    既存のホームページでヘッダーの下にあるメニューバーをスクロールした場合上部に固定をしたく初めてCSSを使ってみます。
    記載のコードをコピペしたのですがうまく稼働しません。その固定したいメニューバーが以下のコードのCSSです。この場合の記述がわかりません。ご教授いただけると幸いです。

    ホーム
    プログラム
    佐渡サテライト
    燕出張相談
    見附出張相談
    適性・適職診断
    WORKFIT
    職場体験プログラム
    『利用者の声』
    スタッフ紹介
    お問い合わせ/相談予約
    Web相談
    マップ

    • コメント頂きありがとうございます!
      スクロールした際にメニューバーがついてくるようにするにはcssだけでなくjavascript(jquery)も必要になってきます。
      javascript(jquery)で100pxスクロールしたら指定の要素に新しくclassを追加する必要があります。
      例:100pxスクロールする→<div class=”header_menu”></div>要素に新しくaddというクラスをつける→<div class=”header_menu add”></div>
      <style>
      .header_menu{
      position:relative;
      }
      .header_menu.add{
      position:fixed;//addクラスがついた時だけ固定する
      }
      </style>

      100pxスクロールしたら指定の要素に新しくclassを追加するにはjavascript(jquery)を使用する必要があるので、そちらについてもまた記事にしていこうと思いますが、まずは「jquery スクロール クラス付与」などで検索して頂けたらなと思います!

関連記事