- 締切済み
レスポンシブWEBでありますけど
スマートフォンとかに対応する為のもんらしいのですが、 色々調べるとCSSのwidthが関わっているらしいですが、 イマイチ解りません。 解りやすい解説をできましたらお願いします。
- みんなの回答 (2)
- 専門家の回答
関連するQ&A
- レスポンシブWeb 右側の表示が切れてます
レスポンシブWebデザインのサイトを作っています。 スマホの画面では右側の表示がきれてしまいます。 marginとpaddingは左に効いても、右には効きません。 PCの画面では想定どおりに表示します。 <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/common-l.css"> <link rel="stylesheet" href="css/common-s.css" media="only screen and (max-width:599px)"> PC用のcommon-l.cssを使わずスマホ用のcommon-s.cssだけを使うと表示は正常 でmarginとpaddingも効きます。common-l.cssが影響しているのはわかりました。 ためしにPC用のwidthを削るとスマホ画面の表示は正常になりました。当然PC用 画面の表示はおかしくなりますが。 なお「width: 650px;」を「width: 72.22%;」にしても結果は同じです、 //// PC用 common-l.css ////////////////// #content{ float: left; width: 650px; ←この行を削るとうまくいきます background-color: #FFFFFF; } //// スマホ用 common-s.css ////////////////// p{width: 100%;} #content{ width: 100%; background-color: #FFFFFF; margin: 10px 50px 10px 10px; } 原因まではわかりましたが、対策がわかりません。PC用とスマホ用の両方の表示を まともにするにはどうすればいいでしょうか? 心当たりがあればお答えください。
- ベストアンサー
- CSS
- webレスポンシブ
新たに問題が出てきまして、 iphoneの表示で確認した所、 footerの画像が消えてくれません。 [問題の箇所] Media QueriesにてCSS /*=============================================== 画面の横幅が320pxまで ===============================================*/ @media screen and (max-width:320px){ footer{ background-image: url(images/footer/footer_wood.jpg); display:none; } どうぞ宜しくお願いします。
- 締切済み
- デザイナー・クリエイティブ職
- レスポンシブwebデザインでのIE対応について
レスポンシブwebデザインでサイト制作する際、CSSのIE対応はどこまでやるべきか悩んでいます。 お詳しい方々、是非アドバイスをお願いします。 現状の対応としては・・・ IE9 → 他ブラウザ同様にレスポンシブ対応 IE8 → レスポンシブ非対応・IE専用CSS(PCサイズ版)を適用 IE7 → 完全無視 (IE7はttp://www.ajike.co.jp/2012/08/browse_share201207/やその他複数のデータを基に、完全無視で問題ないと判断しました) としております。 そこで作っていてふと想ったのですが、タブレット端末やスマートフォン端末では実質的にIEではなくなるので、結局IE9をレスポンシブ対応させる意味がないのではないか? なら、IE8と同様にIE用のCSSを適用させるだけで良いのではないか? と想ったのですが、どうなんでしょうか? ここはやはり将来性を鑑みてIE9は現状のままレスポンシブ対応させておくべきなのか・・・ それともIEは9だろうと8だろうと一括でIE専用CSSを適用させてレスポンシブ対応させないのか・・・ 初心者の私にはIE用のCSSですら恐ろしくめんどくさいというか難しく、IE9をレスポンシブ対応させるだけでも四苦八苦しております。。。 いったいどうしたら良いでしょうか? 是非ぜひ、ご教授願います。
- ベストアンサー
- CSS
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 1:左右中央寄せのcss記述について iPhone(320px)とAndroid(推定360px)の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか? 2:Media Queriesについて 1の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
- レスポンシブWebとjQuery Mobile
WebDesigning誌のバックナンバーを追って 独学しています。 別の号の特集でそれぞれ レスポンシブWebデザインとjQuery Mobileが 出てきたのですが、 レスポンシブWebデザインは端末によって 違うCSSを適用させてレイアウトを 変えるので、スマートフォン向けにすることも できるということだと思うのですが、 jQuery Mobileもスマートフォン向けのようで、 2つのやり方を、どう使い分けたらよいのか わかりませんでした。 それぞれが、どのような用途に適しているのか 教えてください。
- ベストアンサー
- その他(プログラミング・開発)
- レスポンシブwebデザインをIEに対応させる方法
レスポンシブwebデザインのIEへの対応について質問です。 XHTMLで作成したHPをメディアクエリを使用して、レスポンシブwebデザインにしたのですが、 IE8以下で全くCSSを読み込みません。 いくつかのHPを見て、header内に <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> を記述しているのですが、それでもうまくいきません。 CSSは外部ファイルで読み込ませてあり、 <link rel="stylesheet" media="only screen and (min-width: 481px)" href="style.css" /> このような形で記述してあります。ですので、 http://www.imaginationdesign.jp/blog/html5css3/1592/ これとも違うようですし、原因がわかりません。 どなたか原因がお分かりになられる方おりますでしょうか?
- 締切済み
- CSS
- レスポンシブWebデザイン習得へのステップ
レスポンシブWebデザインを習得したいと考えています。 現在、実務で使っている手法は2005年ごろ「ウェブ標準」という言葉が流行していた頃の XHTML+CSSをなんとなく使っている程度(極めていない)なのですが、 ステップとしては、 1. HTML5+CSS3の基礎 2. スマートフォン向けサイト構築の基礎(モバイルファーストという観点から) 3. レスポンシブWebデザインの具体的な手法 という風に身につけていく必要があると考えています。 手順として正しいでしょうか?
- ベストアンサー
- CSS
- レスポンシブ対応の表 センターからズレる
レスポンシブ対応の表を作成したのですが、640px以下になるとテーブルがセンターから少しズレています。 原因が分からないのです。どうかアドバイスをお願いします。 CSS table { width: 80%; margin: 20px auto; } .tbl td { width: 50%; border: solid 1px #ccc; padding: 10px; } @media screen and (max-width: 640px) { .tbl { width: 80%; } .tbl td { border-bottom: none; display: block; width: 100%; } } HTMLタグ <table class="tbl"> <tr> <td>01</td> <td>02</td> </tr> <tr> <td>03</td> <td>04</td> </tr> <tr> <td>05</td> <td>06</td> </tr> </table>
- ベストアンサー
- CSS
- レスポンシブがよくわからない
■質問1 PC、タブレット、スマホで一つのhtmlとcssでレスポンシブに変更する場合、 @media screen and (min-height: 600px) を使って変更すると説明している解説サイトが多いです。 しかし端末は年々高解像度になっていますし、解像度は端末毎にみんなバラバラですよね? 解像度が低いとスマホ、中位だとタブレット、高解像度だとPCみたいな別け方ですが、 最近のスマホはかなり高解像度でPC並だと思うのですが、なぜこのcssで 振り分けができるのでしょうか? 自分が思うのは、スマホの横解像度が1024pxだったとしてもスケールが影響して @media screen and (min-height: 600px)に収まるようになっているとかでしょうか? このへんを説明しているサイトがなく、単に@media screeを使うとしか解説していないので教えて もらえると助かります。 ■質問2 端末によって横解像度が違うのでdivブロック内の文章がどの文字でdivの右端で折り返されるかは 端末毎に変わるのは仕方のないことですよね? 取引先の担当者に、改行や右端での折り返しが端末ごとに異なると怒られたのですが、なるべく見やすく 文字をremで指定しているし、そもそもフォント自体の幅が端末毎に違うので折り返しがまちまちなのは仕方のないことなのでしょうか? それとも同じにできるのでしょうか? どうぞよろしくお願い致します。
- ベストアンサー
- CSS
- レスポンシブなサイトがうまくいかない
レスポンシブなサイトを作っているのですが、 navを小さくした時のみ二行にして、押しやすくする為に二行の間にスペースを入れたいのですがうまくいきません。 <ul class="futtnavi"> <li><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/yourinfo.png" alt="個人情報の取り扱い" width="146" height="17" /></li> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <span> <li><img src="img/base/aboutus.png" alt="観光協会について" width="129" height="19" /></li> </span> <li><img src="img/base/fuitshine.png" alt="敷居の画像" width="16" height="20" /></li> <li><img src="img/base/faq.png" alt="FAQ" width="40" height="17" /></li> </ul> CSS /*Responsive /br*/ td.copyright span:before { content: "\A"; white-space: pre; } ul.futtnavi+li+li+li+li+span li,ul.futtnavi+li+li+li+li+span+li,ul.futtnavi+li+li+li+li+span+li+li { display: inline-block; margin-top: 1em; } どのようにしたら出来るでしょうか? もちろん@media screen and (max-width: 320px)などは入れています。そちらの問題では有りません。
- ベストアンサー
- CSS