レスポンシブ対応を見越したHP作りの手順

こんにちは、スウェルデザインのｗです。

モバイルフレンドリーの対応が当たり前の時代になりました。
スマホで見づらいサイトはつまはじきにされてしまいます・・

そこでレスポンシブ対応を想定したHP制作の手順
つまり、スマホ版のHPを作らなければならなくなった時困らない様に
レスポンシブにしやすい土台のHP作りをしていきましょうという内容です。

レスポンシブサイトの土台作り

デザイン・構成

グリットシステムを基にデザインしていく

グリットシステムとは？
端末によって均等に表示されるように、ページのデザインや構成はグリットを基にして練っていきます。
レスポンシブデザインに特化したGrid Systemは複数あるので、作りたいサイトに合ったものを選びます。

一部紹介
Bootstrapでグリッドシステムだけ使いたい場合、カスタマイズしたものをダウンロードすればいい。
960 Grid System：ページの幅960pxを基準にして、設計するグリッドデザインを紹介

コーディング

viewportの設定

モバイルブラウザでのレイアウトを制御するためにmetaタグのviewportを使います。
下記ソースをheader内に記述
アクセスしたデバイスの横幅に合わせるためにwidth=device-widthを指定。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
 
<!--最小限のビューポート設定-->
<meta name="viewport" content="width=device-width">

CSSの個別指定

アクセスしてきた端末の画面サイズに合わせて読み込むCSSを変えます。
基本のCSSとその他複数で分け、必要な部分のみCSSの読み込みを行い上書きするという仕組みです。
①下記ソースをheaderに記述

<link rel="stylesheet" media="all" type="text/css" href="style.css" />
<!-- ※デフォルトのスタイル（style.css） -->
<link rel="stylesheet" media="all" type="text/css" href="tablet.css" />
<!-- ※タブレット用のスタイル（tablet.css） -->
<link rel="stylesheet" media="all" type="text/css" href="smart.css" />
<!-- ※スマートフォン用のスタイル（smart.css） -->

②各CSSに下記コードを記述
※必ず｛｝の中にCSSを書き込むこと。

@media screen and (min-width:961px) {
/*pc用のcssを記述*/
}
  
@media only screen and (min-width:376px) and (max-width:960px) {
/*tablet用のcssを記述*/
}
 
@media screen and (max-width:375px) {
/*スマホ用のcssを記述*/
}

可変する画像の設定

端末の画面によって画像が正しく表示されるようにCSSへ指定します。

img {max-width:100%;} 

画面サイズにより表示したくない要素の処理

下記コードを各CSSにて記述
※それぞれのCSSで表示非表示を両方記述しなければPC版で消したままスマホ版でも表示されないので
スマホ版の方にはdisplay:block;などで表示させること

img {display:none;}