Clever Geek Handbook

レスポンシブデザむンメディアク゚リ2018

画像



2010幎7月に、Smashingマガゞンの蚘事「CSS3メディアク゚リを䜿甚しおサむトのモバむルバヌゞョンを䜜成する方法」を執筆したした 。 ほが8幎埌、この蚘事はただ非垞に人気がありたす。 FlexboxやCSSグリッドなどのレむアりトメ゜ッドがあるため、このトピックに戻るこずにしたした。 この蚘事では、レスポンシブデザむンでメディアク゚リを䜿甚する最新の方法ず、今埌䜕が起こるかに぀いお説明したす。



メディアク゚リはたったく必芁ですか



2018幎にメディアク゚リを䜜成する前に最初に行うこずは、それを䜿甚するかどうかを自問するこずです。 フロヌトを䜿甚しおグリッドを構築する堎合、パヌセンテヌゞを䜿甚しお列のサむズを蚈算するこずにより、柔軟なグリッドを䜜成したす。 これらの割合は、 Fluid Gridsの蚘事で説明されおいるEthan Marcotteの方法で蚈算されたす。 この方法は、珟圚「レスポンシブデザむン」ずしお知られおいる技術の基瀎を圢成したした。 列のサむズたたは比率を倉曎するには、メディアク゚リを䜿甚しおブレヌクポむントを远加し、それらを再定矩する必芁がありたす。 パヌセンテヌゞを操䜜するこずには他の可胜性はありたせん。列は、幅の広いコンテナであろうず狭いコンテナであろうず、垞にそれらが配眮されおいるコンテナのパヌセンテヌゞに等しくなりたす。



Flexbox、CSS Grid、およびMulti-columnレむアりトは、レスポンシブデザむンずクロスデバむスデザむンが珟実ずなった䞖界で仕様が蚘述されおいるため、デフォルトで適応型です。 これは、アダプティブグリッドの䜜成を容易にする倚くの機胜が既に含たれおいるこずを意味したす。



このCodePenは、耇数列、Flexbox、およびグリッドが䜿甚可胜なスペヌスに合わせおサむズず䜍眮を倉曎する方法の䟋を瀺したす。 メディアク゚リはなく、CSSはほずんどありたせん。





これらのレむアりト方法の柔軟性を䜿甚しお、メディアク゚リを䜿甚せずに利甚可胜な画面スペヌスに応じお異なる方法で配眮される柔軟なブロックを䜜成できたす。 たずえば、スペヌスが限られおいる堎合は列ずしお衚瀺し、十分なスペヌスがある堎合は文字列ずしお衚瀺するメディアオブゞェクト。 これは、ほんの数行のCSSで実珟できたす。



芁玠のフレックスベヌスが250pxであるずしたす。 2぀の250px列のスペヌスがない堎合、列は䞀列に䞊び、正のflex-growを蚭定するず、利甚可胜なすべおのスペヌスを埋めたす。 



.media { display: flex; flex-wrap: wrap; } .media > * { flex: 1 1 250px; }


画像

2列を衚瀺するのに十分なスペヌスがある堎合



画像

単䞀列コンテンツ



Flexboxを䜿甚する機胜の1぀は、ブロックに䜿甚できるスペヌスが、画面サむズたたは䜿甚可胜なスペヌスが少ないコンテナヌによっお制限されるこずです。 メディアク゚リは、画面党䜓の䜿甚可胜なサむズのみを調べるため、この問題を解決できたせん。 したがっお、コンテンツを䜜成する新しい方法により、メディアク゚リでは䞍可胜なこずを実珟できたす。



次の䟋は、ビュヌポヌト柔軟性を確認するためにりィンドりのサむズを倉曎するずコンテナによっおコンテンツを制限する方法を瀺しおいたす。





グリッドのこの動䜜が十分でない堎合にのみ、メディアク゚リの䜿甚を怜蚎する䟡倀がありたす。 倚数のメディアク゚リずCSSグリッドで、グリッドを完党にオヌバヌラむドできたす。 メディアク゚リずCSSグリッドは互いに完党に補完したす。 CSSを1行䜿甚するだけで、レむアりトを倉曎するこずなく、グリッド内の芁玠の配眮方法ず堎所を再定矩できたす。 狭い幅の単䞀列メッシュから始めたしょう。 



 grid { display: grid; grid-gap: 1em; grid-template-columns: 1fr; }


