ぱくぱくブログ HTMLとCSSのコーディング情報をお届け

注目キーワード

CSSを学ぶ。『position:fixed;』を使ってナビゲーションバーを固定する。

CSSを学ぶ。『position:fixed;』を使ってナビゲーションバーを固定する。

以前横並びのナビゲーションバーを作成しました。

そこで今回はこの『ナビゲーションバーを上部で固定する方法』について、初心者向けに解説していきます。

目次

前準備

それでは今回使用する素材を準備しましょう。

今回準備する素材は『画像』『HTMLファイル』『CSSファイル』です。

それぞれ前もって準備しましたので、以下の内容を参考にして下さい。

画像の準備

ブログのトップ画像となる部分です。

ファイル名：pakupaku.png
画像の大きさ：1656 × 630

HTMLファイルの準備

今回は大きく分けて３つのブロックで構成しています。

  • 『div class=”menu”』は以前作成したナビゲーションバーです。
  • 『div class=”head”』はナビゲーションバー直下の画像です。
  • 『div class=”content1~6″』は記事の見出しと本文です。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>ぱくぱくのCSS講座</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>    </head>
<body>

    <div class="menu">
        <div class="nav">
            <ul>
                <li>
                    <a href="#">ホーム</a>
                </li>
                <li>
                    <a href="#">コンテンツ</a>
                </li>
                <li>
                    <a href="#">会社概要</a>
                </li>
                <li>
                    <a href="#">問合せ</a>
                </li>
                   </ul>
        </div>
    </div>

    <div class="head">
        <img src="pakupaku.png" alt="ぱくぱくブログ">
    </div>

    <div class="content1">
        <h2>ぱくぱくの記事①</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

    <div class="content2">
        <h2>ぱくぱくの記事②</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

    <div class="content3">
        <h2>ぱくぱくの記事③</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

    <div class="content4">
        <h2>ぱくぱくの記事④</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

    <div class="content5">
        <h2>ぱくぱくの記事⑤</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

    <div class="content6">
        <h2>ぱくぱくの記事⑥</h2>
        <p>テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　テキスト　</p>
    </div>

</body>
</html>

CSSファイルの準備

以前作成したナビゲーションバーのCSSにimg{＊＊＊}で画像の大きさを調整しています。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

ブラウザ表示の確認

画面を下にスクロールするとナビゲーションバーが消えてしまうので、今回はこのナビゲーションバーを上部に固定する方法を解説していきます。

ナビゲーションバーを固定する（position: fixed;）

ナビゲーションバーの固定（position: fixed;）

まずはナビゲージョンバーを固定していきましょう。

これに使用するCSSプロパティは『position』です。

そしてこのプロパティに『fixed』を指定します。

この『fixed』には『画面のきまった位置に固定する』という意味があります。

今回はナビゲーションバー部分にDiv要素でclass名を『menu』と指定していますので、このclassに対してpositionプロパティを使用します。

では早速、CSSに記述していきましょう。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
}

ブラウザ表示

ナビゲーションバーは固定に成功したのですが、いくつかの違和感がありますね。

  • ブラウザ上部に隙間がある。
  • ナビゲーションバーの幅が短い。
  • 画像とナビゲーションバーが被っている。

それではそれぞれを解決していきましょう。

ブラウザ上部の隙間を無くす（margin／padding）

親要素内の隙間を全て『０』の指定にする

まずは『body要素』内の隙間を全て無くしましょう。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
}

body{
    margin: 0;
    padding: 0;
}

上部の隙間を『０』の指定にする

では次にナビゲーションバーの隙間を『0』の指定にしましょう。

これで隙間はなくなるはずです。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
    margin: 0;
}

body{
    margin: 0;
    padding: 0;
}

ブラウザ表示

あれ？

ブラウザ上部の隙間が、予想と反して空いたままです。

上部の隙間が無くならない時の方法（margin-top）

この様な場合は『margin』を『マイナス』指定しましょう。

今回は上部のみ隙間を無くしたいので『margin-top』を『マイナスと数値』で隙間を調整していきます。

これにより『0』では埋まらなかった隙間を更に埋めていく調整が可能になります。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
    margin-top: -20px;
}

body{
    margin: 0;
    padding: 0;
}

ブラウザ表示

いかがでしょうか。

上部の隙間が完全になくなりました。

ナビゲーションバーの横幅を広げる（width: 100%;）

ナビゲーションバーの横幅が短くて不格好です。

そこで次にこのナビゲーションバーの横幅を画面いっぱいに広げます。

『width（横幅）』に『100%』と指定することで、画面いっぱいに横幅を広げることができます。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
    margin-top: -20px;
    width: 100%;
}

body{
    margin: 0;
    padding: 0;
}

ブラウザ表示

ナビゲーションバーの横幅が画面いっぱいに広がりましたね。

画像とナビゲーションバーの重なりを無くす

それでは最後の調整です。

画像とナビゲーションバーの重なりを無くしましょう。

これは画像の位置をナビゲーションバーの高さ分だけズラす方法をとります。

ナビゲーションバーの高さは50pxで指定されていますので、この50px分だけ画像を下に移動させます。

そこで今回は画像の『margin-top』を『50px』と指定します。

画像は現在、『Div要素』によりclass名を『head』と指定しているので、この部分に記述します。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
    position: fixed;
　margin-top: -20px;
　 width: 100%;
}

body{
    margin: 0;
    padding: 0;
}

.head{
    margin-top: 50px;
}

ブラウザ表示

あれれ？

またナビゲーションバーに隙間ができてしまいました。

これはブロック要素同士の干渉によるものです。

そこで今回は『body要素』内のブロックを一度インライン要素であることを指定してみましょう。

CSS

.nav ul li{
    float: left;
    width: 120px;
    height: 50px;
}

.nav ul{
    list-style-type: none;
}

.nav{
    background-color: orange;
    height: 50px;
}

.nav a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 10%;
}

.nav :hover{
    background: rgb(218, 148, 44);
}

img{
    width: 80%;
    height: 80%;
}

.menu{
　　position: fixed;
　　margin-top: -20px;
　　width: 100%;
}

body{
    display: inline;
    margin: 0;
    padding: 0;
}

.head{
    margin-top: 50px;
}

ブラウザ表示

これで完成です。

今回は位置調整が中心の解説となりました。

ブロック要素の考え方をしっかりと身につけると理解がし易いのかもしれません。

あとは数をこなしてCSSに慣れていきましょう。

前回の記事

CSSを学ぶ。display:flex;を使って横並びと中央寄せ

HTMLを学ぶ。シリーズはこちら

HTMLを学ぶ。シリーズまとめ。

CSSカテゴリの最新記事