2 flat logo on transparent 256
2018-11-26

CSSだけでOK!ヘッダーとサイドバーを固定する|サンプルコード付き

3120321

ヘッダーやサイドバーを固定する際はJavascriptやjQueryを利用する事が多いですが、今回はposition: stickyを利用してCSSのみで固定します。

実際に当サイトのPC版では本記事をスクロールすると 右側で固定される広告部分は、このposition: stickyを利用して固定化しています。

position: stickyの概要

position: stickは非常にシンプルで、固定したい要素へ CSSでposition: stickyを設定し、後は固定したい要素にtopやleft rightを指定すれば、指定位置で固定されます。

jQueryやposition:relativeよりかなり簡単に設定可能です。

ただ、IEとEdgeは最新バージョンしか対応していないので 商用の場合はクロームやFirefox、Safari、iOSSafariなどがメインで利用されているサイトで利用する事をオススメします。

対応ブラウザとバージョンの状況

position: stickyを利用したサンプルコード

以下コードをメモ帳などに貼り付けて稼働確認してください。 CSSもhtml要素にそのまま記載しています。

<!DOCTYPE html>
<html>
<head>
    <title>CSSでヘッダーとサイドバーを固定する| 独学者・初心者向けプログラミング・SEO入門サイト</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
        .container {
            padding: 1%;
        }

        .header-wrapper {
            width: 100%;
            justify-content: flex-start;
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 1;
        }

        .header-box-wrapper {
            height: 100px;
            display: flex;
            align-items: center;
            background: #000000;
            margin: 0 auto;
        }

        a {
            color: white;
        }

        .header-content {
            text-align: center;
            color: white;
            margin: 15px;
        }

        .content-wrapper {
            display: flex;
            padding: 5px 0;
        }

        .main-content {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 2000px;
            margin-right: 10px;
            background: #ccc;
        }

        .side-bar-content {
            display: flex;
            position: -webkit-sticky;
            position: sticky;
            top: 125px;
            width: 185px;
            height: 150px;
            border: 1px solid;
        }

        .footer {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            color: white;
            background: #000000;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header-wrapper">
        <div class="header-box-wrapper">
            <div class="header-content">
                <a href="https://programming-beginner-zeroichi.jp/" target="_blank">ゼロイチサイトへ戻る</a>
            </div>
            <div class="header-content">
                <a href="https://programming-beginner-zeroichi.jp/articles/171" target="_blank">記事へ戻る</a>
            </div>
            <div class="header-content">
                <a href="https://programming-beginner-zeroichi.jp/css/articles" target="_blank">CSSの記事を見る</a>
            </div>
        </div>
    </div>

    <div class="content-wrapper">
        <div class="main-content">メインコンテンツです</div>
        <div class="side-bar-content ">サイドバーコンテンツ</div>
    </div>

    <div class="footer">フッターです</div>
</div>
</body>
</html>

サンプルコードの簡単な解説

サイドバーとヘッダーを固定しているCSSの説明

ヘッダーのheader-wrapperとside-bar-contentのCSSへ以下を設定しています。

position: -webkit-sticky;
position: sticky;

position: stickyは指定要素まで来ると、指定位置で要素を固定するような動作となります。

ヘッダーは初回から固定の為top 0

サイドバーはtop125pxで固定するように設定しています。

ヘッダーの要素を横並びにする

header-box-wrapperのクラスでdisplay: flex;を設定し小要素の header-contentを利用して、ヘッダーのメニューを横並びにしています。

さらにheader-box-wrapperのalign-items: center;でflexの小要素の上下で中央に配置するように設定しています。

詳細は htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き を御覧ください

その他関連記事

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

Bootstrapでコンテンツを強調する|コピペで動くサンプル付き

前の記事
次の記事