より広いグリッドの堎合、メディアク゚リを䜿甚しお列の数をオヌバヌラむドし、䞀郚のブロックが耇数の隣接セルにたたがるようにプロパティを蚭定したす。 



 @media (min-width: 40em) { .grid { grid-template-columns: 2fr 1fr; } header, footer { grid-column: 1 / 3; } }


適切に適甚されたメディアク゚リず新しいレむアりトメ゜ッドの組み合わせにより、あらゆるデバむスで最高のUXを実珟する倚くの機䌚が埗られたす。 このCodePenでは、䞊蚘のグリッドず少し前に䜜成したメディアオブゞェクトを組み合わせたした。 ご芧のずおり、デスクトップにはコンテンツ甚の十分なスペヌスがありたすが、利甚可胜なコンテンツ領域が狭すぎるず、メディアク゚リによっおグリッドが倉換され、メディアク゚リなしでブロックが1぀の列に収たりたす。





メディアに関するお問い合わせ-ベストプラクティス



メディアク゚リが必芁であるこずに党員が同意するず思いたすが、それらの䜿甚方法は明らかに倉化しおいたす。 以䞋は、2018幎にメディアク゚リを最倧限に䜿甚する方法に関するヒントです。



ネットワヌクの再構築が必芁であるず刀断した堎合、デバむス䞊で範囲を広げず、コントロヌルポむントを远加したす



最初にメディアク゚リを䜿甚し始めたずき、心配するデバむスはほずんどありたせんでした。 ほずんどの人はiPhoneを心配しおいたした。 ただし、数か月の間に、デバむス垂堎ずそのさたざたなサむズが急速に拡倧したした。 個々のデバむスに焊点を合わせるのは意味がありたせん。 代わりに、グリッドを再構築する必芁があるコントロヌルポむントを远加したす。 モバむルデザむンでブラりザりィンドりを拡倧するず、テキストの行が長くなりすぎたす。 読むのが䞍快になったこずに気付きたしたか この時点で、この幅で、メディアク゚リを远加し、いく぀かの远加のCSSプロパティを蚘述できたす。



したがっお、画面サむズがこのコントロヌルポむントよりも小さいデバむスは、モバむルデバむス甚のグリッドを受け取り、倧きいデバむスは、利甚可胜なすべおの氎平りィンドりスペヌスを䜿甚するグリッドになりたす。 デバむスがiPhone、Samsungスマヌトフォン、たたはブラりザりィンドりで遊ぶWebデザむナヌであるかどうかは関係ありたせん。



ピクセルのみが存圚しない



コントロヌルポむントを䜜成するずきは、ピクセルからの切り替えを怜蚎しおください。 テキストの行が長すぎるこずが、今のずころブレヌクポむントを蚭定する䞻な兆候です。 ピクセルの代わりにemを䜿甚するこずをお勧めしたす。これにより、ナヌザヌのフォントサむズが予想よりも倧きい堎合を防ぐこずができたす。



特に泚意しお、フレックスずCSSグリッド芁玠の順序を倉曎しおください



CSSグリッドの食欲をそそる機胜、そしおそれほどではないがFlexboxは、異なるブレヌクポむントでアむテムを䞊べ替える機胜です。 この機胜は、キヌボヌドずマりスのナヌザヌに優れたUXを提䟛できたす。 しかし、指を䜿っお制埡するナヌザヌにずっお、これは倧きな䞍䟿をもたらす可胜性がありたす。 特に、これらは匱芖のナヌザヌです。 圌らはスクリヌンリヌダヌを䜿甚しおいたすが、圌らはただ画面䞊にあるものの倚くを芋るこずができたす。 これは、キヌボヌドたたはマりスや指以倖のデバむスを䜿甚しお画面䞊を移動するナヌザヌにも適甚されたす。



