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

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

ただいまの
回答率

90.98%

  • レスポンシブWebデザイン

    192questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

MacBookでも左右に余白が空くぐらいの幅は、何ピクセルぐらいなのでしょうか?

受付中

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 219

identity0xx

score 7

当方ホームページ制作は、初心者に毛が生えたような感じの者です。

ホームページ自体の、widthを1100pxぐらいにすると、MacBookで検証を使った時に、ホームページの左右の余白がなくなってしまいます。
MacBookくらいの幅でも、左右に少しでも余白が出るぐらいのwidthのピクセルは、どれくらいになりますでしょうか・・・???

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

タグに「レスポンシブ」とあるのでレスポンシブ前提で回答しますと、
「1100pxぐらい」と固定幅ではレスポンシブ実現とはなりません。
ブラウザのズームが利用者によって100%でない場合もあります。

「ホームページ自体の幅」を考えるのではなく、メイン部分を中央寄せにし、marginをとってみてはいかがでしょうか。
※メイン部分widthを100%とするとひとまず画面いっぱいとなります。
例えばメイン部分を囲うブロックを100%とし、メイン部分幅100%とmargin左右を設定すると余白があるメイン部分となります。

簡単な例:※分かりやすいように背景色をつけています

<div id="wrapper">
 <div id="main_body">
  main
 </div>
</div>
body{margin:0;padding:0;}
div#wrapper{
 width:100%;
 background:#eee;
}
div#main_body{
 background:#ccf;
 margin-left:10px;
 margin-right:10px;
}

ブラウザ狭く
ブラウザ狭く

ブラウザ広く
ブラウザ広く

※注意点
あくまで簡易な一例なので、レスポンシブをもう少し調べた上で、自身のやりたいこと実現に向けての調整は必要ですし、
実際はコンテンツ(文章や画像など)が入ってきてこれだけでは上手くいくとは限りません。
(もっと微細な調整が必要です)
1つのイメージとして捉えてください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/13 12:41

    ありがとうございます!!
    widthを指定して、横のmarginを取りたいのですが・・・どうすればよろしいのでしょうか???m(__)m

    キャンセル

  • 2017/11/13 13:01

    width:100%; とすれば良いのでは。
    回答でも書きましたが「~~px」など固定値ではレスポンシブになりません。

    キャンセル

+1

レズポンシブデザインにしてもいいですが、
単純にどんな解像度のPCでも左右に余白を入れたいのであれば
コンテンツ全体にmargin設定すると良いと思います。
例:

<body>
 <div class = "content_wrapper" style = "margin:0 10px">
   <header>...</header>
   ......
 </div><!-- content_wrapper -->

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/13 12:01

    ありがとうございます!
    margin: 0 10px;
    にすると、真ん中に寄らなくなるのですが、どうすればいいでしょうか??

    また、レスポンシブでやるとしたら、どうすればよろしいのでしょうか??><

    キャンセル

  • 2017/11/13 12:45

    margin: 0 10px;にして左右に寄っているなら、恐らくcontent_wrapper以下の要素に何かしらのmarginが設定されていて、その分ズレるとか、そういうことかと思います。
    大きな箱(bodyとかcontent_wrapperとか)、その中にある中くらいの箱、その中にある小さい箱
    と、それぞれmarginやらpaddingやら設定していくと思うので、
    最初に「どこで余白を取るか」を決めると良いと思います。

    キャンセル

  • 2017/11/13 12:48

    widthを指定しているからでしょうか?
    widthを決めて、左右の余白を作り、真ん中に寄せたいのですが・・・。。。

    キャンセル

  • 2017/11/13 12:48

    最初の最初でやるとゴッチャゴチャになると思うので、レスポンシブは一旦ホームページ作って「htmlとcssってこういうものかー」って分かってから始めた方が良いと思いますよ。
    device-widthだの@mediaだの色々と設定するものが増えるので……

    キャンセル

  • 2017/11/13 12:52

    一応、レスポンシブで、ホームページは5つくらいは作っているのですが・・・基本のところが分かっていないような感じです。。
    ブレイクポイントも指定して作りましたが・・・合っているかどうかは難しいところという状況です。。

    キャンセル

  • 2017/11/13 12:54

    いくつかやり方あります。
    margin: 0 auto;
    にすると(block要素は)中央表示になります。
    ただしwidth:1100pxの設定があると恐らくお使いのmacbookでは余白が無い状態になります。
    widthは何を基準に表示させるかを考えるのが一番最初にやることでしょうか。
    ちなみにwidth:1100pxってあまりありません。
    何か特別な理由が無いのなら、900px~1000pxくらいにした方が無難です。
    ※ yahoo japanは950px googleは980pxです。
     つまり「見慣れてる幅」ということになります。

    キャンセル

  • 2017/11/13 12:56

    承知いたしました!
    では、widthを狭く設定したいと思います!
    ありがとうございます!!

    キャンセル

+1

お使いのMacBookのディスプレイ幅はいくつなのでしょうか?そこを基準に考えれば良いと思います。

また、ホームページとして公開すれば、全ての方が同じディスプレイ幅の端末で見る訳では無く、スマホを含めて、基本バラバラで「閲覧者の方に同じように見えるにはどうすれば良いか?」を考える必要が出てきますので、大きい画面と小さい画面での表示のさせ方を決めてCSSを組めば良いのではと思います。

-追記-
レスポンシブの前に、自分のPC環境で意図したデザインをCSSで組んで、PCやスマホなどで表示させ、どこをどう組むとレスポンシブになるのかを経験された方が、今後の為に良いと思います。頑張ってください。(^^)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/13 12:43 編集

    コメントありがとうございます!!
    ディスプレイ幅、調べましたが分かりません・・・13インチなのですが。。。

    キャンセル

  • 2017/11/13 13:16

    「ディスプレイ幅」とは「解像度」で調べる事が出来るのですが、MacBookは所持しておりませので、調べ方はスミマセンがググって見て下さい。m(_ _)m

    参考までに一つリンク先を書いておきます。
    http://kanshin.hatenablog.com/entry/2015/07/14/201356

    他の回答コメントで
    >一応、レスポンシブで、ホームページは5つくらいは作っているのですが・・・

    とありますので、ちょっとした事の見落としだと思います。一つの外箱を用意して、その中にコンテンツ箱を用意し、「コンテンツ箱の両側に余白を作る」の発想です。
    外箱にパディングで設定するのかコンテンツ箱にマージンで設定するのかです。

    キャンセル

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

  • ただいまの回答率 90.98%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • レスポンシブWebデザイン

    192questions

    レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。