コンテンツのmarginの話【初心者向け】

Pocket

今回はページをコーディングするときの超基本的なmarginのお話です。

最初のころ、ぐちゃぐちゃなコーディングしてコードが気持ち悪いことになっていたので、これからhtml,css始める方は目を通しておくと綺麗に書けるよ。(多分)

デモはこちら

<仕様>

①スマートフォンや画面幅の小さい時のページの両端には、最低でも必ず10pxのmarginを確保しています。

②ページ内の白い部分の最大幅は780pxであり、画面の中心に配置するようにします。

それでは、解説。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="Container">
        <div class="sideMargin">
          <div class="itemBlock">
            <p>横幅の最大値は780pxだよ</p>
            <p class="item01">item01</p>
            <p class="item02">item02</p>
            <p class="item03">item03</p>
            <p class="item04">item04</p>
            <p class="item05">item05</p>
          </div>
          <div class="itemBlock">
            <p>横幅の最大値は780pxだよ</p>
            <p class="item01">item01</p>
            <p class="item02">item02</p>
            <p class="item03">item03</p>
            <p class="item04">item04</p>
            <p class="item05">item05</p>
          </div>
          <div class="itemBlock">
            <p>横幅の最大値は780pxだよ</p>
            <p class="item01">item01</p>
            <p class="item02">item02</p>
            <p class="item03">item03</p>
            <p class="item04">item04</p>
            <p class="item05">item05</p>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer></footer>
  </body>
</html>

・itemBoxの親要素、sideMarginが重要です。

○index.css

.Container {
  padding: 50px 0;
  background-color: #9e9e9e40;
}


.sideMargin {
  padding: 0 10px;
}


.itemBlock {
  background-color: white;
  max-width: 780px;
  margin: 0 auto;
}

・①の仕様を満たすために、ページの両端にコンテンツを書き込めないようにsideMarginにpaddingを設定しちゃいます。

・②の仕様を満たすために、コンテンツの最大幅をmax-widthで設定します。

cssはこれだけでOKですが、コンテンツの親要素にpaddingを設定するとうまくいきます。

⇩

当たり前じゃんと思いますが、私はコンテンツ自体にpaddingを設定していたので、cssがぐちゃぐちゃしてひどい思いをしました。

ポイントは、コンテンツをdivタグで囲って、その囲った要素に対してpaddingを記述しページ両端にスペースを作るようにすると、コーディングはスッキリします。

簡単なので、実践してみてね。

今回は以上です。