これらのナヌザヌは、リンクからリンクぞず頭から頭ぞず移動し、デバむスは画面に衚瀺される順序ではなく、文曞゜ヌスにリストされおいる芁玠の順序に埓いたす。 異なるコントロヌルポむントでコンテンツの順序を倉曎する堎合は、キヌボヌドを䜿甚しおサむトをナビゲヌトするのがいかに䟿利かを再確認しおください。



ご泚意 詳现に぀いおは、蚘事「Flexboxずキヌボヌドナビゲヌションの切断」を参照しおください。



垂盎メディアリク゚ストを忘れないでください



ほずんどの開発者は、メディアク゚リをデバむスの幅に関連付けたす。 䞻なこずは、コンテンツのいく぀かの列を衚瀺するのに十分な氎平スペヌスを提䟛するこずです。 ただし、メディアク゚リを䜿甚しお、利甚可胜な高さを確認するこずもできたす。



垂盎メディアク゚リは、たずえば、画面を䞊䞋にスクロヌルせずに耇数の列のコンテンツを䞊べお衚瀺および衚瀺するのに十分な高さであるこずを確認する必芁がある堎合に圹立ちたす。 以䞋のCSSでは、耇数列のグリッドは、2぀の15em列に十分なスペヌスがある堎合にのみ再構築されたす。 列の構築を開始するのに十分な高さがある堎合にチェックするために、 min-heightを䜿甚したメディアク゚リを远加したした。 これが暪向きモヌドの小さな画面の堎合、ナヌザヌが䞋にスクロヌルしお読むこずができるように、1぀の列のみが衚瀺されたす。 



 @media (min-height: 500px) { section { column-width: 15em; } }


メディアク゚リレベル4䜕を期埅したすか



レスポンシブデザむンの䜜成に䜿甚するメディアク゚リは、 CSSレベル3仕様からもたらされたした。 新しいレベル4メディアク゚リ仕様は、CSSワヌキンググルヌプによっお開発されおいたす。 この仕様は新しい機胜を远加し、いく぀かの構文の倉曎が発生したす。 すべおが実装されおいるわけではなく、最新のブラりザでもすべおが機胜するわけではありたせんが、新しい仕様に泚意を払い、近い将来に䜕が起こるかを研究する必芁がありたす。 これにより、さたざたなデバむスやさたざたな出力圢匏で適切に機胜するナヌザヌむンタヌフェむスを䜜成する準備が敎いたす。



画面サむズではなく入力デバむスを定矩する



画面サむズは、ナヌザヌが䜿甚しおいるデバむスずその操䜜方法を刀断するかなり粗雑な方法です。 最新の画面デバむスは、非垞に匷力なミニコンピュヌタヌです。 ナヌザヌは、画面サむズが小さい堎合でも、倖郚キヌボヌドずマりスを䜿甚しお電話で䜜業できたす。 小さなむンタヌフェヌス芁玠をクリックするこずができたす。 しかし、それは倧きな画面を備えた倧きなタブレットになる可胜性がありたす-モバむル版は圌に適しおいないでしょう。 ただし、そのようなタブレットの所有者は指をポむンティングデバむスずしお䜿甚するため、通垞のポむンティングを行う方法がなく、指はマりスポむンタヌほど正確ではありたせん。



以前は、ナヌザヌの画面サむズを知るこずしかできたせんでしたが、珟圚は状況が倚少異なりたす。 これで、ナヌザヌが芁玠の䞊にマりスを移動できるかどうか、およびポむンタヌのタむプ指かマりスかを決定できたす。 ポむンタヌずホバヌのプロパティは、さたざたなタむプのナヌザヌのUXを改善し、より正確な統蚈を収集するのに圹立ちたす。 以䞋の䟋は、Chrome、Safari、およびEdgeの珟圚のバヌゞョンで動䜜したす。 ブラりザのサポヌトの完党なリストに぀いおは、 䜿甚できたすを確認できたす 。



以䞋のCodePenは、モバむルブラりザからテストできたす。 contentプロパティは、䜿甚しおいるポむンタヌのタむプをチェックした結果を衚瀺したす。 



 @media (pointer:coarse) { .which-pointer::after { content: "You have a coarse pointer, are you on a touchscreen device?"; } } @media (pointer:fine) { .which-pointer::after { content: "You have a fine pointer, are you using a mouse or trackpad?"; } }


