ウェブのあれこれ
ウェブを活用したいひとのためのブログ
レスポンシブWEBサイト制作時の3つの基本
2015/06/08 HTML/CSS

レスポンシブWEBサイト制作時の3つの基本

Googleがスマホでの検索結果に「スマホ対応」を考慮するとの発表もあり、スマホ対応のWEBサイトがより重要になってきましたね。スマホ対応サイトを作成する際の方法としてレスポンシブでサイトを構築する方法がよくとられます。そんなレスポンシブサイトを作成する際の基本中の基本設定を紹介

1.「viewport」の指定

スマートフォンなどのブラウザに利用されている「webkit」エンジンでは画面の幅の基準を「viewport」で指定することができます。
数値で320pxなどと指定してもいいのですが、スマートフォンは端末などにより画面サイズがまちまちなので、端末の画面サイズに最適な幅指定を行うために、以下のような指定をすることをお勧めします。
<meta name="viewport" content="width=device-width">

metaタグの指定なのでheadタグの中に記述しましょう。

2.フォントサイズの指定

PCとスマホではフォントサイズに若干差異があります。なるべく差異をなくすために以下のようなスタイルを設定するとよいでしょう。
html{
    font-size: 62.5%;
}
body
{
    font-size:14px;
    font-size:1.4rem;
}
htmlに指定している「62.5%」というのはブラウザの基準フォントサイズが16pxなので、基準フォントサイズを10pxにするという意味です。
bodyではpxとremの両方を指定していますが、remを利用できないブラウザを考慮してpxとrem両方で指定しています。

3.メディアクエリを利用したCSSの切り替え

レスポンシブデザインは基本的に画面幅によってレイアウトの段組みを調整しますが、スマホサイズのとき、PCサイズのときなど画面サイズによってスタイルを切り替えたい場合はメディアクエリを利用すると簡単に実現できます。
/* スマホサイト用スタイル */
@media screen and (max-width: 480px) {
    スマートフォン表示時のスタイル
}
「(max-width: 480px) 」の部分で画面480pxまでの画面幅に適用という意味になります。
「max-width」のほかに「min-width」も指定できるので組み合わせ次第で細かな調整ができます。

まとめ

上記3点をまとめるとこんな感じ

HTMLの基本

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta name="viewport" content="width=device-width">
   </head>
   <body>
    </body>
</html>

CSSの基本

html{
    font-size: 62.5%;
}
body
{
    font-size:14px;
    font-size:1.4rem;
}

/* スマホサイト用スタイル */
@media screen and (max-width: 480px) {
    スマートフォン表示時のスタイル
}
基本中の基本の紹介ということで3点だけ紹介しましたが、レスポンシブサイト制作時に考慮する点は結構あります。
前提をしっかりと考えておくことで、レスポンシブサイト制作の難易度は大きく変わってきますが、基本中の基本はしっかりと押さえておきましょう。
Provided by Revolme inc.
revolme.co.jp