- 締切済み
webレスポンシブ
新たに問題が出てきまして、 iphoneの表示で確認した所、 footerの画像が消えてくれません。 [問題の箇所] Media QueriesにてCSS /*=============================================== 画面の横幅が320pxまで ===============================================*/ @media screen and (max-width:320px){ footer{ background-image: url(images/footer/footer_wood.jpg); display:none; } どうぞ宜しくお願いします。
- identity0208
- お礼率75% (3/4)
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- suusanndesu
- ベストアンサー率20% (18/87)
footer{ background-image: none; } だけでいいと思いますが。違ったらすみません。
関連するQ&A
- レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せの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
- レスポンシブ 横1080px高解像度スマートフォン
レスポンシブに挑戦しようとしていますが、 ちょっとよく分からくなってきたので質問させてください。 レスポンシブWEBデザインは、 例えば、次のようにデバイスの横幅によって異なるデザインのサイトを表示させるわけですよね。 @media screen and (min-width: 769px){PC向け} @media screen and (max-width: 768px){タブレット向け} @media screen and (max-width: 640px){スマートフォン向け} しかし、横幅が1080pxもあるスマートフォンが発売されてきましたので、 もはや、横幅ではどんなデバイスなのか分からなくなってきたと思います。 また、スマートフォンが高解像度になっても、 画面自体は小さいので、 スマートフォン用にサイトデザインを最適化する必要は変わりません。 そうすると、ユーザーエージェントで切り分ける旧式のやり方を少なくも併用しなければ、 結局、うまくいかないような気もするのですが、どうなんですかね？ そのあたりについて、どのようにお考えでしょうか？ ご意見お聞かせいただきたくお願い申し上げます。
- ベストアンサー
- CSS
- レスポンシブ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
- back-ground:noneが効かない
レスポンシブのページを作成中で、PCではback-groundを表示、 スマホ版ではimgで表示を、メディアクエリで切りわけたいのですが スマホ版でPC用のback-groundを消すための back-ground:none;が効いてくれません。 http://www.miimeow.com/?tid=3&mode=f1 上記のページの「購入はこちら」「定期購入はこちら」のボタンがある部分をスマホで非表示にしたいのです。 原因は何なのでしょうか。。 恐縮ですがご教授頂ければ幸いです。 こちらがCSSです。 PC @media screen and (min-width:481px) { .cam_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/cam-img.jpg) no-repeat; width: 1000px; height: 412px; position: relative; margin: 0 auto; } .cam_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:18px; } /*定期便*/ .teiki_kounyu { background: url(http://www.ustyle-japan.com/miimeow/images/teiki_img.png) no-repeat; width: 1000px; height: 188px; position: relative; margin: 0 auto; } .teiki_kounyu a { position: absolute; width: 372px; height: 80px; right: 24px; bottom:47px; } } スマホ @media screen and (max-width : 480px) { .cam_kounyu{ display: none!important; background : none; } .teiki_kounyu{ display: none!important; background : none;} }
- 締切済み
- デザイナー・クリエイティブ職
- firefoxでcssを使った時背景画像が表示されない
CSSでfloatを設定し、その中のそれぞれに背景画像を表示しようとすると、上手くいきません。 背景画像も背景色も表示されません。 構文に間違いがあるのでしょうか？ それともそのような仕様なのでしょうか？ よろしくお願いいたします。 ###CSS### #container { width: 900px; background-image: url(images/back.jpg); background-repeat: no-repeat; } #header { width: 900px; } #contents { width: 748px; background-color: #FFFFFF; background-image: url(images/image.jpg); background-repeat: no-repeat; background-position: top; padding: 0px; margin-left: 76px; } #footer { clear: both; width: 748px; margin-left: 76px; } #sidebar { float: left; background-image: url(images/side.jpg); width: 180px; margin-top: 14px; background-color: #FFFFFF; } #main { float: right; width: 568px; padding: 0px; background-color: #FFFFFF; background-image: url(../images/image2.jpg);
- 締切済み
- HTML
- CSSで、画像を左寄せにして全体を中央にする方法
画像5点を左寄せで配置しています。 添付画像のようにブラウザの幅によって段数を変更できるようにしていますが、 どうしても、画像部分がセンタリングされません。 他のサイト等を丸2日かけて調べましたが、どうもうまい事できません。 どなたかご教授くださいませ。 よろしくお願いいたします。 以下、現状のHTMLとCSSです。 ■HTML <!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial=1, maximum-scale=1"> <link rel="stylesheet" type="text/css" href="css/style2.css" media="all"> <title>タイトル</title> </head> <body> <header> <p>ヘッダー</p> </header> <div id="contents"> <a href="http://○○○○○○○/001.html"><img src="images/001s.jpg" > <a href="http://○○○○○○○/002.html"><img src="images/002s.jpg" > <a href="http://○○○○○○○/003.html"><img src="images/003s.jpg" > <a href="http://○○○○○○○/004.html"><img src="images/n004s.jpg" > <a href="http://○○○○○○○/005.html"><img src="images/005s.jpg" > </div> <footer> <p>フッター</p> </footer> </body> </html> ■CSS @charset "UTF-8"; *{ margin: 0;padding: 0} a { text-decoration : none} ul, ol { list-style : none} img { vertical-align : top} html { font-family : verdana, sans-serif; font-size : 120%; line-height : 150%; margin : 0; width : 100%; text-align:center; } body { width:100%; text-align:center; } header { width:100%; margin-bottom: 0px; color: #fff; font-size: 20px; height:30px; background : url(../images/back.jpg) } #contents { width:100%; padding : 30px 0 10px; text-align:left; } #contents img { margin-bottom : 24px; } footer { color: #fff; width:100%; font-size: 10px; height:30px; background : url(../images/back.jpg) }
- 締切済み
- CSS
- ヘッダーとサイドバーの色の変更の仕方
現在ヘッダーやサイドバーの色が黒なのですが、ＣＳＳのどの部分を変えることで変更可能ですか？黒はリラクゼーションには不向きなので#660033の色に変更したいのです。 どうか助けてください。 /* その他、拡張があれば記述 */ .skinHeaderFrame { text-align:center; } #navi { list-style:none; margin:0 auto; padding:0; width:605px; } #navi li { display:inline-block; padding:0 15px; *display:inline; *zoom:1; } #navi li a { padding:5px; display:block; } #navi1 a:hover, #navi2 a:hover, #navi3 a:hover, #navi4 a:hover, #navi5 a:hover { background:#996666; color:#FAF3F1; text-decoration:none; } #header { margin:20px 0 40px 0; text-align:center; width:100%; height:301px; background:url(http://www.gird.jp/ameblo/p2/images/header_bg_line.jpg); } .skinHeaderArea2 { margin:0 auto; width:980px; height:301px; position:relative; background:url(http://www.gird.jp/ameblo/p2/images/header_bg.jpg); } .skinBlogHeadingGroupArea { width:340px; position:absolute; top:50px; left:50px; } #gallery { width:450px; height:210px; position:absolute; top:46px; right:55px; background:#000; } #gallery img { position:absolute; top:0; left:0; } .skinArticle { background:none; border:none; padding:0; } .skinArticleHeader { text-align:center; border-top:1px #000 solid; border-bottom:1px #000 solid; border-left:none; margin:0; padding:10px 0; } .detailOn img { margin:0; } .skinSubA .skinMenuHeader { color:#faf3f1; padding:23px 0 0 30px !important; width:270px; height:41px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header.jpg) no-repeat center top; } .skinSubB .skinMenuHeader { color:#faf3f1; padding:23px 0 0 25px !important; width:155px; height:37px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_header2.jpg) no-repeat center top; } .skinSubA .skinMenu2 { width:300px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer.jpg) no-repeat center bottom; padding-bottom:32px !important; } .skinSubB .skinMenu2 { width:180px !important; background:url(http://www.gird.jp/ameblo/p2/images/side_footer2.jpg) no-repeat center bottom; padding-bottom:19px !important; } .skinSubA .skinMenuBody{ margin:0; width:260px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body.jpg); } .skinSubB .skinMenuBody{ margin:0; width:140px; padding:20px 20px 0; background:url(http://www.gird.jp/ameblo/p2/images/side_body2.jpg); } #footer { position:relative; width:100%; height:65px; background:url(http://www.gird.jp/ameblo/p2/images/footer_bg.jpg); } #myad { width:251px; height:31px; display:block; background:url(http://www.gird.jp/ameblo/p2/images/myad_btn.png); position: absolute; left:50%; top:20px; margin:0 0 0 -125px; text-indent:-9999px; } #myad:hover { background-position:left bottom; }
- 締切済み
- 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
- 背景画像
背景画像のCSSを教えてください wordpressのfooterのように、footer内のみに縦100px横幅1pxの画像で敷き詰めたいです 実際に横960pxに敷き詰められるようにしたいです #footer_in { position:relative; margin:0 auto; padding:0; width:960px; height:100px; background:url(../images/footer_bg.png) no-repeat center 13px; font-size:12px; } <div id="footer_in"> </div>
- ベストアンサー
- CSS
- Media Queries ってDBあるのですか？
メディアクエリってジャバクエリみたいにデータベースがあるのですか？ ホームページを持っているのですが、リアルで知り合いの人に、スマホで見るときPC表示で見づらいといわれてしまいました。( ；∀；) 前々からメディアクエリというものがあるのは知っていたのですが、どう探してもDLページにたどり着けません。 一応それらしきサイトは見つけたのですがこちらであっているでしょうか？⇒（http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/）Media Queriesと書いてあるので、おそらくここなのかなと思いますがいかがでしょうか。 本題に戻りますが、Media QueriesってメディアごとにCSSを振り分けるやつらしいのですが、記述方法がよくわかりません。（ここ見ました：http://dev.classmethod.jp/smartphone/device-media-queries/） JQueryみたいにDB（データベース）は無いのでしょうか？あるとすると、どのサイトにあるか教えてください。DBが存在しない場合、http://dev.classmethod.jp/smartphone/device-media-queries/に書かれていた通り<link href="css/iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >でいいのでしょうか。また、下記のように書く際はどのように記述すればよいのですか？”セレクタ@media ～”でいいのでしょうか？ <style type="text/css"> <!-- //--> </style> よろしくお願いします。(´・ω・`)
- ベストアンサー
- CSS
