on:2017年2月23日sponsorsスマホは年々大型化し、スクリーンサイズは多様化しています。タブレットは小型化の傾向ですがさまざまなスクリーンサイズのものが流通しています。デスクトップもワイドスクリーンなど、わたし達が使用しているデバイスは非常に多様化しています。スマホ、タブレット、デスクトップ、ワイドスクリーンの異なるスクリーンサイズのレスポンシブ用に、CSSで使いやすいブレイクポイントを的確に定義する方法を紹介します。breakpoints下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。ブレイクポイントを定義するコードブレイクポイントの作成に役立つツールブレイクポイントで混乱する原因まずは1分間、CSSについて忘れてください。Web制作もユーザーインターフェイスについてもです。リラックスして、あなたの青春時代、学生の気分になってみてください。点の集まり上記の点を見てみてください。点のいくつかは塊状に、いくつかは散らばっています。ここであなたにして欲しいのは、これらの点を5つのグループに分けることです。点を5つのグループに分け、それぞれの周りに円を描いてみてください。あなたはおそらく、下記のように分け、円を描いたと思います。先にスクロールして答えを見た、と言わないことを期待します。右端とその隣の点のグループをどうするか迷うかもしれません。2つをグループにしてもOKです。上記のようにグループ分けをした人はほとんどいないと思います。これは一般的なデバイス(320px、768px、1024px)の幅に対して、ブレイクポイントの値を設定したものです。ラージは768px以上ですね、分かりました。0pxから319pxまでがその範囲ですか?私はあなたに正しいブレイクポイントを提示するだけにして、次に進めることもできます。「愚かなグループ分け」)がとても普及していることが非常に不思議であることを見いだしました。それはなぜでしょうか?この問題に対する私の答えは、非常に多くの問題と同じように、不整列な用語にあると考えています。ブレイクポイントの定義と実装で問題になるのは、「境界」と「範囲」が混在しているからだと思います。「$medium」のmin-widthを持ったメディアクエリでなければなりません、これは正しいですか?もしあなたがlargeで境界を参照しているなら、後で混乱するかもしれません。メディアクエリは常に範囲だからです。この状況は混乱の原因となり、時間を無駄にしています。私は3つの提案をします。ブレイクポイントを的確に取得する的確なブレイクポイントとは何でしょうか?さきほど描いたグループ化した円を長方形に変更することから始めます。左から順に、600px、900px、1200px、そして巨大スクリーンも必要であれば、1800pxも加えます。一般的なデバイスのスクリーンサイズで最もよく使われている14種類を確認します。2016年10月それぞれのデバイスがグループ化のどこに属されるか図にしました。ブレイクポイントの範囲に分かりやすい名前をつけるもしあなたが望むなら、ブレイクポイントに好きな名前を付けることができます。チームのメンバーとさまざまなデバイスでサイトがどのように見えるべきか打ち合わせをする時に、できるだけスムーズに進めばよいと思っています。tablet」と名付けるのは簡単です。タブレットの縦向きのサイズはどんどん変化しています。スマホのスクリーンはより大型化し、タブレットは小型化しています。WebサイトのCSSの使用期限は、およそ3年と言われています。iPadはその2倍の時間を私たちと一緒に過ごしてきましたが、まだその牙城は崩されていません。Appleがもう新しい製品を作らないことをわたし達は知っています、既存のもの(ボタンや欠点など)を取り除くだけです。1024x768のサイズは、継続されるでしょう。コミュニケーションは重要。お互いに理解できる言葉から意図的に外れないようにしましょう。ブレイクポイントを定義するコードCSSで定義する時は、どのように起こるべきなのかではなく、何が起きてほしいかを定義するべきです。「どのように」にはミックスインに隠されています。前述したように、ブレイクポイントにおける混乱の原因は、範囲の境界を定義する変数が範囲の名前として使用されることです。600px」は意味をなしません。そのため、コードで使うためにはミックスインの中でそれらの詳細を隠すことができます。変数をまったく使用せず、より良い結果を得ることができます。簡単な例として、下記のスニペットを用意しました。このコードですべての範囲がカーバーされています。実際の動作は、デモページで確認してみてください。私はSassを使用しています。Sassを使用しないでサイトを構築することを想像できないからです。20px;}}名前に「-only」と「-up」の接尾辞を付けています。曖昧さは混乱の元になります。上記は明らかに、カスタマイズされたメディアクエリに対応できないかもしれません。良い知らせがあります。カスタマイズされたメディアクエリが必要な時には、メディアクエリをカスタマイズして書くしかありません。実際にわたしが上記より複雑なものが必要な場合は、Susyのツールキットを愛用しています。一つの問題点は、5つのミックスインがあることです。確かに1つのミックスインにすることは健全です、下記のように、1つのミックスインにまとめてみます。20px;}}もちろん、この方法はうまくいきます。サポートされていない名前を渡すと、コンパイル時のエラーは発生しません。Sassの変数を渡すということは、ミックスインでスイッチに渡すために5つの変数をつかうことになります。{...}」よりも綺麗です。これら2つのスニペットの問題点は600pxと、また599pxと2回入力してます。変数を使用し、必要なときに1を引くべきです。あなたがそれを望むなら構いませんが、わたしにはそれをしない2つの理由があります。これらは頻繁に変化するものではありません。コードベースの他の場所で使用される数字でもありません。これらの変数を持つJSオブジェクトをページに挿入するスクリプトにSassブレイクポイントを公開しない限り、変数ではないという事実によって問題は発生しません。Sassを使って数字を文字列に変換したいときには構文が厄介です。下記は、2回繰り返すのを回避するコードです。20px;}}CSSでは、下記のようになります。20px;}}最終的に、あなたは「ブレイクポイントをデバイスではなく、コンテンツに紐付けるべきではないか?」と考えているかもしれません。レイアウトが一つしかないサイトのためと考えれば、答えは「はい」です。レイアウトが複数あるなら、それぞれのレイアウトごとにブレイクポイントを設定することになります。あなたのサイトのデザインが頻繁に変更されない場合や、コンテンツに基づいてデザインを更新したい場合、その度にブレイクポイントをアップデートすることはうれしいですか?複雑なサイトでは、いくつかのブレイクポイントを選択してサイト全体で使用する方が簡単です。ブレイクポイントの作成に役立つツールFlickrのブレイクポイント使用しているモニターよりも大きな画面サイズでCSSのブレイクポイントを確認する必要がある場合は、Chromeのデベロッパーツールで「Responsive」モードを使用し、好きなスクリーンサイズを入力して確認できます。ブルーのバーは「最大幅」のメディアクエリを示し、オレンジのバーは「最小幅」のメディアクエリを示し、グリーンのバーは最小と最大のメディアクエリを示します。メディアクエリをクリックすると、スクリーンをその幅にセットします。グリーンのメディアクエリをクリックすると、最大幅と最小幅を切り替えることができます。メディアクエリを右クリックすると、そのルールを定義しているCSSに移動します。