背景画像を画面幅いっぱいに横並びで3等分したい。

孫要素（class=""item)の背景画像を画面幅いっぱいに横並びで3等分したい。
考え方も間違っていたら教えていただけますでしょうか？
「私の考え：
私は先祖要素の上に子・孫要素がある。その子・孫要素（今回の場合はclass="item"）の幅はmargin: 0 calc(50% - 50vw);とwidth: 100vw;の指定で先祖要素の幅を超えて画面いっぱいになると考えています。」

現在、模写で学習中です。

参考サイト（お花屋さん）のようにうまく3等分できません。
参考サイトはこちら

下記が試した内容です。
孫要素(class="item")にwidth: calc(100vw / 3);を指定する。
孫要素(class="item")にmargin: 0 calc(50% - 50vw);とwidth: 100vw;を指定する。
先祖要素（class="service",class="container")にmargin:0;,padding:0;を指定する。

以上です。

html
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
7
8    <!-- Bootstrap CSS -->
9    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10
11    <link rel="stylesheet" href="css/normalize.css">
12    <link rel="stylesheet" href="css/flower.css" type="text/css">
13
14
15    <title>練習 FLOWER｜かわいいが届くお花便</title>
16
17    <meta name="description" content="あなた好みのお花がポストに届く定期便アプリ">
18    
19
20  </head>
21  <body>
22  	<header>
23  		<div class="header">
24         
25          <div class="logo2"></div>
26          <div class="tagline">かわいいが届くお花便</div>
27       
28
29          <div class="badges">
30            <a class="app-badge" href="https://apps.apple.com/jp/app/flower-%E3%81%8B%E3%82%8F%E3%81%84%E3%81%84%E3%81%8C%E5%B1%8A%E3%81%8F%E3%81%8A%E8%8A%B1%E4%BE%BF/id1434272434?mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/ja-jp/badge-lrg.svg?releaseDate=2019-02-18&kind=iossoftware&bubble=ios_apps) no-repeat;width:164px;height:40px;"></a>
31            <a    href='https://play.google.com/store/apps/details?id=co.rollcake.flower&pcampaignid=pcampaignidMKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1'><img class="googleplay-badge" style='margin-top:-32px;' alt='Google Play で手に入れよう' src='https://play.google.com/intl/ja/badges/static/images/badges/ja_badge_web_generic.png'/></a>
32          </div>
33
34          <p>*北海道、沖縄、離島エリアは現在対象外です</p>
35        </div>
36
37  	</header>
38    <body>
39      
40     <div class="service">
41      <div class="container">
42        <div class="item item1">
43          <h2>届くのは<br>あなた好みのお花だけ</h2>
44          <p>FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。</p>
45        </div>
46        <div class="item item2">
47                  <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
48                  <p>お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。</p>
49        </div>
50        <div class="item item3">
51                  <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
52                  <p>専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
53        </div>
54      </div>
55    </div> 
56
57    <div class="price">
58      <h2>お部屋に飾りやすいサイズの<br>ブーケをワンコインで</h2>
59
60      <p>お花とグリーン5～6ほんのブーケ</p>
61      <p>500円/1回</p>
62      <ul>
63        <li>送料は360円（税別）です。</li>
64        <li>価格は税別です。</li>
65      </ul>
66    </div>
67
68      </body>
69
70
71    
72
73    <!-- Optional JavaScript -->
74    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
75    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
76    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
77    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
78  </body>
79</html>

css
1body,html{
2	height:100%;
3}
4
5html{
6	    font-size: 62.5%;
7	    box-sizing: border-box;
8}
9
10.header{
11	max-width: 100%;
12 	text-align: center;
13 	position: relative;
14 	background-image: url(../images/no2.png);
15 	width: 100%;
16    height: 100vh;
17	background-size: cover;
18	display: flex;
19	justify-content: center;
20
21}
22.logo2{
23	background-image: url(../images/f2.png);
24	position: absolute;
25	top: 20%;
26	left: 0;
27	right: 0;
28	margin: auto;
29	background-size: contain;
30	background-repeat: no-repeat;
31	background-position: center;
32	width:16%;
33	height: 16%;	
34}
35
36
37.tagline{
38	position: absolute;
39	top: 39%;
40	left: 0;
41	right: 0;
42	margin: auto;
43	color: white;
44	font-size: 1.3rem;
45}
46
47
48.badges{
49	position: absolute;
50	top:80%;
51	left: 0;
52	right: 0;
53	margin: auto;
54}
55
56.app-badge {
57	
58	margin-right: 10px;
59}
60
61
62.googleplay-badge{
63	
64	margin-right: 16px;
65	width: 164px;
66	height: 60px;
67
68
69}
70
71.header p{
72	position: absolute;
73	top:91%;
74	left: 0;
75	right: 0;
76	margin: auto;
77	font-size: 1.7vh;
78	color: white;
79}
80
81
82.logo2,
83.tagline,
84.badges,
85.app-badge,
86.googleplay-badge,
87.header p
88{
89	 opacity:0;
90	 animation-name: fade-in;
91	 animation-duration:  2s;
92	 animation-iteration-count: 1;
93	 animation-fill-mode: forwards;
94}
95
96@keyframes fade-in{
97	0%{
98		opacity:0;
99		transform: translateY(30px);
100	}
101	100%{
102		opacity: 1;
103		transform: translateY(0);
104	}
105}
106
107/* body */
108
109
110.service,.container{
111	box-sizing: border-box;
112	margin: 0;
113	padding: 0;
114	display: flex;
115    background-size: cover;
116}
117.service{
118	display: block;
119	box-sizing: inherit;
120}
121.container{
122	
123	display: flex;
124	/* flex-wrap: wrap; */
125	box-sizing: inherit;
126}
127
128.item1{
129	background-image: url(../images/item1.jpg);
130	background-color: rgb(205,190,202);
131	
132	
133}
134
135.item2{
136	background-image: url(../images/item2.jpg);
137	background-color: rgb(178,186,196);
138	
139}
140
141.item3{
142	background-image: url(../images/item3.jpg);
143	background-color: rgb(230,213,177);
144	
145}
146
147.item{
148	background-size: cover;
149	
150	height: 80vh;
151	/* float: left; */
152	padding: 50px 40px;
153	font-size: 2.2rem;
154	box-sizing: border-box;
155	background-position: center;
156	flex-grow:1;
157	/* width: 33vw; */
158
159	width: calc(100vw / 3);
160    margin: 0 calc(50% - 50vw);
161    width: 100vw;
162}
163
164
165/* price */
166
167.price{
168	text-align: center;
169}
170

