レスポンシブ対応マニュアル・ガイド

コーディングする順番

以下に記載の順序で進めてください。

1,280px以上のサイト
1,279px以下、1,025以上に適合したサイト
1,024以下、601px以上に適合したサイト
600px以下に適合したサイト

ブレイクポイント

特に指定のない限りは、以下の通りのブレイクポイントとします。

 .com ルートディレクトリー
└ css
　　├ style.css--------：1,280px以上
　　├ pc.css-----------：1,279px以下、1,025以上
　　├ tablet.css-------：1,024以下、601px以上
　　└ smart.css--------：600px以下

要素の表示・非表示の仕方

/* style.css B-04. main共通 */
.sp{
　　display:none;
}

/* tablet.css D-04. main共通 */
.pc{
　　display:none;
}
.sp{
　　display:inherit;
}

<p class="pc">PC用の説明文</p>
<p class="sp">SP用の説明文</p>

上記の通り、.pc、.spという2つのクラスを事前に用意してあります。基本的にはこのクラスをそのまま使用してください。別途で、表示、非表示の切り替えが必要な場合は適宜調整してください。

.pc: 1,025px以上で表示、1,024px以下で非表示
.sp: 1,024px以下で表示、1,025px以上で非表示

画像の横幅の考え方

レスポンシブ対応サイトで画像を切り替えて使用する場合（PC用とSP用で分けて準備する）もありますが、基本的には同じ画像を使用します。PCサイト用に画像サイズを記述して、なおかつスタイルシートで画像サイズを調整してください。

/* html */
<img src="/images/common/logo.png" width="400" height="300" alt="企業ロゴ">

/* css */
img {
　　max-width: 100%;
　　height: auto;
}