プロゲートの全体のレイアウトレッスンの解説とよくあるミス

2021年11月12日

こんにちは、ひつじのジョージです。

大都会でプログラマーとして10年以上活躍しています。普段は会社員として働いていますが、個人でシステム、Webアプリケーションを複数運用しています。

このレッスンでは全体のレイアウトを学びます。

WEBページでは大きく

ヘッダー（ページ上部のメニュー）
メイン（ページの主なコンテンツ）
フッター（ページ下部のメニュー）

のレイアウトに分けることができます。

このレッスンではこれらの枠組を作っていきます。

マスターすること

WEBページはヘッダー・メイン・フッターのレイアウトに大きく分けれる
それぞれのレイアウトにクラスを付けれる
それぞれのクラスにCSSで装飾できる

1 全体のレイアウトレッスンの答え
2 よくあるミス
- 2.1 よくあるミス1：表示させたい順序通りに記述していない
- 2.2 よくあるミス2：入れ子（ネスト）になっている
3 まとめ：WEBページの大きな枠組みを理解しよう

全体のレイアウトレッスンの答え

このレッスンの答えは以下のとおりです。

index.htmlでヘッダー・メイン・フッターの枠組みをdivタグを使って作ります。
その後、divタグにクラスを付けてます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Progate</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <!-- <div>要素を追加し、「header」というclassをつけてください -->
    <div class="header">
      
    </div>
    
    <!-- <div>要素を追加し、「main」というclassをつけてください -->
    <div class="main">
      
    </div>
    
    <!-- <div>要素を追加し、「footer」というclassをつけてください -->
    <div class="footer">
      
    </div>
    
  </body>
</html>

index.htmlでヘッダー・メイン・フッターにheader・main・footerクラスを付けました。

stylesheet.cssではこれらに装飾をしていきます。

それぞれのクラス名を指定して装飾していく必要があります。

body {
  font-family: "Avenir Next";
}

/* headerの背景色を#f7f2b4、高さを90pxにしてください */
.header {
  background-color: #f7f2b4;
  height: 90px;
}

/* mainの背景色を#bdf7f1、高さを600pxにしてください */
.main {
  background-color: #bdf7f1;
  height: 600px;
}

/* footerの背景色を#ceccf3、高さを270pxにしてください */
.footer {
  background-color: #ceccf3;
  height: 270px;
}

stylesheet.cssでクラス名を指定して装飾するときは、クラス名の先頭にドット（.）を付けてください。
詳しくは以下の記事を参照してください。

よくあるミス

headタグ内に記述するコードは表示されないので、記述する順序はそれほど気にする必要はありませんでした。

しかしbodyタグ内に記述するコードは上から順序に表示されます。

そのため、記述する順序は重要です。

WEBページを作るときはこれらのことに気をつけましょう。

よくあるミス

表示させたい順序通りに記述していない
入れ子（ネストになってる）

よくあるミス1：表示させたい順序通りに記述していない

  <body>
    <!-- 1番目に表示される -->
    <div class="header">
      
    </div>

    <!-- 2番目に表示される -->
    <div class="footer">
      
    </div>
    
    <!-- 3番目に表示される -->
    <div class="main">
      
    </div>
  </body>

bodyタグ内は記述した順に表示されます。

そのため、ヘッダーの次にフッダーを書いてしまうとレイアウトが崩れてしまいます。

表示させたい順番は

ヘッダー
メイン
フッター

なので、この順番で記述してください。

よくあるミス2：入れ子（ネスト）になっている

  <body>
    <div class="header">
      
    </div>
    
    <div class="main">
      
      <!-- footerがmainの中に入っていてレイアウトが崩れる -->
      <div class="footer">
      
      </div>
    </div>
  </body>

メインの中にフッターが入ってしまうとレイアウトが崩れてしまいます。

WEBページを作るときは様々なレイアウトがあるので、レイアウトによってはメインの中にフッターを入れる場合があるかと思います。

しかし、多くのレイアウトの場合はメインの中にフッターを入れなくても作れます。

どこに何を記述しているのか明確に分けるためにもメインの中にフッターは入れないようにしましょう。