ボックスモデルを理解するために以下のようなデザインを実装してみましょう

画像では3つのカード状のボックスを並べていますが、1つのボックスの作り方を解説していきます

HTML

<div class="box">
  <p class="text-head font-gold">GOLD</p>
  <div class="box-circle-wrap">
    <div class="box-circle">
      <p class="text-price">$25</p>
      <p class="text-term">/MONTH</p>
    </div>
  </div>
  <div class="box-feature">
    <p>Maximize lean social media</p>
    <p>Empowering collective merit budgets</p>
    <p>Deliver buy-in</p>
    <p>Engage mission critical iteration</p>
    <p>Generated content in the cloud</p>
    <p>Unlock bleeding edge execution</p>
  </div>
  <a href="" class="btn-sign-up">
    SIGN UP
  </a>
</div>

HTMLの構造

.boxの子要素はこのように配置されています

赤い枠で囲った全ての要素はボックスモデルを持っており、それぞれのボックスは縦に並んでいます

要素間の余白と要素内の余白は全てCSSのmargin、paddingによって実装します

CSS

.box{
  width: 375px;
  padding: 50px;
}

.text-head{
  margin-bottom: 30px;
}

.box-circle{
  margin: 0 auto 50px;
  padding: 30px;
  border: 1px solid #fff;
}

.box-feature{
  margin-bottom: 30px;
}

.box-feature > p{
  margin-bottom: 30px;
  text-align: center;
  font-size: .8rem;
}

.btn-sign-up{
  padding: 20px;
}

ボックスモデルに関するCSSは上記のようになります

それでは各要素がどのようにボックスモデルを利用すれば効果的にスタイリングできるのかをみていきましょう

paddingで子要素を一律の位置に配置する

子要素の位置を調整するために.boxにはpaddingを適用しています

これによって子要素はpaddingの内側に配置されるようになるので、子要素側でmarginなどの配置のプロパティを指定する必要はなくなります

ボックス内で中央に配置

あるボックスを親要素の中央に配置するにはmargin:autoを使います

まずは.box-circle-wrapと.box-circleの配置をみてみます

.boxでは子要素の配置を決めるためにpaddingを使用しました

しかしここではmargin:autoを使って要素を配置しています

margin:autoが有効なのは要素のwidthが決まっておらず、親要素の中央に配置する時です

ここで.boxと同じようにpaddingを使わない理由は、中央に配置したい要素のwidthが変わったときなどにpaddingの値を変更しなければいけない可能性があるからです

それに比べてmargin:autoでは自動で中央配置してくれます

このようにできる限り手動で値を変える必要がない方法を選択することがポイントです

円を描く

.box-circleは円の中にテキストがあるデザインです

CSSで円を表現する方法はいくつかありますが、いずれの方法でもボックスモデルの理解が必要です

今回のCSSで円を描く方法で必要なプロパティはpadding、border、border-radiusです

次の手順で.box-circleにプロパティを適用していくと分かりやすいでしょう

borderを適用
paddingを適用
border-radiusを適用

こうすると.box-circleのボックスモデルがどのように変化していくのかが観察できます

コンテンツの配置

これまでpaddingやmarginを使ったボックスの配置を解説してきましたが、コンテンツに当たるテキストの配置はどのようにすればいいでしょうか？

テキストはボックスモデルを持たないので、marginやpaddingが使用できません

このようなボックスモデルを持たないコンテンツにも配置を指定できるプロパティがCSSにはいくつかあり、代表的なものはtext-alignプロパティです

text-align: centerはテキストをボックス内で中央揃えに配置します

なので.box-feature > pにプロパティを適用すると.box-featureの直下のp要素のコンテンツが、p要素内で中央揃えになるという意味になります

ここでは説明しませんが、text-alignのようなボックスモデル内のコンテンツや子要素の配置を扱うプロパティ様々なものがあります

配置したい対象がブロックレベルかインラインレベルかなどでどのプロパティを使うのかが変わるので、ボックスモデルと合わせてブロックライン、インライン要素についても理解しておきましょう

ボックスの背景に色をつける

背景色を設定するにはbackground-colorプロパティを使用します

ボックスモデルでbackground-colorが適用されるのはborderの内側、つまりpaddingとコンテンツのエリアです

ボタンのデザインではよく使う考え方なのでしっかりと身に付けましょう

ボックスの幅

特に設定しない限り、要素に適用するwidthとheightはコンテンツに適用されます

例えばwidth:200px; height: 200px;とした場合はコンテンツの幅が200px、高さが200pxになります

しかし、これでは後からpaddingやborderの大きさを変更した時にボックス自体の大きさが変わってしまうので、レイアウトが崩れてしまいます

