質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

2回答

2086閲覧

レスポンシブのサイトを作る時、モバイルファーストで作成する場合、 メディアクエリーを使わない初期のCSSは横幅を何PX基準にしていますか?

退会済みユーザー

退会済みユーザー

総合スコア0

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

1クリップ

投稿2015/06/21 09:43

レスポンシブのサイトを作る時、モバイルファーストで作成する場合、
メディアクエリーを使わない初期のCSSは横幅を何PX基準にしていますか?

今までは320か360が多かったそうですが、375を基準としたほうが良いのでしょうか?
それとも一番小さいポイントを基準にしたほうが良いのでしょうか?

http://webbu.jp/responsive-design-575より

「6」および「6 plus」の登場により、レスポンシブを取り巻く環境が若干複雑になりました。
まず、iPhone6の液晶は横750×縦1334pxです。DevicePixelRatioは「2」のままですので、横幅は375pxとしてデザインする必要が出てきました。レスポンシブデザインの場合、メディアクエリーなどでデバイスの横幅に応じたスタイルを複数用意するわけですが、これまでの360pxや320pxよりも大きい375pxも考慮する必要があり、制作の手間を増やす可能性があります。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

スマホは自然な変更に任せて、特に考えず、
下記の三つだけをブレークポイントとするということですね。

案件によって変わります。
基本的には出して頂いた3つで作成しております。

するとメディアクエリーの上にあるベースのCSSは、768pxを基準として作ったワイヤーフレームを参考にコーディングするということでしょうか?

はい。768pxを基準にコーディングします。
但し案件がIE8対応等が発生した場合はモバイルファーストでは作成しませんので基準が1200px以上になります。

投稿2015/06/22 05:53

nanndemoiikara

総合スコア775

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/22 06:37

> はい。768pxを基準にコーディングします。 但し案件がIE8対応等が発生した場合はモバイルファーストでは作成しませんので基準が1200px以上になります。 windowsphoneがIE9以上でIE8はPCにしかないので、 IE8にも対応する場合は、デスクトップファーストにするということですね。 その場合は1200pxを基準のCSSとしてまず記載し、 下記二つをブレークポインとにするのでしょうね。 @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; }
guest

0

私の環境では、768pxを基準とします。
iPad等のタブレットもありますし、社内で共有する時に「Bootstrapと同じ!」と言っておけば伝わる為です。
今のところ768px基準で特に困りませんでした。。。

投稿2015/06/22 02:17

nanndemoiikara

総合スコア775

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/06/22 02:30

ありがとうございます。 ベースのCSSのサイズが768pxで、ブレークポイントがブートストラップと同じという事でよろしいでしょうか? するとスマホを基準とするのではなくタブレット端末を基準にされているということでよろしいでしょうか? モバイルファーストで一番小さいスマホの横幅をベースにして、メディアクエリーでその他のサイズのCSSを設定するのかと思ったのですが、そうではないということなんですかね。
nanndemoiikara

2015/06/22 02:46

そうですね。 ブレークポイントは基本的にbootstrapと同じで作成しております。 スマホ基準では無くタブレット端末を基準に作成しております。 > これまでの360pxや320pxよりも大きい375pxも考慮する必要があり、制作の手間を増やす可能性があります。 こちらの記述にもある様に制作の手間を増やさない為にも、一番小さいスマホの横幅をベースにする必要は無いのではないかと思います。
退会済みユーザー

退会済みユーザー

2015/06/22 05:47

スマホは自然な変更に任せて、特に考えず、 下記の三つだけをブレークポイントとするということですね。 @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } するとメディアクエリーの上にあるベースのCSSは、768pxを基準として作ったワイヤーフレームを参考にコーディングするということでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問