[CSS]多様化したデバイスに対応！CSSで使いやすいブレイクポイントを的確に定義する方法

サイト構築 -CSS

Post on:2017年2月23日

ブレイクポイントで混乱する原因

まずは1分間、CSSについて忘れてください。Web制作もユーザーインターフェイスについてもです。

リラックスして、あなたの青春時代、学生の気分になってみてください。

点の集まり

上記の点を見てみてください。点のいくつかは塊状に、いくつかは散らばっています。ここであなたにして欲しいのは、これらの点を5つのグループに分けることです。

点を5つのグループに分け、それぞれの周りに円を描いてみてください。

あなたはおそらく、下記のように分け、円を描いたと思います。先にスクロールして答えを見た、と言わないことを期待します。

点を5つのグループに分割

右端とその隣の点のグループをどうするか迷うかもしれません。2つをグループにしてもOKです。どちらにしても間違いではありません、

ひょっとしてあなたは下記のような円を描きましたか？

点を5つのグループに分割

上記のようにグループ分けをした人はほとんどいないと思います。

しかし、これは一般的なデバイス（320px、768px、1024px）の幅に対して、ブレイクポイントの値を設定したものです。

一般的なデバイスに対するブレイクポイントの値

これを見て、あなたはどう認識していますか？

ミドルのブレイクポイントは768px未満、あるいは768pxを含めてですか？　わたしはiPadを横向きで見ますが、それはラージに含まれますか？ラージは768px以上ですね、分かりました。スモールは320pxですか？ 0pxから319pxまでがその範囲ですか？

私はあなたに正しいブレイクポイントを提示するだけにして、次に進めることもできます。しかし、私は上記の方法（「愚かなグループ分け」）がとても普及していることが非常に不思議であることを見いだしました。

それはなぜでしょうか？
この問題に対する私の答えは、非常に多くの問題と同じように、不整列な用語にあると考えています。

ブレイクポイントの定義と実装で問題になるのは、「境界」と「範囲」が混在しているからだと思います。

一つ教えてください。あなたはSassでブレイクポイントを作成する時、「$large」という変数、たとえば768pxを使用していますか？

その値はlargeの範囲において、上限または下限ですか？もし下限の値なら、0が必要なので「$small」を使用しなければなりません、そうではありませんか？

もし上限の値なら、ブレイクポイント「$large-and-up」をどのように定義しますか？「$medium」のmin-widthを持ったメディアクエリでなければなりません、これは正しいですか？

もしあなたがlargeで境界を参照しているなら、後で混乱するかもしれません。なぜなら、メディアクエリは常に範囲だからです。

この状況は混乱の原因となり、時間を無駄にしています。私は3つの提案をします。

ブレイクポイントを正しく取得する
ブレイクポイントの範囲に分かりやすい名前をつける
宣言的に

Tips 1: ブレイクポイントを的確に取得する

的確なブレイクポイントとは何でしょうか？
さきほど描いたグループ化した円を長方形に変更することから始めます。

グループ化した円を長方形に変更

左から順に、600px、900px、1200px、そして巨大スクリーンも必要であれば、1800pxも加えます。
一般的なデバイスのスクリーンサイズで最もよく使われている14種類を確認します。

デスクトップ・スマホ・タブレットのスクリーンサイズ 2016年10月

それぞれのデバイスがグループ化のどこに属されるか図にしました。

デバイスごとのグループ化

Tips 2: ブレイクポイントの範囲に分かりやすい名前をつける

もしあなたが望むなら、ブレイクポイントに好きな名前を付けることができます。しかし、チームのメンバーとさまざまなデバイスでサイトがどのように見えるべきか打ち合わせをする時に、できるだけスムーズに進めばよいと思っています。「portrait tablet」と名付けるのは簡単です。ですが、タブレットの縦向きのサイズはどんどん変化しています。スマホのスクリーンはより大型化し、タブレットは小型化しています。

