レスポンシブWebデザインとは
レスポンシブWebデザインが使われる場面
現在のフロントエンド開発においては、デスクトップブラウザだけでなく、
スマートフォン等のモバイルブラウザへの対応も必要となっています。
他にもタブレットや、ゲーム用のデバイス等の専用ブラウザを対象とすることもありますよね。
単純にデバイスごとでディスプレイのサイズや仕様も異なりますから、ケースによって想定していた通り描画されていない!というのはよくある話です...。
じゃあどうするかとなったときに、単に対応する必要のあるデバイスごとに固有のビューページを用意すれば良いかと言えばそれは不可能な場合が多いです。
デバイスと一括りに行っても近年は多様化していて1つ1つに最適化することは時間的に難しいことが多いです。
じゃあどうするの?ってなったときにアプローチの1つとして使われるのがレスポンシブWebデザインとなるわけです。
具体的にレスポンシブWebデザインとは何
レスポンシブWebデザインは2010年ごろからあるスクリーンサイズ
を基準としたテクニックです。
レスポンシブの3つの要素
レスポンシブには以下の3つの要素があります。
メディアクエリ (Media Queries)
フルードグリッド (Fluid Grid)
フルードイメージ (Fluid Image)
Fluid(流動的)という言葉通り、テキストや画像、レイアウトをスクリーンサイズに対して動的に変化させる
ことによって
サイズに対応したコンテンツの見せ方をさせることになります。
具体的にはメディアクエリ
を用いて、指定条件下でのスタイル、振る舞いを指定することが一般的ですね。
指定条件というのは、基本的にはスクリーンサイズの幅を指定することが多いです。
またこのスクリーンサイズの幅の線引きのことをブレークポイント
といったりします。
以下例のコードです
/* ブレークポイントを900pxに指定(900pxより広い場合のスタイル) */
@media all and (min-width: 900px) {
.column {
width: 30%;
}
}
このようにして組み合わせていくことで、レスポンシブに対応したWebサイトを作成していきます。
長くなりそうなのでpart1はこの辺りで切っておきます
Author And Source
この問題について(レスポンシブWebデザインとは), 我々は、より多くの情報をここで見つけました https://qiita.com/YAMAO_123/items/019b4c102323193193f4著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .