レスポンシブ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用とスマホ用の両方の表示を
まともにするにはどうすればいいでしょうか? 心当たりがあればお答えください。
No.1ベストアンサー
- 回答日時:
「PC用」というか、「ブラウザの横幅が広い」状態で見る、と想定しているならば、
width: 650px;もメディアクエリ分けしてあげたら良いのではないでしょうか。
@media only screen and (min-width:1000px){
#content{
width: 650px;
}
}
とか。
min-widthなのか、min-device-widthなのかは是非お好みで。px数もお好みで。
記述内容の詳しい説明は「メディアクエリ 幅」とかで検索したら山ほど出てきます。多分。
もしくは、そもそもcommon-l.cssはスマホ端末では読み込みたくない、
というのであれば、そちらの読み込みをmin-widthで振り分けてあげるとか。
よきcssを!
教わったよう@media only screen and (min-width:1000px)を使ったところあっさり解決しました。
おかげで作業が進んでます。
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
都道府県穴埋めゲーム
都道府県の名前を1人1つずつ投稿してください。全ての都道府県が出たら締め切ります!
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
画面右端が切れる。
Windows Vista・XP
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
縦ボーダーの長さ変更方法
-
iframeの機能をcss(divタグ)で...
-
L字みたいな記号の表示
-
ピクチャーボックスの大きさに...
-
iPhoneで HTMLファイルを閲覧
-
シーサーブログのヘッダー画像...
-
「image」か「images」フォルダ...
-
初心者です ワードプレスのfuka...
-
ブログの画像を復元したい
-
gooブログです。
-
HTMLエデイター利用しての...
-
中二でこの画力って……
-
paintに貼り付けてある画像の大...
-
Dreamweaver (Studio 8)とMovab...
-
エキサイトのブログの
-
スマホセット契約の本人確認書...
-
ブログのリンクの仕方を教えて...
-
1ページの複数の記事のうち、最...
-
WEB拍手の画像設置
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
テーブルセル余白(例えば左側...
-
borderの太さを1px以下に見せ...
-
レスポンシブWeb 右側の表示が...
-
縦ボーダーの長さ変更方法
-
テキストボックスが選択できない
-
CSSでメニュー横並びの方法
-
box-shadowでFirefoxだと内枠に...
-
HTMLにsvg画像表示したら小さか...
-
ページネーションを右下に配置...
-
webサイトのデザイン方法について
-
PHP内で同じようにCSSを表示さ...
-
googleカスタム検索 ボタンがず...
-
PCとスマホでの解像度でのCSS振...
-
レスポンシブデザインのjQuery...
-
フォント12pxの200%?
-
ホームページ作成後、別のブラ...
-
L字みたいな記号の表示
-
ピクチャーボックスの大きさに...
-
iPhoneで HTMLファイルを閲覧
-
シーサーブログのヘッダー画像...
おすすめ情報