スタイルシート(CSS)を使ってレイアウトを組んでみよう～header、aside、article、footerの使い方

header、article、footerを使って、画面を三分割する

まず、headerタグ、articleタグ、footerタグを使って、画面を三分割してみましょう。
特に問題なく、三分割できると思います。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 1-1</title>
    <link rel="stylesheet" href="stylesheet1-1.css" />
  </head>
  <body>
    <header>header</header>
    <article>article</article>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<article>article</article>

<footer>footer</footer>

</body>

</html>

body {
    height: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

article {
    background-color: lime;
    height: 60%;
    width: 90%;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
}

body {

height: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

article {

background-color: lime;

height: 60%;

width: 90%;

}

footer {

background: cyan;

height: 20%;

width: 90%;

}

header、aside、article、footerを使って、画面を四分割する

次に、asideタグを追加して、画面を四分割してみます。

asideとarticleを横並びにするために、スタイルシートのasideタグとartcleタグにfloatプロパティを使用します。
そして、footerタグにclearプロパティを使ってfloatを解除します。
floatプロパティを使用しないと、articleがasideの下に表示され、clearプロパティを使用しないと、footerがasideとarticleの中にもぐってしまいます。
floatプロパティとclearプロパティは、色々と試してみて、どのように表示されるかを確認することをお勧めします。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 1-2</title>
    <link rel="stylesheet" href="stylesheet1-2.css" />
  </head>
  <body>
    <header>header</header>
    <aside>aside</aside>
    <article>article</article>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<aside>aside</aside>

<article>article</article>

<footer>footer</footer>

</body>

</html>

body {
    height: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

aside {
    background-color: yellow;
    height: 60%;
    width: 30%;
    float: left;
}

article {
    background-color: lime;
    height: 60%;
    width: 60%;
    float: left;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
    clear: both;
}

body {

height: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

aside {

background-color: yellow;

height: 60%;

width: 30%;

float: left;

}

article {

background-color: lime;

height: 60%;

width: 60%;

float: left;

}

footer {

background: cyan;

height: 20%;

width: 90%;

clear: both;

}

articleの中にボックスを追加する

更に、articleの中にボックスを入れてみましょう。

articleタグの中にdivタグを使って、boxというクラスを呼び出します。
boxクラスはarticleに対して、縦横80%のサイズにしています。
また、「margin: 2% auto;」とすることによって、boxの位置を上下のマージンを2%、左右を中央にしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 1-3</title>
    <link rel="stylesheet" href="stylesheet1-3.css" />
  </head>
  <body>
    <header>header</header>
    <aside>aside</aside>
    <article>article
      <div class="box">box</div>
    </article>
    <footer>footer</footer>
  </body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<header>header</header>

<aside>aside</aside>

<article>article

</article>

<footer>footer</footer>

</body>

</html>

body {
    height: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

aside {
    background-color: yellow;
    height: 60%;
    width: 30%;
    float: left;
}

article {
    background-color: lime;
    height: 60%;
    width: 60%;
    float: left;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
    clear: both;
}

.box {
    background: pink;
    height: 80%;
    width: 80%;
    margin: 2% auto;
}

body {

height: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

aside {

background-color: yellow;

height: 60%;

width: 30%;

float: left;

}

article {

background-color: lime;

height: 60%;

width: 60%;

float: left;

}

footer {

background: cyan;

height: 20%;

width: 90%;

clear: both;

}

.box {

background: pink;

height: 80%;

width: 80%;

margin: 2% auto;

}

articleの中にボックスを2つ追加する

今度は、以下の図のように、articleの中にボックスを2つ入れてみましょう。

articleの中にボックスを2つ並べるために、articleの中にdivタグを使って、containerというクラスを用意します。
containerクラスは、2つのボックスを収容する領域です。
ボックスを入れる前のイメージは、下図の白い部分になります。
containerの中にbox1とbox2を横並びで入れるために、それぞれfloatプロパティを使っています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 1-4</title>
    <link rel="stylesheet" href="stylesheet1-4.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>
    </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: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

aside {
    background-color: yellow;
    height: 60%;
    width: 30%;
    float: left;
}

article {
    background-color: lime;
    height: 60%;
    width: 60%;
    float: left;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
    clear: both;
}

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

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

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

body {

height: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

aside {

background-color: yellow;

height: 60%;

width: 30%;

float: left;

}

article {

background-color: lime;

height: 60%;

width: 60%;

float: left;

}

footer {

background: cyan;

height: 20%;

width: 90%;

clear: both;

}

.container {

background: white;

height: 80%;

width: 80%;

margin: 2% auto;

}

.box1 {

background: pink;

height: 100%;

width: 50%;

float: left;

}

.box2 {

background: orange;

height: 100%;

width: 50%;

float: left;

}

articleの中にボックスを4つ追加する

最後に、articleの中にボックスを4つ入れてみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>HTML/CSS 1-5</title>
    <link rel="stylesheet" href="stylesheet1-5.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: 700px;
}

header {
    background-color: magenta;
    height: 20%;
    width: 90%;
}

aside {
    background-color: yellow;
    height: 60%;
    width: 30%;
    float: left;
}

article {
    background-color: lime;
    height: 60%;
    width: 60%;
    float: left;
}

footer {
    background: cyan;
    height: 20%;
    width: 90%;
    clear: both;
}

.container {
    background: white;
    height: 80%;
    width: 80%;
    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: 700px;

}

header {

background-color: magenta;

height: 20%;

width: 90%;

}

aside {

background-color: yellow;

height: 60%;

width: 30%;

float: left;

}

article {

background-color: lime;

height: 60%;

width: 60%;

float: left;

}

footer {

background: cyan;

height: 20%;

width: 90%;

clear: both;

}

.container {

background: white;

height: 80%;

width: 80%;

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;

}