スマホ表示にすると変な余白が生まれて左寄せになってしまう。

パソコン表示は問題ないのですが、スマホ表示にすると変な余白が右に生まれて左寄せになってしまいます。
通常通り真ん中に寄せたいです。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <!--Metaタグ-->
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
9     <!--Bootstrap CSS-->
10     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
11    
12    <!--Fontawesome-->
13    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
14
15    <title>Document</title>
16</head>
17<body>
18  <div class="" style="background-color: #F0EDE5;">
19    <div class="container1">
20        <div class="row">
21            <div class="col-md-4 col-6 mt-4">
22                <a class="row box1">
23                    <img class="img" src="https://picsum.photos/50/50" alt="">
24                    <div class="bg-white p-2 text-center">
25                        <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i>
26                        <p class="m-2 d-inline text-dark">hogehoge</p>
27                    </div>
28                </a>
29            </div>
30            <div class="col-md-4 col-6 mt-4">
31                <a class="row box1">
32                    <img class="img" src="https://picsum.photos/50/50" alt="">
33                    <div class="bg-white p-2 text-center">
34                        <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i>
35                        <p class="m-2 d-inline text-dark">hogehoge</p>
36                    </div>
37                </a>
38            </div>
39            <div class="col-md-4 col-6 mt-4">
40                <a class="row box1">
41                    <img class="img" src="https://picsum.photos/50/50" alt="">
42                    <div class="bg-white p-2 text-center">
43                        <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i>
44                        <p class="m-2 d-inline text-dark">hogehoge</p>
45                    </div>
46                </a>
47            </div>
48        </div>
49    </div>
50</div>
51
52<style>
53/* ユニバーサルセレクタでマージンとパディングを消去とborder-boxの設置 */
54*, *:before, *:after {
55-webkit-box-sizing: border-box;
56box-sizing: border-box;
57margin: 0;
58padding: 0;
59}
60
61body {
62	background-color:#FFF;
63    font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ', 'ＭＳ Ｐゴシック','MS PGothic';/*　フォントの優先順位 */
64	font-size:80%;
65}
66
67/*　サイズがデカい場合はスクロールで表示 */
68html {
69	overflow-y:scroll;
70}
71
72p,li,dt,dl {
73	line-height:1.6;
74}
75p {
76	margin:0 0 1em 0;
77    font-size: 14px;
78    font-weight: 500;
79}
80/* スマホ用のCSS */
81@media (max-width : 760px) {
82	p {
83        margin:0 0 1em 0;
84        font-size: 12px;
85        font-weight: 400;
86    }
87}
88li {
89	list-style-type:none;
90}
91img {
92	border:0;
93    padding: 0px !important;
94}
95address {
96	font-style:normal;
97}
98.clear {
99	clear:both;
100}
101a {
102 text-decoration: none;
103}
104a:hover {
105    opacity: 0.9;
106    cursor: pointer;
107}
108
109.container1 {
110    width: 960px;
111    max-width: 960px;
112    margin: auto;
113}
114/* タブレット用のCSS */
115@media (max-width : 760px) {
116	.container1 {
117        width: 760px;
118        max-width: 100%;
119        margin: auto;
120    }
121}
122
123/*　CSS From Here */
124.box1 {
125    width: 100%;
126    border-top: 3px solid #005;
127}
128</style>
129       <!--Bootstrap Js-->
130       <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
131       <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
132        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
133</body>
134</html>

Lhankor_Mhy

2021/04/21 05:37

container を置かないのは、意図があってのことですか？

Larkiwing

2021/04/21 05:39

そうですね。containerだとpc画面時の幅が広くなってしまうので、あえてcontainer1を作って少し横幅を狭くしています。

Lhankor_Mhy

2021/04/21 05:42

container1が原因だと思います。

Larkiwing

2021/04/21 05:44

containerに変更しましたすると右の余白は消えました。ですが、まだ左寄りになってしまっています。

Larkiwing

2021/04/21 05:59

