コンテンツ
- 必要な知識： 中級CSSとHTML
- 必要なもの： テキストエディタ、最新のブラウザ、グラフィックソフトウェア
- プロジェクト時間： 1時間（合計5時間）
- サポートファイル
CSS仕様の比較的新しい部分であるメディアクエリは、間違いなくレスポンシブWebデザインの最もエキサイティングな側面であり、さらなる実験に適した領域です。
アダプティブレイアウトの必要性を受け入れた一部の人々は、メディアクエリを既存の固定幅サイトにアダプティブレイアウトを後付けする手段と見なしています。レスポンシブレイアウトを採用している人の中には、デスクトップの観点から採用している人が多く、ビューポートが狭くなるとコンテンツや機能が非表示になります。
このチュートリアル全体を通して、モバイルファーストの代替アプローチを採用しました。今、私たちはメディアクエリを含めることを検討しているので、私たちは考えることができます 追加する 画面のスペースが増えるにつれて機能が向上し、サイトを支えるマークアップとデザインが立派なベースラインを提供することを知って安全です。
今日は、パターンポートフォリオを超えて、Webサイトに必要な個々のページを構築します。そうすることで、メディアクエリがどのように構築されるかを確認し、真にレスポンシブな方法でそれらを実装します。
01.メディアクエリの追加
パターンポートフォリオのコンポーネントが完成し、レイアウトの範囲外で機能するようになったら、サイトを構成するさまざまなページにコンポーネントを移動します。
ホームページから始めましょう。デスクトップ指向のデザインから、より広いビューポートでは、レイアウトは次のように表示されるはずです。
デザインから測定を行うと、CSSでドキュメント領域を次のように記述することができます。
。資料 {
パディング：0 5％;
}
.main {
幅：74.242424242424％; / * 784/1056 * /
フロート：左;
}
.complementary {
幅：22.727272727273％; / * 240/1056 * /
フロート：右;
}
このチュートリアルの後半で学習したように、次の式を使用して、これらの列のパーセンテージ幅を計算しています。
（ターゲット/コンテキスト） * 100 =結果
ブラウザのサイズを変更すると、デスクトップレイアウトが最小サイズの画面から最大サイズの画面に拡大縮小することがわかります。もちろん、小さいサイズでは、列が狭すぎて行の長さが短すぎるため、コンテンツが読みにくくなります。このレイアウトが必要なのは、それが機能するのに十分なスペースがある場合のみです。
これがメディアクエリの出番です。このレイアウトがブラウザの幅が768pxよりも広い場合にのみ有効になると仮定すると、次のCSSを追加できます。
。資料 {
パディング：0 5％;
}
@media screen and（min-width：768px）{
.main {
幅：74.242424242424％; / * 784/1056 * /
float：left;
}
.complementary {
幅：22.727272727273％; / * 240/1056 * /
float：right;
}
}
これで、ビューポートが768pxより狭い場合、メディアクエリ内のすべてが無視されます。メディアクエリもサポートしていないブラウザでは無視されます。
02.メディアクエリの構造
ここで何が起こっているのかを理解するために、メディアクエリがどのように構築されているかを見てみましょう。これは2つの部分に分けることができます。
- @メディア画面： メディアクエリの最初の部分は メディアタイプ。 CSSに印刷スタイルを含めたことがある場合は、この構文に気付くかもしれません。タイプ名は、 メディア の属性 リンク> 素子。これは、どちらもCSS2.1仕様にある承認済みのメディアタイプのセットを受け入れるためです。
- （最小幅：768px）： 2番目の部分は クエリ。これには、 特徴 照会する（この場合はビューポートの最小幅）および対応する 値 （768px）をテストします。
レスポンシブウェブデザインについて話すとき、幅に焦点を合わせる傾向がありますが、テストできる他の機能もあります。
- （最小-|最大-）幅 そして （最小-|最大-）高さ： これらにより、ビューポート（つまりブラウザウィンドウ）の幅と高さを照会できます。
- （最小-|最大-）デバイス幅 そして （最小-|最大-）デバイスの高さ： これらにより、ディスプレイ全体の幅を照会できます。私の経験では、通常、ディスプレイよりもビューポートに基づいてレイアウトを作成する方が賢明です。
- オリエンテーション： ここで可能性をすぐに考えることができます。スマートフォンの向きに基づいて異なるコンテンツを表示するアプリを考えてみてください。ウェブでも同じことが可能です。
- （最小-|最大-）アスペクト比： これにより、ブラウザウィンドウの比率に基づいてレイアウトを調整できます…
- （最小-|最大-）デバイス-アスペクト比： …そしてこれにより、デバイスのアスペクト比に基づいて同じことを行うことができます。 Owen Gregoryは昨年、このクエリを使用してデザインを表示されるデバイスに関連付ける方法を探った素晴らしい記事を書きました。
- （最小-|最大-）モノクロ： また、デバイスにモノクロディスプレイがあるかどうかをテストすることもできます。 Amazonのe-inkKindleデバイスが嘘をつかず、画面をカラーとして報告しなかった場合、これがどれほど役立つか想像してみてください。
クエリの最後の部分がおそらく最も便利です。を使用して そして、1つのクエリで複数の機能をテストできます。例えば：
@media screen and（min-width：768px）and（orientation：landscape）{
...
}
ご覧のとおり、メディアクエリは、かなり魅力的なエクスペリエンスを構築するのに役立ちます。私は表面に触れただけです。就寝時の軽い読書を探している場合は、テストできるすべての機能を説明しているW3Cメディアクエリ仕様を読むよりも悪い結果になる可能性があります。
03.もう1つ…
CSSにメディアクエリを含めましたが、モバイルデバイスでサイトを表示すると、ディスプレイが768pxよりも広いかのようにサイトがレンダリングされていることがわかります。
これが起こっている理由を理解するには、簡単な歴史のレッスンを受ける必要があります。
オリジナルのiPhoneが2007年に発表されたとき、その大きなセールスポイントの1つは、「実際のWeb」を閲覧できることでした。たとえそれが、小さな画面に収まるように押しつぶす必要のある固定幅のデスクトップ指向のサイトを意味したとしても。 iPhoneは、320ピクセル幅の画面に合わせてウェブページを縮小する前に、ディスプレイを980ピクセル幅として報告することでこれを行うことができました。
しかし、iPhoneはレスポンシブデザインが登場する前に導入されました。著者がモバイル用に設計されたサイトを設計しているので、この機能はあまり役に立ちません。ありがたいことに、Appleはこの動作を回避する手段を備えており、他のメーカーに採用されているため、ほぼ デファクト 標準。それは単に単一を追加することを含みます メタ マークアップの要素：
meta name = "viewport" content = "initial-scale = 1.0、width = device-width" />
これは、ビューポート対応のブラウザに、Webサイトを縮小してはならず、ブラウザウィンドウの幅をデバイス全体の幅と同じように扱う必要があることを通知します。この行を追加すると、Webサイトが目的のレイアウトで表示されます。
04.ブレークポイントの選択
メディアクエリに戻りましょう。
@media screen and（min-width：768px）{
...
}
レイアウトが適応する値は、一般にブレークポイントと呼ばれます。思い出してください。パート2で、ピクセルを使用することは無反応な思考を示していると言いましたが、ここでは768pxを選択しました。これは、おそらく使い慣れたデバイスの幅だからです。
一般的なデバイスの特性に基づいてブレークポイントを選択する代わりに、コンテンツから派生した値（たとえば、読みやすい行の長さや画像の最大サイズなど）を確認する方が効果的です。
私たちのタイプはemsを使用してサイズ設定されているため、メディアクエリでもemsを使用するのが賢明なようです。実際、そうすることには追加の利点があります。ユーザーがブラウザでテキストのサイズを変更すると、ページはより小さなブレークポイントを使用するように適応します。当社のウェブサイトは、ビューポートのサイズだけでなく、フォントのサイズにも基づいて調整されます。実際、ジェレミー・キースがemベースのメディアクエリをデモンストレーションするのを見たときだけ、それらがどれほど強力であるかを実感しました。
私たちの設計は可能なブレークポイントのいくつかの指標を提供するかもしれませんが、多くの場合、それらを選択する最良の方法は実験を通してです。ブラウザウィンドウの幅を調整することにより、800pxがより複雑なレイアウトに切り替えるのに適した幅であると判断しました。
しかし、800pxをemsで表現するにはどうすればよいですか？繰り返しますが、式を使用できますが、コンテキストは何ですか？メディアクエリのemsを計算する場合、コンテキストは常にブラウザのデフォルトのフォントサイズです この値がCSSでオーバーライドされているかどうかに関係なく。このデフォルトは通常16pxで、次のようになります。
800 / 16 = 50
これで、次のようにメディアクエリを更新できます。
@media screen and（min-width：50em）{/ * 800px * /
...
}
05.サムネイルの調整
パート2では、サムネイルがレスポンシブになるようにスタイルを設定したことを思い出してください。ただし、これらのサムネイル内の画像が全幅に達すると、各画像の右側に空白の領域が表示されます。繰り返しますが、メディアクエリを使用すると、これを修正できます。
これが私たちのオリジナルのCSSです：
ol.media li.media-item {
背景色：#fff;
マージン：0 4.16666666667％4.16666666667％0;
幅：47.91666666667％;
フロート：左;
}
ol.media li.media-item：nth-child（2n）{
マージン右：0;
}
この空白が表示されるのは、ブラウザが560pxよりも広くなるのと同じです。この値を選択して、行ごとに3つのサムネイルを表示するように切り替えます。これを行うには、次のCSSを追加します。
@media screen and（min-width：35em）{
.media-item {
幅：30.612244897959％; / * 240/784 * /
マージン：0 4.081632653061％1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item：nth-child（3n）{
マージン右：0;
}
}
このメディアクエリ内のサムネイルに必要なすべてのスタイルを書き直す必要はなく、適応させたい部分だけを書き直す必要があることに注意してください。
この変更をブラウザで表示すると、1つおきのサムネイルの右側に余白がないことがわかります。これは、次のCSSルールがまだアクティブなままであるためです。
ol.media li.media-item：nth-child（2n）{
margin-right：0;
}
その値をリセットするには、メディアクエリ内のCSSを変更する必要があります。
@media screen and（min-width：35em）{
.media-item {
幅：30.612244897959％; / * 240/784 * /
マージン：0 4.081632653061％1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item：nth-child（2n）{
マージン右：4.081632653061％;
}
.media-item：nth-child（3n）{
マージン右：0;
}
}
メディアクエリを作成するときは、このような継承の問題に常に注意してください。
06.幅だけでなく
メディアクエリについては、幅だけでなく他の変数についても考慮することが重要です。たとえば、ビューポートの高さが低くなると、メディアアイテムページのビデオは部分的に非表示になります。私たちは技術を持っています：
.media-object-wrapper {
パディングボトム：56.25％;
幅：100％;
高さ：0;
位置：相対;
}
@media screen and（max-height：35em）and（orientation：landscape）{/ * 560px * /
.media-object-wrapper {
幅：60％;
パディングボトム：33.75％;
}
}
この動作をさらに細かくするために、方向クエリも含めました。
デザインの他の部分についても同様のアプローチに従うことができます。ヘッダーのより大きなバージョンを交換し、スペースが利用可能になったらナビゲーションリンクをページの上部に移動します。
- レスポンシブホームページを見る
- レスポンシブメディアアイテムページを見る
そして、私たちはそれを持っています！レスポンシブウェブサイトを構築しました–そして1日余裕があります！まあ、完全ではありません。柔軟なレイアウト、画像、メディアクエリは、レスポンシブデザインプロセスの始まりにすぎません。
明日： このチュートリアルの最後の部分では、レスポンシブWebデザインを超えて、真にレスポンシブなWebサイトを構築する方法を見ていきます。
Paulは、イギリスのブライトンを拠点とするインタラクションデザイナーです。彼は、ウェブにネイティブなシンプルで魅力的なインターフェースを作成するときに最も幸せです。
