rui-log.com
cssだけでメニューバーを固定表示させる方法

【コピペで簡単】cssだけでメニューバーを固定させる方法

画面の上部に固定させるメニューバーや、ECサイトだったら右端に小さくクーポンバナーを固定させていたりするサイト、ありますよね。

そういった画面に固定させる方法をコピペで簡単に実装できる形で紹介します。

cssだけでメニューバーを固定表示させる方法

コピペで簡単!cssだけでメニューバーを固定させる方法

メニューバーと書いていますが、その他何にでも適用できるような形で紹介します。

まずはhtml

 <header class="fix-01">LOGO</header>

今回はLOGOというテキストを、画面上部に固定させます。htmlはこれだけ。
実際には固定させたい内容をdivの中に入れてあげてください。

cssはこちら。

.fix-01{
background:#fff; /背景を白色に/
box-shadow:0 2px 8px rgba(30,30,80,.3); /影。不要なら削除/
left:0;
line-height:1;
position:fixed;
top:0;
width:100%;
z-index:100;
text-align:center;
padding:1rem;
}

表示したときにわかりやすくするため、影を入れたりの調整をしています。

実際に固定表示させているのは「position:fixed;」で、「top:0;」にて画面上部に固定させています。

センタリングが必要なければ「text-align:center;」は消してください。余白が必要なければ「padding:1rem;」を消してください。

これにてヘッダーへの固定ができます。

cssだけでメニューバーを固定表示させる
ヘッダーと、右側に固定バーを用意しました

次に簡単な応用となりますが、画面右への固定も紹介しておきます。

上記画像内iPhoneXの右側に表示されている「右fix」という部分。それも固定させています。

 

まずはhtml。

<div class="fix-02">右<br>fix</div>

fix-01とほとんど一緒です。先程のcssのclass名をfix-01としたので、今回はfix-02としました。

 

cssはこちら。

 .fix-02{
background:#fff; /背景を白色に/
box-shadow:0 2px 8px rgba(30,30,80,.3); /影。不要なら削除/
right:0;
line-height:1;
position:fixed;
top:50%;
z-index:100;
padding:1rem;
}

変わったところといえば、

  • top:0; → right:0;」で一番上に固定ではなく、右端に固定とさせたこと
  • top:50%;」で上から50%の位置に配置させたこと。「width:100%;」の指定を消したこと

ですね。

top/right/left/bottom」 の配置指定で、上に固定、右に固定、下に固定等と変化させることができます。

まとめ

ブログでも、サイト・ECサイトでもかなり重宝される「position:fixed;」をコピペで簡単に利用できるように紹介しました。

ルイログでは「bottom」にてフッターにメニューを固定しています。

かなり便利で、簡単に実装できるテクニックなので是非利用してみてください!

 

良きWEBデザインをっ!

 

関連記事