- ベストアンサー
レスポンシブデザイン
スマホとＰＣで同一ＵＲＬにして レスポンシブデザインでｃｓｓを変えたいのですが それぞれどのサイズにすればいいのでしょうか？ 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて ５００以上だと大きく表示されるようにしています。 私のスマホ（アンドロイド）・ＰＣなら問題ないのですが 一般的な幅を教えてください。
- mgmmxlsqdyycu
- お礼率94% (123/130)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
一般的には、下記のような解像度（幅）になります。 iPhoneSE……320px Android……360px iPhone6/7……375px iPhone6/7 Plus……414px iPad……768px ノートパソコン……1366px デスクトップパソコン……1920px スマホとパソコンでCSSを分けるのであれば、 @media screen and (max-width: 767px) {} @media screen and (min-width: 768px) {} iPadの768pxが無難かなと思います。この書き方だと、iPadからはパソコン用のCSSになります。あるいはiPadよりも小さいタブレットにあわせて、600pxという数字も考えられます。
関連するQ&A
- レスポンシブデザインのjQueryの書き方
WEB初心者ながら、レスポンシブデザインに対応したホームページを制作したいと思っています。 スマホサイズのときのみ、ドロワーメニューにしたいのですが、jQueryをindex.htmlのheadに適応するとＰＣサイズの画面の時にも、そのjQueryが適応されてしまいます。 cssは、@media only screen and (min-width: 640px) { の書き方でひとつのファイルで行っております。 スマホサイズのときだけjQueryを適応させるにはどのような書き方をすればよろしいのでしょうか？ 宜しくお願いいたします。
- ベストアンサー
- CSS
- このｓｃｃを一つにまとめることはできますか？
@media screen and (min-width: 500px) { * { font-size: 2em; } @media screen and (min-width: 500px) { p.p_1{ font-size:2em; } @media screen and (min-width: 500px) { th { font-size:2em; } このｓｃｃを一つにまとめることはできますか？ ブラウザのデバッグ画面で見ると @media screen and (min-width: 500px) @media screen and (min-width: 500px) @media screen and (min-width: 500px) th { font-size: 2em; } になっています。
- ベストアンサー
- CSS
- レスポンシブデザイン？
cssで font-size: 0.85em; にしていて、スマホで見ると文字のサイズはちょうどいいのですが 同じサイトをＰＣで見ると文字のサイズが小さすぎて見づらいです。 一つのサイトを二つの媒体（スマホ・ＰＣ）で見る際に 文字のサイズを変える場合は レスポンシブデザインと言うのを学べばいいのでしょうか？
- ベストアンサー
- CSS
- レスポンシブデザインにする方法、参考サイト
現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 htmlの<head>部分に <link rel="stylesheet" media="screen and (min-width:1024px)" type="text/css" href="css/layout.css"> <link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/tabletcss"> <link rel="stylesheet" media="screen and (min-width:480px)" type="text/css" href="css/smart.css"> と記述し、cssを３種類用意し、各cssに @media screen and (min-width:480px) { img{ max-width: 100%; height: auto; width /***/:auto; }・・・以下各要素省略 } とそれぞれ記述すると、<head>部分で一番下にリンクしたsmart.cssの内容が1024pxで設定してあるはずのPCでの表示に影響してしまいます。 リンクの貼り方はコリスさんのところで参考にしたと思うのですが、どこが問題でしょうか？ それ以外の画像や要素の%表示のことはわかるのですが、ここが肝心だと思うので..恐らく一番基本的なことなので調べても省略してあるサイトもあるのかもしれません。 一度覚えてしまえば使い回し出来ると思うのですが、この質問への答えでなくても、参考になるサイトがありましたらご教示下さい。ちなみに省略してるだけでreset.css等は設定してあります。
- ベストアンサー
- CSS
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せのcss記述について iPhone（320px）とAndroid（推定360px）の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか？ ２：Media Queriesについて １のcssの書き方がわからないので、画面サイズによって Media Queriesを書き分ければ早いかなと思い、 iPhone用とAndroid用で別で記述してみたのですが、 画面サイズを指定してるにも関わらず、片方のMedia Queriesが 両方のスマホに反映してしまいます。 下記、Media Queriesの記述内容です。 iPhone用（幅320px） @media screen and (max-width: 320px) { Android用（幅：360px） @media screen and (max-width: 360px) and (min-width: 321px) { 上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F です よろしくお願いします。 よろしくお願いします。
- 締切済み
- CSS
- レスｐンシブのＣＳＳについて
レスポンシブデザインのコーディングをしています。 CSS上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。 @media screen and (max-width: 640px) { ～ } Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、 Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。 縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている ようなのですが、ＣＳＳで回避する方法はありますでしょうか。 それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。
- 締切済み
- HTML
- レスポンシブデザインで、インラインフレーム
ワードプレスでレスポンシブデザインで、インラインフレームを設置したのですが、 どうもうまくいきません。ＰＣに合わせるとスマホがみだれ、逆にすると逆になります。 ようやくましな形にしましたが、ＰＣ側のインラインフレームの中が左に寄ってしまいます。 ｐｃのメインの幅は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
- HTML５とCSS３のレスポンシブデザインについて
今、wordpressでHTML５とCSS３のレスポンシブデザインに独学で、挑戦しています。 タグを手書きで書いているのですが、分からない点があります。 ▼MENU▼というメニューバーは、PCでは見えない状態にしたいのですが、なかなか上手く行かず、PCで見えてしまいます。 display:none;にしたりして。ブラウザで確認したりしましたが、ずっと見える状態になってしまいます。 どこか間違いのタグがあるのでしょうか？？ 教えていただけると嬉しいです（●＾o＾●） ↓ナビゲーションバーのタグ↓（PC） #menu ul{ width:100%; margin:0; padding:0; color:#000; background:#000; } #menu li{ list-style:none; border-top:2px solid #FFF; } #menu li a{ padding:16px 20px; display:block; text-decoration:none; background:#000; color:#FFF; } .togmenu{ padding:16px 20px; } ↓PCでは非表示になるはずのMENU↓（PC） .menubtn{ display:block; background:#000; color:#FFF; } ↓スマホで表示されるタグ↓ @media only screen and(min-width:500px){ .menubtn{ } .togmenu{ display:none; background:#000; } #menu li{ display:inline-block; border:none; } } ★上記のレスポンシブデザインで制作中のサイトURL★ http://fashioncode.jp/
- ベストアンサー
- HTML
- widthでcss,js切換可能でしょうか。
【Web製作】widthでcssやjavascriptを切換えたいです。 マルチデバイス対応のWebSiteを製作しようと思うのですが、 widthによって、cssやjavascriptを切り替えたいのですがどのようにすれば良いでしょうか。 横幅が【959px以下】の場合は【style-1.css】と【base1.js】 横幅が【960px以上】の場合は【style-2.css】と【base2.js】を適応させたいです。 htmlに <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> <link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> <link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> と記述してもうまく動作しません。(確認は【PC】【iPhone】【iPad】です。) 私の解釈ですと、 1.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 959px)"> ↑PCの場合、ウィンドウサイズが959px以下の場合【style-1.css】 2.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 960px)"> ↑PCの場合、ウィンドウサイズが960px以上の場合【style-2.css】 3.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 959px)"> ↑PC以外で、画面表示サイズが最大959px以下のデバイスの場合【style-1.css】 4.<link href="style-1.css" rel="stylesheet" type="text/css" media="only screen and (orientation: portrait) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのポートレートモードの場合【style-1.css】 5.<link href="style-2.css" rel="stylesheet" type="text/css" media="only screen and (orientation: landscape) "> ↑PC以外で、画面表示サイズが最大959px以下ではないデバイスのランドスケープモードの場合【style-2.css】 と、解釈し指定しているのですがうまく動作しません。 そしてもう一つなのですが、 widthやポートレートモード、ランドスケープモードを判別しjsを切り替える事は可能でしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- @media 画面の幅によってcssを分ける場合
4.6インチのスマホを使っています。 cssで「スマホ内のサイズなら」とやりたいのですが どのようにすればいいのでしょうか？ サンプルコードを拾ったのですが <style> @media (min-width: 0px) and (max-width: 480px) { h1 { color: red; } </style> この形式しかわかりませんでした。 andではなく、内とするにはどうすればいいでしょうか？ ちなみに今は、480pxでやりましたが この数値は適当です。 スマホのサイズはいくつなのでしょうか？ とりあえず4.6インチの場合を教えてください。
- ベストアンサー
- CSS
お礼
ありがとうございます。