- ベストアンサー
レスポンシブデザインでのブレイクポイントの決め方
神崎 渉瑠（@taloo）の回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
すみません、ブレイクポイントって何ですか？（何を区切るのですか？）
関連するQ&A
- レスポンシブデザイン、メディアクエリの設定について
現在レスポンシブにしているサイトでは480、768、960、でメディアクエリの設定をしています。自分のIPhone4sの実機と各種エミュレータ、シミュレーターと検証したのですが、Xperiaの友人の実機で意図したレイアウトと違っていました。 機種名を聞いて仕様を見ると、解像度（ドット数）*4 HD:1280×720となっています。これは単純にwidth1280pxでの表示になるということなのでしょうか？それとも4で割って320pxという意味でしょうか？ わたしは後者の表示になると思っていたのですが、ワンカラムの設定が二カラムに表示されていて、根本の理解について確認させていただければと思いました。 どうぞ宜しくお願いいたします。
- ベストアンサー
- CSS
- レスポンシブWEBデザインのメディアクエリについて
いつもお世話になります。 レスポンシブWEBデザインでサイト制作を行っています。 メディアクエリについて詳しい方、いらっしゃいましたら教えてください。 フルHD（1080×1920）のスマホのビューポイントをどのように設定するのが適当か悩んでいます。 @media screen and (min-width:480px)and(max-width:1080px) のように設定しようかと思いましたが、iPadminiのように、解像度が1024×768だと かぶってしまい、適当じゃない表示になるのを危惧しています。 実機で試せば良いのですが、どのようにビューポイントを設定しているのか、 是非、参考にさせて頂ければ幸いです。 よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブのデザインについて
ポスポンシブのデザインを設計する際はどのように書いていますか？ iPhone5系などの320×568を基準に作っていますか？ それともシェアが多い375×667を基準ですか？ デザイナーからspのフレームワークをもらったのですが、基準が750pxになっており、750pxではパーフェクストピクセルで表示できるのですが、320×568ではやはりレイアウトが崩れてしまいます。 なぜかというとそもそもボックスがwidth:600pxとなっていてiPhone系ではレイアウトが崩れます。 今回はpcとタブレット兼スマホでブレイクポイントを作っていますので、この場合では750pxではなく画面サイズが小さいスマホ(320px)を基準に作るべきではないのですか？ 320px基準であれば750pxに画面幅が広がっても拡大されるだけなのでレイアウトは崩れないと思うのですが、、、 レスポンシブを初めて作るので勝手がわからず、意味不明な質問かもしれませんが、回答よろしくお願いします。
- 締切済み
- CSS
- レスポンシブ 横1080px高解像度スマートフォン
レスポンシブに挑戦しようとしていますが、 ちょっとよく分からくなってきたので質問させてください。 レスポンシブWEBデザインは、 例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。 @media screen and (min-width: 769px){PC向け} @media screen and (max-width: 768px){タブレット向け} @media screen and (max-width: 640px){スマートフォン向け} しかし、横幅が1080pxもあるスマートフォンが発売されてきましたので、 もはや、横幅ではどんなデバイスなのか分からなくなってきたと思います。 また、スマートフォンが高解像度になっても、 画面自体は小さいので、 スマートフォン用にサイトデザインを最適化する必要は変わりません。 そうすると、ユーザーエージェントで切り分ける旧式のやり方を少なくも併用しなければ、 結局、うまくいかないような気もするのですが、どうなんですかね？ そのあたりについて、どのようにお考えでしょうか？ ご意見お聞かせいただきたくお願い申し上げます。
- ベストアンサー
- CSS
- フレキシブルデザイン、リキッドデザインのimg
初歩的な質問失礼致します。 フレキシブルデザイン、リキッドデザインでは基本的に各要素の幅を%指定すると知ったのですが、<img>タグで記述する画像はどのように幅を指定したらよいのでしょうか？？ また、もしウインドウ幅に合わせて拡大するように指定したい場合、その画像の解像度は、 サイト幅に指定したmax-widthに合わせて作っておくといいのでしょうか？？ どなたか教えていただけないでしょうか？？ よろしくお願い致します。
- 締切済み
- CSS
- レスポンシブデザインで、インラインフレーム
ワードプレスでレスポンシブデザインで、インラインフレームを設置したのですが、 どうもうまくいきません。ＰＣに合わせるとスマホがみだれ、逆にすると逆になります。 ようやくましな形にしましたが、ＰＣ側のインラインフレームの中が左に寄ってしまいます。 ｐｃのメインの幅は600PXです。 それからスマホでスクロールバーでスクロールさせよと CSSハックを設置しましたが、こちらも効きません。 どうしたらよいのでしょうか？ http://demo.kurafukudo.com/pc/ CSS div.frame, div.frame iframe[style], div.frame span { width: 100% !important; } @media screen and (max-device-width: 480px) { .frame div{height:300px; overflow:auto; -webkit-overflow-scrolling: touch;} } HTML <div class="frame"><iframe src="http://demo.kurafukudo.com/p_pc/" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes"style="border-color:#000000; scrollbar-base-color: #ccff99; scrollbar-arrow-color: #0000ff;">このページはインラインフレームを使用しております。未対応ブラウザは閲覧できませんのでご了承ください。 </iframe> 呼び出し先 <table width="90%" > <tbody> <tr> <th colspan="2"height="18"> ＳＯＮＹ</th> </tr> <tr> <td width="50%" height="18">ＳＤＶ13228DJ WB</td> <td width="50%" align="right">100,000</td> </tr> <tr> 省略
- ベストアンサー
- HTML
- レスポンシブWebデザインでテキストの振分について
現在あるPCサイトをスマホにも対応させたいので、スマホ用のファイルを別に作成するか、またはレスポンシブWebデザインにしようと考えております。 そこで疑問に思ったことがあります。 私が把握しているレスポンシブWebデザインのサイトは、例えば住友商事のようなサイトです。http://www.sumitomocorp.co.jp/ パソコンのブラウザで表示している場合、マウスを使ってカーソルを操作してブラウザを縮小すると、レイアウトが可変します。 ※もちろん、スマホで見れば、スマホに最適化された表示になっております。 一方、アマゾンのようなサイトの場合、パソコンでカーソルを操作してブラウザを縮小しても表示は変わりません。 しかし、PCとスマホで異なるデバイスで確認すると、表示しているテキストや画像が異なります。 私の認識では、このようなサイトはPC用とスマホ用で異なるファイルを作成し、PCとスマホで読み込ませるURLを振り分けるていると思っておりましたが、PCで確認してもスマホで確認してもアドレスバーに表記されているURLは同一の物です。 このアマゾンのようなサイトはレスポンシブWebデザインによって作られているのでしょうか？ もし、レスポンシブWebデザインならば、デバイスごとに表示させる画像を振り分けることははもちろんのこと、テキスト（文章）の振り分もできるということなのでしょうか？ レスポンシブWebデザインで画像もテキストも振り分けられるなら、PC用とスマホ用でファイルを分ける必要はないかと思うので、私が作成したPC用のサイトを、レスポンシブWebデザインにしようかと思っております。 以上となります。 どのようなご回答でも良いので、また質問の内容とはそれてしまってもよいので、なにかしらご回答を頂けると幸いです。 宜しくお願い致します。
- 締切済み
- CSS
- テーブル固定幅のサイトをスマホ対応させるには？
PC用ページ(テーブル固定幅のデザイン)を作ったのですが、 スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。 viewportのmetaタグをhead内に記述しても何も変わりませんでした。 テーブルの幅はwidth="515" タグは<meta name="viewport" content="width=515px"> <meta name="viewport" content="width=device-width"> それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理) 何が間違っているのでしょうか？？ どうすれば、スマホで画面に収まるようにできますか？
- ベストアンサー
- HTML
- ブログパーツをレスポンシブ化したい
下記のようなブログパーツをレスポンシブ化したいです。 <script type="text/javascript" src="URL&width=500&height=500"></script> 上記のようにPC用サイトにあわせてサイズを指定すると、スマホのページではみ出してしまいます。 スマホのページでもPCのページでもサイトの幅にぴったり収まるように幅を自動調整させたいのですが、どうすればいいでしょうか。
- ベストアンサー
- JavaScript
- レスポンシブ対応のサイト制作について
レスポンシブ対応サイト制作中の者です。制作自体は以前から行っていますので、それ自体に疑問はないのですが、たまにPCでウィンドウ幅を変更してもスマホ画面や、タブレット画面にならないサイトを見かけます。これはどのように実現させているのでしょうか？その場合、chromeの要素検証でスマホ画面環境を作ってやると、きちんとスマホ対応画面になるのですが。 よろしくご回答お願いいたします。
- ベストアンサー
- CSS
補足
すみません。それも書いてなかったですね(^^ゞ PCとタブレットとスマホで区切るつもりです。