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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

826閲覧

ウインドウの横幅を出来るだけ狭める設定。

taka_oct092018

総合スコア133

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/09/27 09:23

ウインドウの横幅を500pxより小さくするにはどのような設定を施せばいいのでしょうか。
ブラウザはグーグルクロームを使っています。

https://practice2017.web.fc2.com/question_01/idx.html

(HTML5)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプル</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0"> <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> <link href="fontawesome/css/all.css" rel="stylesheet"><!-- fontawesome ver5.10.2 Local (オフライン用) --> <script src="https://kit.fontawesome.com/abda8f59ff.js"></script><!-- fontawesome ver5.3.0 CDN --> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="js/jquery.tgBrowserWidth.js"></script><!-- 画面幅を表示するスクリプト 作業用 --> <script>$(document).ready(tgBrowserWidth());</script><!-- 画面幅を表示するスクリプト 作業用 --> <link rel="stylesheet" href="css/style.css"> </head> <body class="idx"> <div class="inner-body"> <header> <div class="ctr-hdr"> <nav class="nav-hdr"> <ul> <li><a href="idx.html">トップ</a></li> <li><a href="foo.html"></a></li> <li><a href="bar.html"></a></li> <li><a href="baz.html"></a></li> </ul> </nav><!-- /.nav-hdr --> </div><!-- /.ctr-hdr --> </header> <section class="cont-main"> <div class="ctr-main"> <p>ああああああああああああああああああああああああああああああ</p> <p>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</p> <p>うううううううううううううううううううううううううううううううううううう</p> <p>えええええええええええええええええええええええええええええええ</p> <p>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</p> </div><!-- /.ctr-main --> </section><!-- /.cont-main --> <footer> <div class="ctr-ftr"> <div class="inner-ftr"> </div><!-- /.inner-ftr --> </div><!-- /.ctr-ftr --> </footer> <span id="wid"></span><!-- 画面幅表示用スクリプト --> </div><!-- /.inner-body --> </body><!-- /.idx --> </html>

(CSS)

@charset "utf-8"; body { font-family : "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; line-height : 1; } /* 要素を中央に配置する。 */ .inner-body { margin-left : auto; margin-right : auto; width : 840px; }

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

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

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

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

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

yoshinavi

2019/09/27 11:28

>ウインドウの横幅を500pxより小さくするにはどのような設定を施せばいいのでしょうか。 → どのような事がしたいのでしょうか?また、提示のコードと関係あるのでしょうか?
taka_oct092018

2019/09/27 12:54

ウェブページの制作段階において、レスポンシブWebデザインが機能しているかどうかを調べたいです。
yoshinavi

2019/09/27 13:50 編集

ChromeやFirefox等のブラウザで、デベロッパーツールを起動すれば、好きな大きさで確認出来ますが、それではダメなのでしょうか? ※編集しました。
taka_oct092018

2019/09/28 03:02

toggle device toolbarのことでしょうか。 それも普段活用しておりますが、ブラウザのウインドウの横幅を狭めた場合に どのように変化していくのかも調べてみたいです。
ikadzuchi

2019/09/29 04:43

それのことかは分かりませんが、デベロッパーツールを右に表示するだけで最小150pxまで縮められるようになりますね。Firefoxでは9pxまでいけました。
guest

回答1

0

ベストアンサー

コードは見てませんが一般的にはmax-widthで実現可能です。
MDN


追記

もし、全体的に幅を小さくして見て見たいっていうなら

CSS

1body { 2 width: /*確認したい横幅*/ 3}

でいいかと思います。

投稿2019/09/27 10:04

編集2019/09/27 13:17
kyoya0819

総合スコア10429

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

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

taka_oct092018

2019/09/28 03:01

CSSを変更してみましたが、ウインドウの横幅は 500pxよりも小さくはなりませんでした。 実行した例1 (CSS) --- @charset "utf-8"; body { font-family : "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; line-height : 1; width:200px; } /* 要素を中央に配置する。 */ .inner-body { margin-left : auto; margin-right : auto; width : 840px; } --- 実行した例2 (CSS) --- @charset "utf-8"; body { font-family : "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; line-height : 1; max-width:none; } ---
kyoya0819

2019/09/28 03:42

840pxの要素があるからでは? bodyとinner-bodyに違う背景色を指定してみてください。
taka_oct092018

2019/09/28 07:15

asuchi0819様 返信ありがとうございます。 再度CSSを編集してみましたが変化はありませんでした。 そこで、いくつかのブラウザで試してみると、 IE : 186px Fire Fox : 303px chrome : 500px という結果に。 ブラウザによって挙動が変わるみたいです。 釈然としない部分がありますがIEで186pxまで狭められたので、 勝手ながら今回の問題は一応解決済みとさせて頂きます。 @charset "utf-8"; body { font-family : "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro","メイリオ", "Meiryo", sans-serif; line-height : 1; background-color:red; max-width:none; } /* 要素を中央に配置する。 */ .inner-body { margin : 0; background-color:blue; }
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問