m.ts10806

2020/05/16 12:22

お手本サイトがあるのでしたら、実際のコードを解析してみられては。

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

回答1件

ベストアンサー

以下の記述だといかがでしょうか?

HTML
1<div class="service">
2  <!-- .contaier自体不要かもしれません。 -->
3  <div class="container"></div>
4  
5  <!-- .containerの外に出す -->
6  <div class="group">
7    <div class="item item1">
8      <h2>届くのは<br>あなた好みのお花だけ</h2>
9      <p>FLOWERのお花は季節やトレンドに合わせてプロがセレクトしたもの。雰囲気の異なる複数のお花から毎回好きなものが選べます。</p>
10    </div>
11    <div class="item item2">
12      <h2>お花はポストに投函<br>忙しくても大丈夫</h2>
13      <p>お花は専用BOXに入れてポストに直接お届け。不在で受け取れなくても安心して使えます。</p>
14    </div>
15    <div class="item item3">
16      <h2>FLOWERなら<br>いつもかわいく飾れる</h2>
17      <p>専用の花器を使うと、届いたお花をさっと生けるだけでかわいい空間のできあがり。お花のある暮らしがもっと楽しくなります。</p>
18    </div>
19  </div>
20</div>

CSS
1.group {
2  display: flex;
3}
4
5.item {
6  /* flex-growだけでなく、flex-shrinkも必要 */
7  flex-grow: 1;
8  flex-shrink: 1;
9  flex-basis: 0%;
10  
11  /* width、margin系の記述はすべてコメントアウト */
12  /*
13  width: calc(100vw / 3);
14  margin: 0 calc(50% - 50vw);
15  width: 100vw;
16  */
17}

本件だけでなく、おおざっぱに、Bootstrapを使用するうえで以下の記述は間違いだと考えます。

汎用的クラス.containerにdisplay: flex;を指定する。
→指定する場合は、<div>を1つ追加する
画面の左右に余白が生じないようにする要素は、.containerの中に含めない

投稿2020/05/17 22:47

new1ro

総合スコア4528

fdajo

2020/05/18 07:46

html  <div class="container"></div>  <div class="group"> css .item { /* flex-growだけでなく、flex-shrinkも必要 */ flex-grow: 1; width: 100vw; } または .item { /* flex-growだけでなく、flex-shrinkも必要 */ flex-grow: 1; flex-shrink: 1; flex-basis: 0%; } この2パターンでうまくいきました。有難うございます。 containerクラスではうまくいかないものが、groupクラスにすると希望通りに実装できただけの用に思いました。 containerクラスは使い方がある程度決まっているのでしょうか？下記の件ですが、理解できないので、わかりやすいサイトなどご存じでしたら教えていただけますでしょうか？汎用的クラス.containerにdisplay: flex;を指定する。 →指定する場合は、<div>を1つ追加する画面の左右に余白が生じないようにする要素は、.containerの中に含めない

new1ro

2020/05/18 08:03

.containerや.wrapperなどのクラス名は、コンテンツエリアの横幅 (の上限) を指定し、左右に均等に余白を設ける役割としてよく使用されます。 Bootstrapは、たまたまその名前が「.container」です。 https://getbootstrap.com/docs/4.5/layout/overview/ Bootstrapを使用しない場合でもよく使われるテクニックなので調べてみてください https://coliss.com/articles/build-websites/operation/css/best-way-to-implement-wrapper.html

fdajo

2020/05/19 08:21

有難うございます。調べてみます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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

背景画像を画面幅いっぱいに横並びで3等分したい。

関連した質問