WebサイトのCSSの使用期限は、およそ3年と言われています。iPadはその2倍の時間を私たちと一緒に過ごしてきましたが、まだその牙城は崩されていません。Appleがもう新しい製品を作らないことをわたし達は知っています、既存のもの（ボタンや欠点など）を取り除くだけです。1024x768のサイズは、継続されるでしょう。

結論: コミュニケーションは重要。お互いに理解できる言葉から意図的に外れないようにしましょう。

Tips 3: ブレイクポイントを定義するコード

CSSで定義する時は、どのように起こるべきなのかではなく、何が起きてほしいかを定義するべきです。「どのように」にはミックスインに隠されています。

前述したように、ブレイクポイントにおける混乱の原因は、範囲の境界を定義する変数が範囲の名前として使用されることです。もし「large」が範囲であるなら、「$large: 600px」は意味をなしません。

そのため、コードで使うためにはミックスインの中でそれらの詳細を隠すことができます。あるいは、変数をまったく使用せず、より良い結果を得ることができます。

まずは簡単な例として、下記のスニペットを用意しました。しかしこのコードですべての範囲がカーバーされています。実際の動作は、デモページで確認してみてください。私はSassを使用しています。なぜなら、Sassを使用しないでサイトを構築することを想像できないからです。

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
@mixin for-tablet-portrait-up {
  @media (min-width: 600px) { @content; }
}
@mixin for-tablet-landscape-up {
  @media (min-width: 900px) { @content; }
}
@mixin for-desktop-up {
  @media (min-width: 1200px) { @content; }
}
@mixin for-big-desktop-up {
  @media (min-width: 1800px) { @content; }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-desktop-up {
    padding: 20px;
  }
}

@mixin for-phone-only {

@media (max-width: 599px) { @content; }

}

@mixin for-tablet-portrait-up {

@media (min-width: 600px) { @content; }

}

@mixin for-tablet-landscape-up {

@media (min-width: 900px) { @content; }

}

@mixin for-desktop-up {

@media (min-width: 1200px) { @content; }

}

@mixin for-big-desktop-up {

@media (min-width: 1800px) { @content; }

}

// usage

