スタイルシート(CSS)を使ってレイアウトを組んでみよう～headerとfooterを固定してスクロールする

2022年7月4日

headerとfooterを固定する

headerとfooterを固定するには、positionプロパティにfixedを設定します。
また、headerの位置はtopプロパティを0、footerの位置はbottomプロパティを0とします。
これで、画面をスクロールしても、headerは上部に固定、footerは下部に固定されます。

画面をスクロールする

画面をスクロールするには、bodyタグのheight(高さ)を画面の縦サイズより大きく設定します。
自動的にスクロールバーが表示され、スクロールできるようになります。
この時、headerとfooterは固定され、スクロールされません。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 2-1</title>
    <link rel="stylesheet" href="stylesheet2-1.css" />
  </head>
  <body>
    <header>header</header>
    <aside>aside</aside>
    <article>article
      <div class="container">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
      </div>
    </article>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<aside>aside</aside>

<article>article

</div>

</article>

<footer>footer</footer>

</body>

</html>

body {
    height: 875px;
    margin: 0;
    padding: 0;
}

header {
    background-color: magenta;
    height: 140px;
    width: 90%;
    position: fixed;
    top: 0;
}

aside {
    background-color: yellow;
    height: 875px;
    width: 30%;
    float: left;
    margin: 140px 0 140px 0;
}

article {
    background-color: lime;
    height: 875px;
    width: 60%;
    float: left;
    margin: 140px 0 140px 0;
}

footer {
    background: cyan;
    height: 140px;
    width: 90%;
    clear: both;
    position: fixed;
    bottom: 0;
}

.container {
    background: white;
    height: 90%;
    width: 90%;
    margin: 2% auto;
}

.box1 {
    background: pink;
    height: 50%;
    width: 50%;
    float: left;
}

.box2 {
    background: orange;
    height: 50%;
    width: 50%;
    float: left;
}

.box3 {
    background: tomato;
    height: 50%;
    width: 70%;
    float: left;
}

.box4 {
    background: violet;
    height: 50%;
    width: 30%;
    float: left;
}

body {

height: 875px;

margin: 0;

padding: 0;

}

header {

background-color: magenta;

height: 140px;

width: 90%;

position: fixed;

top: 0;

}

aside {

background-color: yellow;

height: 875px;

width: 30%;

float: left;

margin: 140px 0 140px 0;

}

article {

background-color: lime;

height: 875px;

width: 60%;

float: left;

margin: 140px 0 140px 0;

}

footer {

background: cyan;

height: 140px;

width: 90%;

clear: both;

position: fixed;

bottom: 0;

}

.container {

background: white;

height: 90%;

width: 90%;

margin: 2% auto;

}

.box1 {

background: pink;

height: 50%;

width: 50%;

float: left;

}

.box2 {

background: orange;

height: 50%;

width: 50%;

float: left;

}

.box3 {

background: tomato;

height: 50%;

width: 70%;

float: left;

}

.box4 {

background: violet;

height: 50%;

width: 30%;

float: left;

}