前回のブログ記事ではHTMLについて書きました。

この知識がないとコーダーとしてTGでは働けない~HTML編その１~

今回からはCSSについて書いていきます。CSS(Cascading Style Sheets)とはHTMLで記述した要素のレイアウトや、テキストの大きさ、太さ、色などを指定するために使う言語です。webサイトの「見た目」を作るための言語といった方がわかりやすいかもしれません。

CSS1、CSS2、CSS3という3つのバージョンがあり、現在はほとんどのサイトでCSS3が使用されています。CSS3が登場してからは「CSSアニメーション」といってCSSだけでアニメーションを実装できるようになりました。弊社トゥモローゲートは特に動くサイトが好きな人が多いので「CSSアニメーション」をよく使っています。

さて、ブログCSS編では以下の3点について書いていきます。

・ブレークポイント
・レイアウトでよく使うプロパティ
・CSSアニメーション等

今回の第１弾はブレークポイントについてです。レスポンシブデザインを構築する上で必須となるのがこの「ブレークポイント」。正直に言うと弊社では細かく区切っていないので、この記事を書くにあたって見直していきたいと思います。

ブレークポイントとは

昨今、多種多様なデバイス（パソコン、スマホ、タブレット…etc）が発売されたことから、それらに対応したWebサイトを制作するのが当たり前になっています。というか、対応できない技術者は活躍することができません。

その対応をするために、メディアクエリを使用したブレークポイントの設定を行います。CSSを記述する前にこの「ブレークポイントを設定」することが必須条件となります。その際のコードが以下です。

クラス名{
    共通スタイル
    @media screen and (min-width: 1000px) {
        1000px以上用のスタイル
    }
    @media screen and (max-width: 999px) {
        999px以下用のスタイル
    }
}

このように指定をして、それぞれのサイズのデバイスに適用していきます。

１つの書き方として共通で指定するプロパティ（color、font-family、font-weight等）はメディアクエリを指定せずに書き、変更が多いプロパティ(font-size、width、margin等)はメディアクエリ内に書いていきます。

そうすることで打ち消すためのスタイルを書く必要がなくなるので、無駄が省けてスッキリしたコードに仕上がります。例えば、PCでwidthに75%、スマホでwidthに100%を指定する場合(ブロック要素の場合)…

クラス名{
    display: flex;
    width: 75%;
    @media screen and (max-width: スマホ用指定) {
        display: block;
        width: 100%;
    }
}

PCの場合は横並びの横幅75%、スマホの場合は縦並びの横幅100%にしています。しかしブロック要素は、何も指定していない時はデフォルトで親要素と同じサイズになるため、上の記述だとまだ少し無駄が残っています。

クラス名{
    @media screen and (min-width: PC用指定) {
        display: flex;
        width: 75%;
    }
    @media screen and (max-width: スマホ用指定) {
        // display: block;
        // width: 100%;
        // 上２つは書かなくてもいい
    }
}

このように、PCの場合でもメディアクエリを使って書くことで無駄が少しずつ減っていき、よりスッキリしたスタイルシートになるのではないかと思います。

また、ミックスインという方法で管理すると、新たに発売されたデバイスが今までにないサイズだったとしても、すぐに数値を変更して対応することもできます。例えばこんな感じ。

$breakpoints: (
  'sp': 'screen and (max-width: スマホ用指定)',
  'pc': 'screen and (min-width: PC用指定)',
) !default;
@mixin bkp($breakpoint: sp) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

このようにまとめて、

@include bkp(pc){
    // PCのスタイル
}
@include bkp(sp){
    // SPのスタイル
}

それぞれ対応する箇所でこのように記述すると、

@media screen and (min-width: PC用指定) {
    // PCのスタイル
}
@media screen and (max-width: スマホ用指定) {
    // SPのスタイル
}

 このように書き出されます。

ミックスインでまとめて管理すれば、デバイスサイズが変更になったとしても、１箇所だけ変更すれば全てに適応できます。よって、ブレークポイント以外の部分でもまとめられる部分があるならミックスインで管理することをオススメしています。

メディアクエリの数値を考える

ブレークポイントを設定する際にとても大事になるのが、メディアクエリのサイズを考えることです。このメディアクエリのサイズは、想定するスマホのデバイスによっても、デザインによっても、実装する人の考え方によっても変わってきます。本当にさまざまです。

2021年3月末時点の各デバイスごとの画面サイズトップシェアはこんな感じ。

・デスクトップ　1920 × 1080
・ノートPC　1366 × 768
・タブレット　768 × 1280
・スマホ　375 × 667

では、これをそのままメディアクエリとして設定していいかというとそうでもありません。

デスクトップの1920 × 1080のモニターをフルサイズで閲覧する人もいれば、縮小して閲覧する人もいます。ノートPCも1366 × 768のシェアが多いものの、自分は1440 × 900ですし、トゥモローゲート社内には1280 × 800の人もいます。

タブレットといっても一括りにはできません。たとえばiPad、iPad Airm、iPad mini、iPad Proというふうに4種類あります。スマホはもう、ご存知の通りです。めちゃくちゃ多いです。もっといえば、タブレットとスマホは横画面で見る人もいます。

このように、デバイスのサイズが多種多様になったことで以前よりもメディアクエリの設定が複雑になりました。特にiPhone 6 Plusが出てから複雑になりはじめた気がします。（もしかしたら怠けていただけで本当はもう少し前だったかも。）メディアクエリの設定は「設計」と言っていいレベルかな、と思うぐらいです。

そんなこんなで

色々考えた結果、これからのCSSは以下のように書いていこうと思っています。

クラス名{
    共通スタイル
    @media screen and (min-width: 1400px) {
        デスクトップ（1400px以上）のスタイル
    }
    @media screen and (min-width: 1024px) {
        ノートPC、タブレット横向き（1024px以上）のスタイル
    }
    @media screen and (min-width: 640px) {
        タブレット縦向き、スマホ横向き（640px以上）のスタイル
    }
    @media screen and (max-width: 639px) {
        スマホ縦向き（639px以下）のスタイル
    }
}

デスクトップを1400pxにしている理由は、1400pxの幅で制作されている弊社のデザインカンプを基準にしています。それ以外のデバイスのサイズは、それぞれのデバイスで一般的にシェアされていてかつ古くない型番を参考にしています。

弊社のデザインは画像が多めで尚且つテキストも長めなので、ちょくちょくブレークポイントを設定しないとズレることがあります。

それこそディスプレイのサイズ感であれば問題は特にないですが、デザインカンプの1400px以下となると文章が縦長になり、画像が縮小していくので、ブレークポイントを細かく設定しています。

あくまでも弊社での設定なので、もっと少ないブレークポイントでもいい場合はあります。実際、案件によっては「PCとスマホだけ見られればいい」というときもあるので弊社ではこのカタチが多くなっています。

クラス名{
    共通スタイル
    @media screen and (min-width: 897px) {
　　　　　PCスタイルのスタイル
    }
    @media screen and (max-width: 896px) {
        スマホのスタイル
    }
}

このパターンで、必要があれば細かく区切るというのがブレークポイントの唯一のルールになります。あってないようなものですが。。

まとめ

• ブレークポイントはレスポンシブ構築に必須
• メディアクエリの数値は案件、考え方で変わる
• 基本と目的があれば、みんな違ってみんないい

最後まで読んでいただきありがとうございました。次回のブログCSS編第2弾では、弊社が制作するwebサイトのレイアウトでよくつかうプロパティについて書いていきます。