containerのcssの初期値がわかれば、container1にもmediaqueryを使って対応できると思うのですが違いますかね？

Lhankor_Mhy

2021/04/21 05:59

なるほど、問題を把握しましたが、container1はどうした方がいいですか？ containerに切り替えて構わないですか？

Lhankor_Mhy

2021/04/21 06:00

> containerのcssの初期値がわかれば、container1にもmediaqueryを使って対応できると思うのですが違いますかね？まあ、そうなんですけど、問題はガター処理なので……

Larkiwing

2021/04/21 06:01

containerはcontainerとして別のセクションで使いたいので、container1は pc画面の幅を960pxにして使いたいです。

Larkiwing

2021/04/21 06:02

>まあ、そうなんですけど、問題はガター処理なので…… no-guttersをクラスに入れたんですが、機能しないんですよね。。。

Lhankor_Mhy

2021/04/21 06:03

Bootstrap のレイアウトを変更するなら、SCSSを編集してコンパイルすべきだと思います。 Bootstrap のルールを無視してアドホックなスタイルで対応するなら、そもそも Bootstrap をやめた方が楽なような気がします。

Lhankor_Mhy

2021/04/21 06:07

no-gutters は、たぶん5からなくなっていると思います。

marlboro_tata

2021/04/21 06:08

当方の環境では、container1をcontainer に修正した状態で見ても、PCの時点で若干の左寄りが見られることを確認しました。左寄りは、PCの時からそもそも左寄りであると観測されます。 container1をcontainer に修正したのを踏まえて、 <a class="row box1"> とあるものを <a class="box1"> と直した場合、左に寄るのは解消されると思います（画像が崩れますが）。 .row にはbootstrapで左右にネガティブマージン（マイナスを値に持つmarginプロパティ値）が設定されていますので、左に寄るのは、その影響ではないかと考えます。

Larkiwing

2021/04/21 06:10

＞Bootstrap のレイアウトを変更するなら、SCSSを編集してコンパイルすべきだと思います。 Bootstrap のルールを無視してアドホックなスタイルで対応するなら、そもそも Bootstrap をやめた方が楽なような気がします。 scssはまだ勉強を始めたばかりなのであまり理解できてません。( ;∀;)bootstrapは気に入っているのでできるだけ使いたいです。＞no-gutters は、たぶん5からなくなっていると思います。そうなんですね。確認してみます。

Lhankor_Mhy

2021/04/21 06:14

まあ、とりあえずの回答をしますね。

Larkiwing

2021/04/21 06:19

＞当方の環境では、container1をcontainer に修正した状態で見ても、PCの時点で若干の左寄りが見られることを確認しました。左寄りは、PCの時からそもそも左寄りであると観測されます。 container1をcontainer に修正したのを踏まえて、 <a class="row box1"> とあるものを <a class="box1"> と直した場合、左に寄るのは解消されると思います（画像が崩れますが）。 .row にはbootstrapで左右にネガティブマージン（マイナスを値に持つmarginプロパティ値）が設定されていますので、左に寄るのは、その影響ではないかと考えます。あ、もうpcの時から中央寄せになっていないんですね。確かにこのやり方だと、あとは画像に対するcssを追加すればいけそうですね。ご指摘いただいたように、左右のネガティブマージンを消去する形で考察してみます。

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

回答3件

ベストアンサー

とりあえず、これで上手くいっているように見えますが……
他の部分への影響はわからないです。

html
1        <div class="container1 container">
2            <div class="row">
3                <div class="col-md-4 col-6 mt-4">
4                    <a class="row box1 g-0">

投稿2021/04/21 06:18

Lhankor_Mhy

総合スコア36158

Larkiwing

2021/04/21 06:44 編集

ありがとうございます。無事解決しました。

Lhankor_Mhy

2021/04/21 06:45

それだと、たぶん .box1 がくっつくと思います。それでもいいならば、質問に書いて欲しかったかな、と思います。

Larkiwing

