レスポンシブデザイン

レスポンシブデザインとは

レスポンシブデザインは、PC・タブレット・スマートフォンなど閲覧ユーザーの画面サイズに合わせてページレイアウトを最適化するデザインのことを指します。

レスポンシブデザインの初期設定

まずはhead内にviewportの設定を記述します。

viewportとは様々なデバイスにおける表示領域のことです。

特に何も指定しない場合は、スマートフォンで表示した時にデスクトップサイトの横幅に合わせてすべてそのままの大きさで表示するので文字が小さくなり非常に閲覧しづらい状態になります。

そこでHTMLの「head」内に下記の<meta>タグを記述して表示領域の横幅を合わせます。

<meta name="viewport" content="width=device-width,initial-scale=1">

メディアクエリとブレイクポイント

メディアクエリとは

メディアクエリー（Media Queries）は、 WEBページが表示された画面サイズに合わせて適用するCSSを切り替える機能です。

ブレイクポイントとは

ブレイクポイントとは、適用するCSSを区切る位置のことをと言います。

max-width: ◯◯pxの◯◯pxの部分がブレイクポイントに当たります。

メデイアクエリの書き方

メディアクエリーはCSSに記述していきます。

まずは「@media」と書いて「メディアクエリーを書きます」という宣言をします。

続いて「max-width」もしくは「min-width」で幅を指定して、各幅ごとに適用したいCSSを記述していきます。

その際、上に書かれているCSSは継承されるので、変更を加えたい部分のみを指定していきます。

PC基準でコーディングする場合

PCサイズのCSSを記述（実質1025px以上）

@media screen and (max-width: 1024px){
 タブレットサイズのCSSを記述
}
@media screen and (max-width: 599px){
 スマートフォンサイズのCSSを記述
}

SP基準でコーディングする場合

PCのCSSを記述した下にメディアクエリでタブレットサイズのCSSを記述し、更にその下にスマホサイズのCSSを記述する方法が一般的ではありますが、近年スマホでWebサイトを見ることが増えているため、モバイル優先で制作することも多く、先にスマートフォンのCSSを記述してからタブレット、PCを記述していく記載方法もあります。

目的やターゲットに応じてPCを基軸にするか、SPを基軸にするかを決めると良いです。

スマートフォンサイズのCSSを記述（実質599px以下）

@media screen and (min-width : 600px){
 タブレットサイズのCSSを記述
}
@media screen and (min-width : 1025px){
 スマートフォンサイズのCSSを記述
}