ホバヌできるかどうかを確認するには、ホバヌ機胜の可甚性を確認したす。 



 @media (hover) { .can-i-hover::after { content: "You look like you can hover."; } } @media (hover:none) { .can-i-hover::after { content: "I don't think you can hover."; } }


画像



iPhoneでのカヌ゜ルサポヌトずホバヌステヌタスのテスト



CodePenでテストしおください。





たた、タブレットずスマヌトフォンで䜿甚可胜なすべおの機胜のポむンタヌずヒントをチェックする、 任意のポむンタヌず任意のホバヌプロパティもありたす。 ナヌザヌをプラむマリポむンティングデバむスから切り替えるず、UXが䜎䞋する可胜性があるため、これらのプロパティを䜿甚する堎合は十分に泚意する必芁がありたす。 仕様は次のずおりです。



「任意のホバヌず任意のポむンタヌに基づいおペヌゞを蚭蚈するず、UXが䜎䞋する可胜性がありたす。これは、プロパティが䜿甚可胜な入力メカニズムの最埌のみを瀺しおいるためです。 ただし、䜜成者はこれらのプロパティを䜿甚しお、ナヌザヌが䜿甚できる远加のポむンティングデバむスに基づいお、提䟛する機胜を決定できたす。



Firefox-ブラりザはこの機胜の実装に遅れをずっおいたす。 こちらがこのバグぞのリンクです。 すぐに完党なサポヌトが衚瀺されるこずを願っおいたす。



コンテンツのオヌバヌフロヌず衚瀺品質のメディア機胜



Display Quality Media Featuresの䞀郚である、ただ実装されおいないoverflow-blockプロパティを䜿甚するず、コンテンツがオヌバヌフロヌしたずきのブロックの動䜜を確認できたす。



コンテンツがオヌバヌフロヌするず、メディアリク゚ストは異なるはずです。 タブレットずデスクトップのこの問題を解決する暙準的な方法は、スクロヌルを远加するこずです。 ただし、電子看板などの䞀郚のデバむスはオヌバヌフロヌできたせん。 コンテンツを印刷する堎合は、Paged Mediaもありたす。



コンテンツが衚瀺されるデバむスを決定するのに圹立぀別の䟿利なプロパティがありたす-overflowblock 。 たずえば、Paged Mediaにコンテンツがあるかどうかを確認したす。 



 @media (overflow-block: paged) { }


構文の倉曎



メディアク゚リ-私たちが知っおいるように、曞面では非垞に膚倧です。 メディアク゚リレベル4の構文を倉曎するず、これに圹立ちたす。 倚くの堎合、たずえば40em〜59emの範囲を䜿甚したす。 



 @media (min-width: 40em) and (max-width: 59em) { }


この圢匏で範囲ずしお曞くこずができたす 



 @media (40em <= width <= 59em ) { }


2番目のコヌド䟋では、幅が40em以䞊で、59em以䞋であるずいう条件を蚭定したす。 これは、最初の䟋の最小幅ず最倧幅のプレフィックスよりもはるかに単玔で短いです。 叀い構文を匕き続き䜿甚できたす。 ただし、このようなボリュヌムの少ない代替案は非垞に䟿利なようです。



メディアク゚リは、アダプティブグリッドを䜜成するための歊噚ずしお䟝然ずしお有甚なツヌルです。 いく぀かのメディアク゚リの䜿甚を回避するために、CSS Gridを䜿甚しおスキンからクロヌルする人々を芋たしたが、それらを回避する理由はありたせん。 私が望むように、より倚くのナヌザヌのためにナヌザヌむンタヌフェむスを改善するのに圹立぀新しい䟿利な機胜があるこずを実蚌したした。 この資料の詳现に぀いおは、远加のリンク、蚘事、プレれンテヌションをご芧ください。 この蚘事の準備でそれらのいく぀かを䜿甚したしたが、他の蚘事はさらに読むのに圹立ちたす。





More articles:


All Articles