これはすべての要素に初期値としてbox-sizing: content-boxというCSSが適用されているからです

これをbox-sizing: border-boxと変更すると、widthとheightの適用範囲がborderまでになります

このようにすることで後からでもレイアウトを崩すことなくCSSを変更しやすくなります

ちなみにbox-sizingプロパティは適用したい要素だけに個別に割り当てることもできますが、どの要素にもデフォルトでbox-sizing: border-boxを適用したい場合は次のようにしましょう

*{
  box-sizing: border-box;
}

まとめ

ボックスモデルはCSSの基本的な概念です

ボックスモデルを理解することが要素のスタイリングと配置の方法をマスターする第一歩です

全体のコード

HTML

      <div class="box-parent">
      <div class="show-behind">
        <div class="box">
          <p class="text-head">SILVER</p>
          <div class="box-circle-wrap">
            <div class="box-circle">
              <p class="text-price">$15</p>
              <p class="text-term">/MONTH</p>
            </div>
          </div>
          <div class="box-feature">
            <p>Maximize lean social media</p>
            <p>Empowering collective merit budgets</p>
            <p>Deliver buy-in</p>
            <p>Engage mission critical iteration</p>
            <p>Generated content in the cloud</p>
            <p>-</p>
          </div>
          <a href="" class="btn-sign-up">
            SIGN UP
          </a>
        </div>
      </div>
      <div class="area-box">
        <div class="box show-forward">
          <p class="text-head font-gold">GOLD</p>
          <div class="box-circle-wrap">
            <div class="box-circle">
              <p class="text-price">$25</p>
              <p class="text-term">/MONTH</p>
            </div>
          </div>
          <div class="box-feature">
            <p>Maximize lean social media</p>
            <p>Empowering collective merit budgets</p>
            <p>Deliver buy-in</p>
            <p>Engage mission critical iteration</p>
            <p>Generated content in the cloud</p>
            <p>Unlock bleeding edge execution</p>
          </div>
          <a href="" class="btn-sign-up">
            SIGN UP
          </a>
        </div>
      </div>
      <div class="flex show-behind">
        <div class="box">
          <p class="text-head">BRONZE</p>
          <div class="box-circle-wrap">
            <div class="box-circle">
              <p class="text-price">$5</p>
              <p class="text-term">/MONTH</p>
            </div>
          </div>
          <div class="box-feature">
            <p>Maximize lean social media</p>
            <p>Empowering collective merit budgets</p>
            <p>Deliver buy-in</p>
            <p>-</p>
            <p>-</p>
            <p>-</p>
          </div>
          <a href="" class="btn-sign-up">
            SIGN UP
          </a>
        </div>
      </div>
    </div>

CSS

   :root{
      --color-gold: rgb(174,142,93);;
    }
    *{
      margin: 0;
      padding:0;
      box-sizing: border-box;
      letter-spacing: 1px;
      font-family: 'Noto Sans JP', sans-serif;
    }
    p{
      color: #fff;
    }
    body{
      /* background: rgb(31,38,47); */
      background: #fff;
    }
    .area-box{
      display: flex;
      padding: 2rem;
      /* justify-content: space-evenly; */
    }
    .show-behind{
      opacity: .8;
    }
    .show-forward{
      transform: scale(1.05);
    }
    .font-gold{
      color: var(--color-gold);
    }
    .box{
      background: #000;
    }
    .text-price,
    .text-head,
    .btn-sign-up{
      text-align: center;
      letter-spacing: 3px;
    }
    .text-head{
      font-weight: 700;
    }
    .box-circle-wrap{
      display: flex;
    }
    .box-circle{
      text-align: center;
      border-radius: 50%;
    }
    .text-price{
      width: 100%;
      font-size: 3rem;
    }
    .text-term{
      font-size: .8rem;
      width: 100%;
    }
    .btn-sign-up{
      display: block;
      background-color: var(--color-gold);
      text-align: center;
      text-decoration: none;
      font-weight: 700;
      color: #fff;
    }

/*---------------------------------

  box-model properties

---------------------------------*/

    .box{
      width: 375px;
      padding: 50px;
    }

    .text-head{
      margin-bottom: 30px;
    }

    .box-circle-wrap{
      margin-bottom: 50px;
    }

    .box-circle{
      margin: auto;
      padding: 50px;
      border: 1px solid #fff;
    }

    .box-feature{
      margin-bottom: 30px;
    }

    .box-feature > p{
      margin-bottom: 30px;
      text-align: center;
      font-size: .8rem;
    }

    .btn-sign-up{
      padding: 20px;
    }

FlexBoxで作るWebページ

必要なスキル

作りながら学ぶHTML・CSS

必要なスキル

App

contact