• ベストアンサー
  • 困ってます

レスポンシブWeb 右側の表示が切れてます

  • 質問No.8317282
  • 閲覧数2769
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 91% (22/24)

 レスポンシブ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
  • ベストアンサー

ベストアンサー率 100% (5/5)

「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を!
お礼コメント
palux124

お礼率 91% (22/24)

教わったよう@media only screen and (min-width:1000px)を使ったところあっさり解決しました。
おかげで作業が進んでます。

ありがとうございました。
投稿日時:2013/10/23 22:35
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