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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

4622閲覧

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

fdajo

総合スコア13

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2020/05/16 12:17

編集2020/05/16 12:25

孫要素(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

画像

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/05/16 12:22

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

回答1

0

ベストアンサー

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

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 <!-- .contaier自体不要かもしれません。 --> <div class="container"></div> <!-- .containerの外に出す --> <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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問