レスポンシブホームページ作成のアドバイスをお願いします
- 自分の師匠にアドバイスをもらって上記の方法でレスポンシブホームページを作成していますが、ヘッダーだけうまく表示されません。どうすればいいでしょうか？
- レスポンシブホームページを作成する際に、メディアクエリの定義は人それぞれですが、ヘッダーだけがうまく表示されません。どのような対処法がありますか？
- レスポンシブホームページの作成でメディアクエリを使用していますが、ヘッダーのみが表示されません。ヘッダーの表示にはどのような工夫が必要ですか？
- ベストアンサー
レスポシブについて
よろしくお願い致します。 レスポンシブのホームページは作るのですが どうしても、わからなかったので アドバイスを教えてくれたらと思います。 @media screen and (max-width: 1024px)｛ ｝ @media screen and (max-width: 600px) ｛ ｝ 自分の師匠にアドバイスをもらって 上記の方法で作成して、うまくやってるのですが どうしても、ヘッダーだけうまく 同じ表示がされません。 特になにかが足りないと思っているのですが レスポンシブを作る上でメディアクエリの定義は人ぞれぞれだと思うのですが もし、ヘッダーだけ同じ表示がされな場合 みなさんなら、どう致しますか？ アドバイスのほど、よろしくお願い致します。
- chororin777
- お礼率22% (19/85)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ヘッダーは@media…の指定にきちんと含まれていますか？コンテンツ部分しか入れてないって人を見たことがありますが。
関連するQ&A
- レスポンシブ 横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デザインでサイト制作を行っています。 メディアクエリについて詳しい方、いらっしゃいましたら教えてください。 フルHD（1080×1920）のスマホのビューポイントをどのように設定するのが適当か悩んでいます。 @media screen and (min-width:480px)and(max-width:1080px) のように設定しようかと思いましたが、iPadminiのように、解像度が1024×768だと かぶってしまい、適当じゃない表示になるのを危惧しています。 実機で試せば良いのですが、どのようにビューポイントを設定しているのか、 是非、参考にさせて頂ければ幸いです。 よろしくお願いします。
- ベストアンサー
- CSS
- レスポンシブデザイン
スマホとＰＣで同一ＵＲＬにして レスポンシブデザインでｃｓｓを変えたいのですが それぞれどのサイズにすればいいのでしょうか？ 現在は @media screen and (max-width: 499px) { * { font-size: 1.0em; } } @media screen and (min-width: 500px) { * { font-size: 2.0em; } } の様にしていて ５００以上だと大きく表示されるようにしています。 私のスマホ（アンドロイド）・ＰＣなら問題ないのですが 一般的な幅を教えてください。
- ベストアンサー
- 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上で、スマホで参照した場合の表示として、以下のようにメディアクエリを書いています。 @media screen and (max-width: 640px) { ～ } Chromeで画面幅640pxまで縮めた場合、想定どおりの表示となるのですが、 Firefoxを640pxまで縮めても変化せず、625pxで初めてスマホ時の表示となりました。 縦スクロールバーが表示されているせいで、15px分の解釈の誤差が出てしまっている ようなのですが、ＣＳＳで回避する方法はありますでしょうか。 それともJavascriptなどでfirefoxを判別し、かつ画面幅をチェックして、専用のCSSを当て込む必要がありますでしょうか。
- 締切済み
- HTML
- レスポンシブ対応の表 センターからズレる
レスポンシブ対応の表を作成したのですが、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
- 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
- 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;} }
- 締切済み
- デザイナー・クリエイティブ職
- 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
- レスポンシブデザインにする方法、参考サイト
現在作成しているサイトをレスポンシブにしようと色々サイトを調べているのですが、一部はしょってあったりなかなかいいサイトがありません。 こちらのスキルとしては通常のサイト制作は仕事で請け負っています。 現在レスポンシブサイトの案件が増えているので、自分のサイトを勉強用にしています。 例えばつまずいているのは基本的な部分なのですが、 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
補足
ご連絡ありがとうございます。 その点は承知しておりますし、書き忘れはございません。 その状態の上で、詳しいこと 例えば (max-width: 320px)とヘッダーだけ分けなきゃならないのか気になっております。