上部固定ヘッダーの作り方

はじめに

今回は、HTML5とCSS3を使用し、上部に固定するヘッダーの作り方についてまとめていきます。特に、positionプロパティとbox-sizingプロパティを中心に考えます。

全体のコード一覧

See the Pen 固定ヘッダーの作り方 by Uka Suzuki (@uukasuzuki_) on CodePen.

CSS3のコード解説

header {
    background-color: orange;
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 50px;
    padding: 20px 50px;
}

position: fixed;は「要素を画面上の固定位置に配置するためのCSSプロパティ」を指します。セットでtop、bottom、left、rightなどの値を設定して位置を指定することができます。top: 0;なら、基準位置が画面一番上となります。

box-sizing: border-box;は「要素のwidthとheightに、paddingとborderのサイズを含めるかどうかを指定する」プロパティを指します。widthの内側にpaddingとborderが広がるので、widthが変わらず、ボックス配置などが楽になるメリットがあります。

また、ボックスの外側につく余白であるmarginは関係ありません。

今後の課題

今回学んだことを活かし、JavaScriptと組み合わせた時にスクロール時ズレないよう要素を配置できるようになりたいです。

まとめ

場面によって、paddingとmarginの使い分けできるよう、コードの書き方に気を付けます。