最低限SCSSでの初期設定

SCSSで最初に設定しておくべきこととして記述しますが、これはあくまでも個人の見解です。

最低限、これらを記述しておけばコーデイングには困らないでしょう。

SCSSでブレイクポイント（breakpoints）の設定

ブレイクポイントとは、各メディア（スマホ・タブレット・パソコン）環境に応じてスタイルを切り替える機能です。

大まかに分けて３種類です。

スマホ（sp）として、425pxまでを対象としています。

これはandroidとiPhoneとで横幅が違うことに対応するためです。

近年、徐々にスマホ画面が大きくなりつつあるので、注意が必要です。

$breakpoints: (
  'sp': 'screen and (max-width: 425px)'
) !default;

次にタブレット（tab）は426px～768pxまでを対象としています。

$breakpoints: (
  'tab': 'screen and (max-width: 768px)'
) !default;

そしてパソコン（pc）は769px以上です。

$breakpoints: (
  'pc': 'screen and (min-width: 769px)'
) !default;

スマホ・タブレット・パソコンそれぞれを組み合わせると以下のようになります。

$breakpoints: (
  'sp': 'screen and (max-width: 425px)',
  'tab': 'screen and (max-width: 768px)',
  'pc': 'screen and (min-width: 769px)'
) !default;

SCSSでメディアクエリ（media queries）の設定

では、実際に SCSS として記述するにはメディアクエリを使います。

メディアクエリの設定はこちらです。

@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

なんのこっちゃですね。

これは初期としてパソコン版を表しています。

実際、装飾する際に記述するには以下のようにします。

.text {
 font-size: 60px;

  @include mq('sp')  {
    font-size: 30px;
  }
}

これはパソコン版ではフォントサイズが60pxですが、スマホ版になるとフォントサイズを30pxに変更するという記述です。

Sassですので、入れ子にしていますが style.css ではこのように表示されます。

.text {
  font-size: 60px;
}

@media screen and (max-width: 425px) {
  .text {
    font-size: 30px;
  }
}

いくつもメディアクエリを書かないといけない css に比べてコードを書く量が減り楽ですよね。

しかも、管理しやすい。

SCSSで共通カラー（colors）の設定

Sass の便利さの一つに共通部分を設定できること。

そうすることで、カラーの変更があった場合に変更が容易になる利点があります。

例えば、タイトルの色って各セクションでバラエティーに変わることって、印象が悪くなるのでほとんどないと思います。

あっても、背景に合わせて変更するくらいで、多くて２色ではないでしょうか。

共通カラーの設定には「$」マークを使います。

例えば、#color: #000; のようにします。

しかし、これでは１色しか設定できないので、#color の後に -main であったり -sub などで使い分けます。

$color-main: #333;
$color-sub: #808080;

記述の方法は、color の後に $color-main と記述します。

.text {
 color: $color-ja;
}

SCSSで共通フォント（fonts）の設定

全く、共通カラーの設定と同じです。

基本的なフォントは body 内で設定できますが、フォントには日本語用と英語用を使い分けた方がいいです。

（オススメのフォントはこちら　👉　Google Fontの使い方/オススメフォント）

私は日本語には「-ja」、英語には「-en」を font の後につけて使い分けています。

記述の仕方は「共通カラーの設定」と同じです。

$font-ja: 'Noto Serif JP', serif;
$font-en: 'Playfair Display', serif;

SCSSで全体共通（common）の設定

全体共通事項として body , inner , img , a を最初に設定します。

これは、案件によってことなるのでデザインカンプをよく見て設定することが必須となります。

body

body とは標準ですね。

特に box-sizing: border-box; に注意が必要です。

box-sizing: border-box; とは、境界およびパディングを、要素に指定した width および height の中で取るようブラウザーに指示することです。

例えば、width を 100px に設定した場合、100px の中に追加した境界やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小されます。

これで普通は、要素に対するサイズ設定をもっと簡単になります。

一方で box-sizing: content-box; があり、box-sizing: border-box; とは逆でパディングを含みません。

これらを案件によって使い分けていると混乱するかもしれないので、効率をあげるには box-sizing: border-box; 一筋をオススメします。

body {
  font-size: 16px;
  color: $color-text;
  font-family: $font-ja;
  box-sizing: border-box;
  background: #F7F4E9;
}

inner

インナーは非常に重要な設定です。

main となる部分の横幅の指定ですね。

推奨されているのは 1000px前後です。

max-width としているのは最大で 1000pxを表しています。

タブレットやスマホのように横幅が 768px以下になった場合は width: 95%; としています。

例えば、425pxの 95%は 403.75pxとなり、余白が 21.25pxとなります。

中央寄せ（margin: 0 auto;）にした場合、左右に 10.625pxの余白ができるわけです。

私としてはスマホ画面は小さいので左右の余白は 10px程度が適切だと考えています。

.inner {
  max-width: 1000px;
  margin: 0 auto;

  @include mq('sp') {
    width: 95%;
  }
}

img

画像の横幅です。
html内の imgは子要素として記述することをオススメします。

親要素で画像を表示するキャンパス（width , height）を設定しておくことで、img { width: 100%; } にしてもキャンパス以上にはならないからです。

また、キャンパス内での移動も可能となります。

<div class="img-box">
 <img src="" alt="">
</div>

a

aタグはリンクを指します。
通常であれば aタグをつければ青色で表示されます。
しかし、明らかにリンクだと分かってしてしまうと印象がよくありません。

ですから、多くのサイトでは参考サイト以外のリンクをリンクだとわかりにくくしています。

他のページに飛ぶ際には「ボタン」を設定します。

標準的には bodyのテキスト色と同じにしておいて、ホバーした際に色を変更したり、薄くしたりと変化をつけるのが一般的となっています。

ここではホバーした際に opacity: 0.8;と透過度 0.8を設定しています。

a {
 color: $color-sub;

 &:hover {
  opacity: 0.8;
 }
}

SCSSで初期設定しておくべきことのまとめ

SCSSで初期設定しておくべきことのまとめです。

これまでの各項目をひとまとめにしてみました。

コピペ可能ですが、デザインやクライアントとの打ち合わせ時に必ず確認をし適時調整してください。

@charset "utf-8";

/*=================================
# mixins
================================= */
//breakpoints
$breakpoints: (
  'sp': 'screen and (max-width: 425px)',
  'tab': 'screen and (max-width: 768px)',
  'pc': 'screen and (min-width: 769px)'
) !default;

//media queries
@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

/*=================================
# colors
================================= */
$color-main: #333;
$color-sub: #808080;

/*=================================
# fonts
================================= */
$font-ja: 'Noto Serif JP', serif;
$font-en: 'Playfair Display', serif;

/*=================================
# common
================================= */
body {
  font-size: 16px;
  color: $color-sub;
  font-family: $font-ja;
  box-sizing: border-box;
  background: #F7F4E9;
}

.inner {
  max-width: 1100px;
  margin: 0 auto;

  @include mq('sp') {
    width: 90%;
  }
}

img {
  width: 100%;
}

a {
 color: $color-sub;

 &:hover {
  opacity: 0.8;
 }
}