横幅が大きくなってしまう

progateさんの上級者編を模写中にてどうしてもレイアウトが合わなく
模索していたところ横スクロールバーが出現していて画面横幅が大きくなって画面右に余白ができている事に気づきました。

vivaldiのデベロッパーツールで見本と模写のコードを確認していたのですが原因がわからず、
力添えをと思い質問させていただきました、ご教示よろしくおねがいします。

HTML
1<!DOCTYPE html>
2<head>
3    <meta charset="UTF-8">
4    <meta name="viewport" content="width=device-width, initial-scale=1.0">
5    <link rel="stylesheet" href="style.css">
6    <title>prpgate | 模写</title>
7</head>
8<body>
9    <header>
10        <div class="container">
11            <div class="header-left">
12                <img class="header-logo" src="main_logo.png" alt="logo">
13            </div>
14            <div class="header-right">
15                <a href="#">レッスン</a>
16                <a href="#">新規登録</a>
17                <a href="#">ログイン</a>
18            </div>
19        </div>
20    </header>
21    <div class="top-wrapper">
22        <div class="container">
23            <h1>LEARN TO CODE.</h1>
24            <h1>LEARN TO BE CREATIVE.</h1>
25            <p>progateはオンラインプログラミング学習サービスです。</p>
26            <p>初心者にも優しいスライドとレッスンで、ウェブサービスを作りながらプログラミングを学んでいきましょう。</p>
27            <div class="btn-wrapper">
28                <a class="btn signup" href="#">新規登録はこちら</a>
29                <p>or</p>
30                <a class="btn facebook" href="#">Facebookで登録</a>
31                <a class="btn twitter" href="#">Twitterで登録</a>
32            </div>
33        </div>
34    </div>
35</body>
36</html>

CSS
1body {
2    margin: 0;
3    font-family: "Hiragino Kaku Gothic ProN";
4}
5
6a {
7    text-decoration: none;
8}
9
10.container {
11    width: 100%;
12    padding: 0 15px;
13}
14
15header {
16    width: 100%;
17    position: fixed;
18    z-index: 10;
19    top: 0px;
20    left: 0px;
21    background-color: rgba(26, 46, 48, 0.877);
22    height: 65px;
23}
24
25.header-left {
26    float: left;
27}
28
29.header-logo {
30    width: 124px;
31    margin-top: 20px;
32}
33
34.header-right {
35    float: right;
36    line-height: 65px;
37}
38
39.header-right a {
40    float: left;
41    color: white;
42    display: block;
43    padding: 0 25px;
44    transition: all 0.5s;
45}
46
47.header-right a:hover {
48    background-color: rgba(255, 255, 255, 0.384);
49}
50
51.top-wrapper {
52    padding: 180px 0 100px 0;
53    background-image: url("top.png");
54    background-size: cover;
55    color: rgb(255, 255, 255);
56    text-align: center;
57}
58
59.top-wrapper h1 {
60    letter-spacing: 5px;
61    font-size: 45px;
62}
63
64.btn {
65    color: white;
66    display: inline-block;
67    padding: 7px 25px;
68    border-radius: 4px;
69}
70
71.signup {
72    background-color: rgb(1, 153, 120);
73    margin-top: 20px;
74    opacity: 0.8;
75}
76
77.facebook {
78    background-color: rgb(6, 84, 173);
79    opacity: 0.8;
80    margin-right: 10px;
81}
82
83.twitter {
84    background-color: rgb(4, 174, 216);
85    opacity: 0.8;
86}
87
88.btn:hover {
89    opacity: 1;
90}

それと模写の際デザインカンプのないサイトでのピクセルなどは感覚で行うほうがいいのか、はたまた
デベロッパーツールで確認しながら行うべきなんでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

css
1.container {
2    width: 100%;
3    padding: 0 15px;
4}

このpaddingの左右分が100%に上乗せされているように見えました。
box-sizing: border-box;などを使用してパディングとボーダーを幅と高さに含めるようにしてはいかがでしょうか。
http://www.htmq.com/css3/box-sizing.shtml

投稿2020/06/15 00:27

dit.

総合スコア3235

965

2020/06/15 01:27

回答ありがとうございます。そのまま * { box-sizing: border-box; } を追加して実行し直してみたのですが状況は変わらず,,, .containerのpaddingを無くすと成功したので問題はそこだと思うのですが。 box-sizing: border-box;の指定の仕方が間違っているのでしょうか

miyabi_pudding

2020/06/15 01:43 編集

横槍失礼します。 965さん > divはブロック要素のため、デフォルトで、横いっぱいに広がる要素のため、width: 100%は特に理由がない限り、効かせる必要はありません。（width: autoが効いており、ブロック要素の場合は自然に可能な限り横いっぱいになる）余計に効かせると今回のような余計な処理をしなければいけなくなります。

miyabi_pudding

2020/06/15 01:43

あと、* {}のようなスタイルの当て方は、全てのコンテンツモデルに影響を及ぼし、のちのコーディングにも影響してしまううえ、レンダリングパフォーマンスを落としかねませんので、よほどのことが無い限りやめた方がいいと思います。

965

2020/06/15 02:03

----------------------- 回答ありがとうございます。そのまま * { box-sizing: border-box; } を追加して実行し直してみたのですが状況は変わらず,,, .containerのpaddingを無くすと成功したので問題はそこだと思うのですが。 box-sizing: border-box;の指定の仕方が間違っているのでしょうか ----------------------- 原因は他の要素に横のサイズに％を含んでいたためでした。コンテンツを真ん中にする時に％を使う、と間違えて覚えていました......。 >>miyabi_takatsukさんリクエストにお答えいただきありがとうございます。 "デフォルトで、横いっぱいに広がる要素のため、width: 100%は特に理由がない限り、効かせる必要はありません。"この一文で、上記の間違った覚え方の筋が通り理解できましたありがとうございます。上記の間違った知識がなければ.containerにbox-sizing: border-box;を適用するだけで事足りるんですね....

miyabi_pudding

2020/06/15 02:28 編集

box-sizing: border-box; も、個人的には、理由がない限りは入れる必要がないと思います。 padding入れたいけどボックスの大きさ固定したい、って場面などに使用すべきだと思います。（必要ない設定は、余計な手間になるし、チームでの開発時にノイズになる）あと、padding入れた上でそれ込みでボックスの大きさをナリで可変にしたい時、どうにも思った大きさにならない時がありますので、全部のケースでとりあえず入れるのではなく、必要な箇所で入れる、とした方が、技術向上になります。とりあえず入れとけは、デベロッパー・コーダーとしてはあまりやるべきではありません。（もちろん、それが必要になる時もあるが）

965

2020/06/15 02:36

なるほど、テンプレートで書いていても仕方ないですよね。毎度ためになるご教示ありがとうございます。

行動規範の内容に同意します