【Guide】スマホサイトの作成・レスポンシブデザイン

Posted on 2015-06-05
Last updated on 2017-06-01

こんにちは（・∀・）

レスポンシブデザインのWebサイトもだいぶ増えてきました。そこで今回はスマートフォン、タブレット、PCに対応したWebサイトをレスポンシブデザインで作りたいと思います。

レスポンシブデザインでWebサイトの作成

ブレークポイント

レスポンシブデザインでWebサイトを作る際に決めなければならない事があります。それはブレークポイントの値です。ブレークポイントとはデバイスサイズによってCSSを個別に適用させるために指定した画面サイズの値のことです。メディアクエリで指定します。ブレークポイントのデバイスサイズの値は特に決まっている訳ではなく、また、何分割にするのかも自由です。

メディアクエリでmin-width:769pxで指定した値は769px以上のデバイスサイズに適用されます。max-width:768pxは768px以下のデバイスサイズに適用されます。

CSSサンプル


/*画面サイズ768px以下用*/
section {
  ○○○○: ○○○○;
}
/*画面サイズ769px以上用*/
@media (min-width: 769px) {
section {
  ○○○○: ○○○○;
}
/* ** */}

ブレークポイントの目安としてですが、デバイスサイズを決めるとしたら、スマートフォンたて320px～480px、スマートフォンよこ・タブレットたて481px～768px、タブレットよこ・PC769px～が現在一般的に使われているデバイスサイズではないでしょうか。なのでこの辺を基準に考えたら良いのではないかと思います。

ちなみにサンプルのブレークポイントmin-width:769pxは、768pxまでの画面サイズと769px以上の画面サイズでモバイル用とPC用で分けております。

ブレークポイントがいくつもあると管理が面倒だなって場合、メジャーブレークポイントを1つ決めて必要に応じてマイナーブレークポイントを作ればいいと思います。その際のメジャーブレークポイントは現在のところmin-width:769pxが良いと思います。768px以下はモバイル用、769px以上がPC用とすればいいのではないでしょうか。

HTMLのサンプルコードはスマホサイトの作成・基本編にあるHTMLコードをご参照ください。

スマホサイトの作成・レスポンシブデザインは以上になります。レスポンシブデザインでは、横幅は可変サイズにするのがポイント！です^^

9月更新・前月(8月)の人気記事トップ10 09/02/2024