質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

5099閲覧

レスポンシブサイトをスマホの横向きで見た時の見え方について

hiro-

総合スコア19

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/03/07 14:31

編集2016/03/07 15:15

ご覧いただきありがとうございます。

レスポンシブサイト構築に関する質問です。

レスポンシブ対応をしてスマホ(縦向き)で見た時には
スマホ用のレイアウトで見えて、
スマホを横向きにするとPC用のレイアウトでデバイス幅ぴったり(スマホ対応してないサイトを見た時のような全体を縮めた感じ)で見えるようにしたいのですが、
横向きにするとPC用のレイアウトが全部表示されず、はみ出した状態(横に移動できるような状態)になってしまします。

どうしたらスマホを横向きにした時の見え方をPC用の横幅ぴったりの表示にすることができるかお教えいただきたいです。

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

はじめまして。
CSSのmediaqueryを追加してみてはどうでしょうか.
記述例としましては,

@media (min-width: 600px) and (max-width: 800px) {
//ウィンドウの横幅サイズが600px~800pxの場合に適応するCSSを記述.
//既存のものに上書きされます.
//Ex.
#maincontent{
float: right;
width: 300px;
}
}

上記の記法をCSSに埋め込むか、もしくは下記の記法にて外部CSSを読み込むことも可能です.
下記の書き方では、ウィンドウ横幅サイズが0 ~ 500pxの場合に外部CSS"width-500.css"を読み込むという命令です.

<link rel="stylesheet" media="(max-width: 500px)" href="with-500.css">

こういったmediaqueryを追記して,スマフォ・タブレットの横幅サイズ範囲を指定してあげれば,横画面の場合のみのレイアウトを構築することができます.

投稿2016/03/08 01:58

Pyth

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hiro-

2016/03/08 14:40

Pythさん はじめまして。 ご回答いただきありがとうございました。 状況のわかる情報が少ない中、回答いただきまして本当にありがとうございました。 質問していた内容ですが、自己解決することができました。 PC用のcssにmin-widthを指定することで実現したかった表示ができました。 多分、レスポンシブの設計がそもそも間違っているのかもしれません。 Pythさんの新しくメディアクエリを追記する方法や教えてくださいました参考サイトが 自分と同じことでハマってしまった人の役に立つと思いましたので、 ベストアンサーに選ばせていただきたいと思います。 この度はありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問