Q&A
コメントありがとうございます！！
ディスプレイ幅、調べましたが分かりません・・・１３インチなのですが。。。
当方ホームページ制作は、初心者に毛が生えたような感じの者です。
ホームページ自体の、widthを1100pxぐらいにすると、MacBookで検証を使った時に、ホームページの左右の余白がなくなってしまいます。
MacBookくらいの幅でも、左右に少しでも余白が出るぐらいのwidthのピクセルは、どれくらいになりますでしょうか・・・？？？
回答3件
0
タグに「レスポンシブ」とあるのでレスポンシブ前提で回答しますと、
「1100pxぐらい」と固定幅ではレスポンシブ実現とはなりません。
ブラウザのズームが利用者によって100%でない場合もあります。
「ホームページ自体の幅」を考えるのではなく、メイン部分を中央寄せにし、marginをとってみてはいかがでしょうか。
※メイン部分widthを100%とするとひとまず画面いっぱいとなります。
例えばメイン部分を囲うブロックを100%とし、メイン部分幅100%とmargin左右を設定すると余白があるメイン部分となります。
簡単な例：※分かりやすいように背景色をつけています
html
1<div id="wrapper"> 2 <div id="main_body"> 3 main 4 </div> 5</div>
css
1body{margin:0;padding:0;} 2div#wrapper{ 3 width:100%; 4 background:#eee; 5} 6div#main_body{ 7 background:#ccf; 8 margin-left:10px; 9 margin-right:10px; 10}
ブラウザ狭く
ブラウザ広く
※注意点
あくまで簡易な一例なので、レスポンシブをもう少し調べた上で、自身のやりたいこと実現に向けての調整は必要ですし、
実際はコンテンツ（文章や画像など）が入ってきてこれだけでは上手くいくとは限りません。
（もっと微細な調整が必要です）
1つのイメージとして捉えてください。
投稿2017/11/13 03:04
編集2017/11/13 03:05
総合スコア80850
0
お使いのMacBookのディスプレイ幅はいくつなのでしょうか？そこを基準に考えれば良いと思います。
また、ホームページとして公開すれば、全ての方が同じディスプレイ幅の端末で見る訳では無く、スマホを含めて、基本バラバラで「閲覧者の方に同じように見えるにはどうすれば良いか？」を考える必要が出てきますので、大きい画面と小さい画面での表示のさせ方を決めてCSSを組めば良いのではと思います。
-追記-
レスポンシブの前に、自分のPC環境で意図したデザインをCSSで組んで、PCやスマホなどで表示させ、どこをどう組むとレスポンシブになるのかを経験された方が、今後の為に良いと思います。頑張ってください。(^^)
投稿2017/11/13 03:04
編集2017/11/13 03:17
総合スコア3523
「ディスプレイ幅」とは「解像度」で調べる事が出来るのですが、MacBookは所持しておりませので、調べ方はスミマセンがググって見て下さい。m(_ _)m
参考までに一つリンク先を書いておきます。
http://kanshin.hatenablog.com/entry/2015/07/14/201356
他の回答コメントで
＞一応、レスポンシブで、ホームページは５つくらいは作っているのですが・・・
とありますので、ちょっとした事の見落としだと思います。一つの外箱を用意して、その中にコンテンツ箱を用意し、「コンテンツ箱の両側に余白を作る」の発想です。
外箱にパディングで設定するのかコンテンツ箱にマージンで設定するのかです。
0
レズポンシブデザインにしてもいいですが、
単純にどんな解像度のＰＣでも左右に余白を入れたいのであれば
コンテンツ全体にmargin設定すると良いと思います。
例：
<body> <div class = "content_wrapper" style = "margin:0 10px"> <header>...</header> ...... </div><!-- content_wrapper -->
投稿2017/11/13 02:55
総合スコア168
ありがとうございます！
margin: 0 10px;
にすると、真ん中に寄らなくなるのですが、どうすればいいでしょうか？？
また、レスポンシブでやるとしたら、どうすればよろしいのでしょうか？？＞＜
margin: 0 10px;にして左右に寄っているなら、恐らくcontent_wrapper以下の要素に何かしらのmarginが設定されていて、その分ズレるとか、そういうことかと思います。
大きな箱（bodyとかcontent_wrapperとか）、その中にある中くらいの箱、その中にある小さい箱
と、それぞれmarginやらpaddingやら設定していくと思うので、
最初に「どこで余白を取るか」を決めると良いと思います。
widthを指定しているからでしょうか？
widthを決めて、左右の余白を作り、真ん中に寄せたいのですが・・・。。。
最初の最初でやるとゴッチャゴチャになると思うので、レスポンシブは一旦ホームページ作って「htmlとcssってこういうものかー」って分かってから始めた方が良いと思いますよ。
device-widthだの@mediaだの色々と設定するものが増えるので……
一応、レスポンシブで、ホームページは５つくらいは作っているのですが・・・基本のところが分かっていないような感じです。。
ブレイクポイントも指定して作りましたが・・・合っているかどうかは難しいところという状況です。。
いくつかやり方あります。
margin: 0 auto;
にすると（block要素は）中央表示になります。
ただしwidth:1100pxの設定があると恐らくお使いのmacbookでは余白が無い状態になります。
widthは何を基準に表示させるかを考えるのが一番最初にやることでしょうか。
ちなみにwidth:1100pxってあまりありません。
何か特別な理由が無いのなら、900px～1000pxくらいにした方が無難です。
※ yahoo japanは950px googleは980pxです。
つまり「見慣れてる幅」ということになります。
承知いたしました！
では、widthを狭く設定したいと思います！
ありがとうございます！！
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/13 03:41
2017/11/13 04:01