Q&A
＞ウインドウの横幅を500pxより小さくするにはどのような設定を施せばいいのでしょうか。
→ どのような事がしたいのでしょうか？また、提示のコードと関係あるのでしょうか？
ウインドウの横幅を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; }
ウェブページの制作段階において、レスポンシブWebデザインが機能しているかどうかを調べたいです。
ChromeやFirefox等のブラウザで、デベロッパーツールを起動すれば、好きな大きさで確認出来ますが、それではダメなのでしょうか？
※編集しました。
toggle device toolbarのことでしょうか。
それも普段活用しておりますが、ブラウザのウインドウの横幅を狭めた場合に
どのように変化していくのかも調べてみたいです。
それのことかは分かりませんが、デベロッパーツールを右に表示するだけで最小150pxまで縮められるようになりますね。Firefoxでは9pxまでいけました。
回答1件
0
ベストアンサー
コードは見てませんが一般的にはmax-widthで実現可能です。
MDN
追記
もし、全体的に幅を小さくして見て見たいっていうなら
CSS
1body { 2 width: /*確認したい横幅*/ 3}
でいいかと思います。
投稿2019/09/27 10:04
編集2019/09/27 13:17
総合スコア10429
CSSを変更してみましたが、ウインドウの横幅は
５００ｐｘよりも小さくはなりませんでした。
実行した例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;
}
---
840pxの要素があるからでは？
bodyとinner-bodyに違う背景色を指定してみてください。
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;
}
あなたの回答
tips
プレビュー
