スタジオコンチーゴ株式会社WEBサイトガイドライン
レギュレーションサイト

レスポンシブ対応

コーディングする順番

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

  1. 1,280px以上のサイト
  2. 1,279px以下、1,025以上に適合したサイト
  3. 1,024以下、601px以上に適合したサイト
  4. 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;
}