2021/04/21 07:39

本当ですか？確認したいのですが、p-2を入れたのでbox1はくっついていないようですが、いかがでしょう？ <!DOCTYPE html> <html lang="ja"> <head>  <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <title>Document</title> </head> <body> <div class="" style="background-color: #F0EDE5;"> <div class="container1"> <div class="row"> <div class="col-md-4 col-6 mt-4 p-2"> <a class="row box1"> <img class="img" src="https://picsum.photos/50/50" alt=""> <div class="bg-white p-2 text-center"> <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i> <p class="m-2 d-inline text-dark">hogehoge</p> </div> </a> </div> <div class="col-md-4 col-6 mt-4 p-2"> <a class="row box1"> <img class="img" src="https://picsum.photos/50/50" alt=""> <div class="bg-white p-2 text-center"> <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i> <p class="m-2 d-inline text-dark">hogehoge</p> </div> </a> </div> <div class="col-md-4 col-6 mt-4 p-2"> <a class="row box1"> <img class="img" src="https://picsum.photos/50/50" alt=""> <div class="bg-white p-2 text-center"> <i class="fas fa-caret-circle-right fa-lg m-2 d-inline text-secondary"></i> <p class="m-2 d-inline text-dark">hogehoge</p> </div> </a> </div> </div> </div> </div> <style> /* ユニバーサルセレクタでマージンとパディングを消去とborder-boxの設置 */ *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; } body { background-color:#FFF; font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック','Yu Gothic','メイリオ', 'ＭＳＰゴシック','MS PGothic';/*　フォントの優先順位 */ font-size:80%; } /*　サイズがデカい場合はスクロールで表示 */ html { overflow-y:scroll; } p,li,dt,dl { line-height:1.6; } p { margin:0 0 1em 0; font-size: 14px; font-weight: 500; } /* スマホ用のCSS */ @media (max-width : 760px) { p { margin:0 0 1em 0; font-size: 12px; font-weight: 400; } } li { list-style-type:none; } img { border:0; padding: 0px !important; } address { font-style:normal; } .clear { clear:both; } a { text-decoration: none; } a:hover { opacity: 0.9; cursor: pointer; } .container1 { width: 960px; max-width: 960px; margin: auto; } /* タブレット用のCSS */ @media (max-width : 760px) { .container1 { width: 760px; max-width: 100%; margin: auto; } } /*　CSS From Here */ .box1 { width: 100%; border-top: 3px solid #005; } .row { --bs-gutter-x: 0rem; } </style>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> </body> </html>

Larkiwing

2021/04/21 07:40

間違っていたら修正します。m(_ _)m

Lhankor_Mhy

2021/04/21 07:58

なるほど、p-2 を入れたのですね。失礼しました。

Larkiwing

2021/04/21 08:07

アドバイスありがとうございました。(*´ω｀*)

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

html
1
2<div class="container1">
3<div class="row">
4<div class="col-md-4 col-6 mt-4 p-2">
5<a class="row box1">
6
7

css
1.row {
2--bs-gutter-x: 0rem;
3}

投稿2021/04/21 06:43

Larkiwing

総合スコア120

col-md-*を使っているけど、col-sm-*は使わなくていいのかな？っていう素朴な疑問。
横幅が768px以上ならcol-md-*が使われるけど、
スマホの横幅ってそれより小さいことが多いんじゃない？

参考：Grid system

投稿2021/04/21 05:33

編集2021/04/21 05:34

退会済みユーザー

総合スコア0

Larkiwing

2021/04/21 05:40

ご指摘ありがとうございます。 col-md-4からcol-sm-4に変更しました。

退会済みユーザー

2021/04/21 06:03

昨今のスマホも性能が上がって解像度が細かいのもあるので、 mdとsmの両方を指定したほうがいいような気がします。

Larkiwing

2021/04/21 06:07

そうなんですね。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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

スマホ表示にすると変な余白が生まれて左寄せになってしまう。

関連した質問