【Scss】レスポンシブ対応 メディアクエリ

  • このエントリーをはてなブックマークに追加

以前のWebサイトは「PCで見られる」ことを前提にレイアウトを作成していましたが、最近はユーザーの環境も変化し、スマホやタブレットでWebサイトを見る人が増加しています。
本来であれば、PCとスマホのレイアウトをそれぞれ(2つ)用意する必要があり、デザイン作成時間が2倍になるため、非常に手間がかかってしまいます。
そんな中、1つのレイアウトでどのウィンドウサイズにも柔軟に対応できる「レスポンシブWebデザイン」が注目を浴びています。
今回は、レイアウトをレスポンシブ対応するために必要不可欠なメディアクエリについて説明していきます。

  1. メディアクエリとは
  2. メディアクエリの基本
  3. メディアクエリをScssで定義

 1. メディアクエリとは

「レスポンシブWebデザイン」を作成する上で必要不可欠なCssの機能です。ウィンドウサイズによって適用させるスタイルを変えることができるため、大きいディスプレイ用・小さいディスプレイ用のレイアウトを複数作成する必要が無くなり、非常に便利です。

 2. メディアクエリの基本

Cssのメディアクエリを利用し、ウィンドウサイズによって適用させるスタイルを作成することができます。

●css

@media以外のスタイルは全てのウィンドウサイズで適用されます。また、Cssはより後から読み込まれたスタイルが優先されるため、下記のコードではウィンドウサイズが500px以下の場合、ヘッダーの背景色が緑になるスタイルが適用されます。

●css

下記のコードではウィンドウサイズが500px以下の場合、ヘッダーの背景色が黄色になります。より後に書いたスタイルが適用されるため、スタイルを書く順番には注意してください。

●css

 3. メディアクエリをScssで定義

cssでメディアクエリを用いてスタイルを記述すると、ブレイクポイントを変更する際にメディアクエリを書いた場所全ての変更が必要になるため、直し忘れなどのミスに繋がります。Scssを利用すれば、変数や@mixinを利用することで変更箇所が1カ所になり、直し忘れを防ぎ、コードも綺麗に作成することができます。

ブレイクポイントを定義するために、Webサイトを表示する媒体のウィンドウサイズを大まかにまとめてみました。

媒体ウィンドウサイズ
PC用(大きいディスプレイ)1024px~
PC用、タブレット横画面用768px ~1024px
タブレット縦画面用481px ~ 768px
スマホ縦画面用~ 480px

上記のウィンドウサイズを元に必要最低限のブレイクポイントと@mixinを定義して、メディアクエリの定義ファイルを作成します。

●Scss(ファイル名:_mediaquery.scss)

定義したメディアクエリを利用し、レスポンシブデザインを作成します。
例として、ウインドウサイズによってヘッダーの背景色を変更するScssを作成します。

●Scss

ウインドウサイズを変更すると、ヘッダーの背景色が変わることが確認できます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*