.my-box {

padding: 10px;

@include for-desktop-up {

padding: 20px;

}

名前に「-only」と「-up」の接尾辞を付けています。

曖昧さは混乱の元になります。

上記は明らかに、カスタマイズされたメディアクエリに対応できないかもしれません。
しかし良い知らせがあります。カスタマイズされたメディアクエリが必要な時には、メディアクエリをカスタマイズして書くしかありません。実際にわたしが上記より複雑なものが必要な場合は、Susyのツールキットを愛用しています。

もう一つの問題点は、5つのミックスインがあることです。確かに1つのミックスインにすることは健全です、下記のように、1つのミックスインにまとめてみます。

@mixin for-size($size) {
  @if $size == phone-only {
    @media (max-width: 599px) { @content; }
  } @else if $size == tablet-portrait-up {
    @media (min-width: 600px) { @content; }
  } @else if $size == tablet-landscape-up {
    @media (min-width: 900px) { @content; }
  } @else if $size == desktop-up {
    @media (min-width: 1200px) { @content; }
  } @else if $size == big-desktop-up {
    @media (min-width: 1800px) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

@mixin for-size($size) {

@if $size == phone-only {

@media (max-width: 599px) { @content; }

} @else if $size == tablet-portrait-up {

@media (min-width: 600px) { @content; }

} @else if $size == tablet-landscape-up {

@media (min-width: 900px) { @content; }

} @else if $size == desktop-up {

@media (min-width: 1200px) { @content; }

} @else if $size == big-desktop-up {

@media (min-width: 1800px) { @content; }

}

// usage

.my-box {

padding: 10px;

@include for-size(desktop-up) {

padding: 20px;

}

もちろん、この方法はうまくいきます。しかし、サポートされていない名前を渡すと、コンパイル時のエラーは発生しません。Sassの変数を渡すということは、ミックスインでスイッチに渡すために5つの変数をつかうことになります。

「@include for-desktop-up {...}」の構文は言うまでもありませんが、「@include for-size(desktop-up) {...}」よりも綺麗です。

これら2つのスニペットの問題点は600pxと、また599pxと2回入力してます。変数を使用し、必要なときに1を引くべきです。

もしあなたがそれを望むなら構いませんが、わたしにはそれをしない2つの理由があります。

これらは頻繁に変化するものではありません。また、コードベースの他の場所で使用される数字でもありません。
これらの変数を持つJSオブジェクトをページに挿入するスクリプトにSassブレイクポイントを公開しない限り、変数ではないという事実によって問題は発生しません。
Sassを使って数字を文字列に変換したいときには構文が厄介です。下記は、2回繰り返すのを回避するコードです。

@mixin for-size($range) {
  $phone-upper-boundary: 600px;
  $tablet-portrait-upper-boundary: 900px;
  $tablet-landscape-upper-boundary: 1200px;
  $desktop-upper-boundary: 1800px;

  @if $range == phone-only {
    @media (max-width: #{$phone-upper-boundary - 1}) { @content; }
  } @else if $range == tablet-portrait-up {
    @media (min-width: $phone-upper-boundary) { @content; }
  } @else if $range == tablet-landscape-up {
    @media (min-width: $tablet-portrait-upper-boundary) { @content; }
  } @else if $range == desktop-up {
    @media (min-width: $tablet-landscape-upper-boundary) { @content; }
  } @else if $range == big-desktop-up {
    @media (min-width: $desktop-upper-boundary) { @content; }
  }
}

// usage
.my-box {
  padding: 10px;
  
  @include for-size(desktop-up) {
    padding: 20px;
  }
}

@mixin for-size($range) {

$phone-upper-boundary: 600px;

$tablet-portrait-upper-boundary: 900px;

$tablet-landscape-upper-boundary: 1200px;

$desktop-upper-boundary: 1800px;

@if $range == phone-only {

@media (max-width: #{$phone-upper-boundary - 1}) { @content; }

} @else if $range == tablet-portrait-up {

@media (min-width: $phone-upper-boundary) { @content; }

} @else if $range == tablet-landscape-up {

@media (min-width: $tablet-portrait-upper-boundary) { @content; }

} @else if $range == desktop-up {

@media (min-width: $tablet-landscape-upper-boundary) { @content; }

} @else if $range == big-desktop-up {

@media (min-width: $desktop-upper-boundary) { @content; }

}

// usage

.my-box {

padding: 10px;

@include for-size(desktop-up) {

padding: 20px;

}

CSSでは、下記のようになります。

.my-box {
  padding: 10px;
}
@media (min-width: 1200px) {
  .my-box {
    padding: 20px;
  }
}

.my-box {

padding: 10px;

}

@media (min-width: 1200px) {

.my-box {

padding: 20px;

}

最終的に、あなたは「ブレイクポイントをデバイスではなく、コンテンツに紐付けるべきではないか？」と考えているかもしれません。レイアウトが一つしかないサイトのためと考えれば、答えは「はい」です。もしレイアウトが複数あるなら、それぞれのレイアウトごとにブレイクポイントを設定することになります。あなたのサイトのデザインが頻繁に変更されない場合や、コンテンツに基づいてデザインを更新したい場合、その度にブレイクポイントをアップデートすることはうれしいですか？

複雑なサイトでは、いくつかのブレイクポイントを選択してサイト全体で使用する方が簡単です。

ブレイクポイントの作成に役立つツール

Flickrのブレイクポイント

使用しているモニターよりも大きな画面サイズでCSSのブレイクポイントを確認する必要がある場合は、Chromeのデベロッパーツールで「Responsive」モードを使用し、好きなスクリーンサイズを入力して確認できます。
ブルーのバーは「最大幅」のメディアクエリを示し、オレンジのバーは「最小幅」のメディアクエリを示し、グリーンのバーは最小と最大のメディアクエリを示します。
メディアクエリをクリックすると、スクリーンをその幅にセットします。グリーンのメディアクエリをクリックすると、最大幅と最小幅を切り替えることができます。
メディアクエリを右クリックすると、そのルールを定義しているCSSに移動します。