スマートフォン中心のモバイルファーストの時代になり、スマートフォンで見やすいデザインを追求することはユーザビリティを高める上で重要な対策です。WEBデザイナーやWEB担当の方で、WEBデザインを担当する方必須のスキルですので、今のうちに習得しておくことをオススメします。レスポンシブ対応に必要なコードで、スマートフォンので在位を最適化するにはメディアクエリという方法を使います。
スタイルシート（CSS）にmedia query を設定する
メディアクエリはデバイスの大きさに応じてでデザインを分けることができるCSSで、WEBデザインの現場では、必ずと言って良いほど使われる手段です。実際のコードを交えながらご説明します。
@media (min-width: 1100px) {
/* 1100px以上用のスタイル */
デスクトップのデザインを指定する
}
@media (min-width:1099px) and (max-width:768px) {
/* 1099〜768pxまで用のスタイル */
画面幅の狭いノートパソコンやタブレット端末用にスタイルを指定する
}
@media (max-width: 767px) {
/* 767px以下用のスタイル */
主にスマートフォン時のスタイルを指定する
}
上記の場合、1100px以上の場合は、デスクトップ用のデザインを作り、1099ピクセルから768まではiPadや画面幅の狭いノートパソコンのような端末に適用するデザインを付けていきます。最後に767px以下の場合は、スマホ時のスタイルを適用しており、ここにスマホ時のデザインを随時追加していきます。
このようにサイトを作成する場合は、各種デバイスに応じたデザインをCSSでメディアクエリを設定して分岐したデザインをつけていくことで、スマートフォンやiPad、デスクトップに相応しいデザインをそれぞれつけていきます。
こんな方にオススメです
- WEBデザインをはじめたい
- 自作のWEBサイトを作りたい
- レスポンシブ対応の手段が知りたい
- WEBデザイナーになりたい
- 昔のサイトのデザインを自力で修正したい
今回の手段は、WEBデザインの場面で即戦力となる手段です。CSSを駆使することで、ユーザーの使い勝手を改善し、流入やサイト改善を行うことができます。レスポンシブデザインに必要な、メディアクエリのご紹介でした！
コメント