webデザインwebサイト制作

従来、divや余白の大きさはデザインやコンテンツのボリュームによってマチマチですが、その都度値を決めるのでは無く、ある指針（ガイドライン）に沿って決める場合がよくあります。
その中でも、
「8の倍数デザイン論」と呼ばれる、全ての物を8の倍数でデザインする手法があります。
その根拠として、

• 多くのデバイスのディスプレイが8の倍数でできている
• iPhoneのUIも8の倍数でできている

などです。

ameblo.jp

デザインを効率化する上で、ガイドラインは非常に重要ですが、必ずしも全ての要素にこの8の倍数理論を取り入れなければいけない訳でなく、divの大きさや余白に一定のルールを持たせ、デザイン的に共通性を持たせる事が重要です。余白を統一するというのはすべてのデザインにおける大前提的なテクニックですので、仕上がりが良くなります。また、細かい値を指定する際に迷いも少なくなる事から作業の効率化も図れるので、こういったガイドラインを持つ事は非常に大事です。

8の倍数でのブレイクポイント

これまでの授業では、
PC =960px以上
タブレット = 768~959px
SP = 767px以下

というある意味、一番シンプルかつ簡単なブレイクポイントで管理してきましたが、少し複雑なレイアウトになるとこの3点だけで全て解決するのはかなり無理があります。
さらに、デバイスサイズの多様化は日々進んでいる為、変化に対応出来る最適なブレイクポイントを自身でしっかりと把握出来る事が重要です。

最近のよくあるブレイクポイント

大きいサイズのPC = 1280px以上
通常のPC = 1279~960px
タブレット = 959~600px
スマホ横・小さいタブレット = 599~480px
スマホ縦 = 479px以下

$point-pc:1279px;
$point-tablet:959px;
$point-lsp:599px;
$point-sp:479px;


@mixin pc {
    @media screen and (max-width:$point-pc) {
      @content;
    }
  }

  @mixin tablet {
    @media screen and (max-width:$point-tablet) {
      @content;
    }
  }
  @mixin lsp {
    @media screen and (max-width:$point-lsp) {
      @content;
    }
  }
  @mixin sp {
    @media screen and (max-width:$point-sp) {
      @content;
    }
  }


/*大きいPC用*/
body {
    background: #000;
    }

/*小さいPC用*/
 @include pc {
    body{
        background:#00F;
    }
 }

/*タブレット用*/
@include tablet {
    body{
        background:#0F0;
    }
 }
/*スマホ横用*/
@include lsp {
    body{
        background:rgb(255, 166, 0);
    }
 }
/*スマホ用*/
@include sp {
    body{
        background:rgb(255, 0, 119);
    }
 }