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

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

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

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

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

731閲覧

flex boxの使い方

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

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

Flex

FlexはFlash PlayerやAdobe Airで動作するRIA(リッチインターネットアプリケーション)を開発する為のフレームワークです

コードレビュー

コードレビューは、ソフトウェア開発の一工程で、 ソースコードの検査を行い、開発工程で見過ごされた誤りを検出する事で、 ソフトウェア品質を高めるためのものです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/09/25 06:38

このようなものを実現したいと思っているのですがうまくいきません
イメージ説明

イメージ説明

<section class="vase"> <div class="vase-container"> <div class="vase-title"> <h2>かんたん、かわいい<br>FLOWERのための花の器</h2> <p>初回限定25%off</p> </div> <div class="vase-image"></div> <div class="vase-body"> <p>お花を飾るのに欠かせないのが花器。でも、お花と花器の相性もさまざま。手持ちにぴったりのものがなくて、いまいちかわいく飾れない…なんてことも。そこで、誰でもかんたんに、かわいくお花を飾れる専用の花器をつくりました。お花のある暮らしが、もっと楽しみになりますように。</p> <div class="vase-variation"> <div class="item bell"></div> <div class="item moon"></div> <div class="item candle"></div> </div> <div class="vase-price"> <div class="vase-price-taitle"> 初回注文後、 <br>2週間以内 </div> <div class="traial-price"> 1,800円(送料無料) </div> <div class="normal-price"> 通常価格 2,400円 (送料無料) </div> <div class="footnote"> アプリ内でご購入いただけます </div> </div> </div> </div> </section>
.vase { padding:10vmin 0 0; background-color:#e7e3df; } .vase-container { min-height:730px; flex-flow:column wrap; display: flex; } .vase-title { padding:0 61.44px; order: 1; width:50%; height:fit-content; } .vase-title h2{ text-align: center; margin-top: 0; font-size:2.6em; } .vase-body { order: 2; width: 400px; margin: 0 auto; margin-top: 32px; padding: 0; } .vase-body p { margin-bottom:15px; } .vase-variation { display: flex; margin:24px,0px; } .item { height: 116px; max-width: 98px; position: relative; } .bell { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_bell-3242683261f661614798b85f339c955bd9a56d231773730ffd7a0ab8028747e2.jpg); background-size:cover; } .moon { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_moon-6ef8eca3a0e8166d7a28acda51109e2050ee74ed94a839638ac1f954223647fb.jpg); background-size:cover; } .candle { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/vase_candle-ca20f4ad96c7cbfe245a497dc9aa0875a4bcc5c8a14056e8297096bb720d4bdd.jpg); background-size:cover; } .vase-image { background-image:url(https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/web/home/bg_vase-45bcc89846e1a077353f799e42054251c3e3e570fcc453b8d96282d5df1ad6db.jpg); width:50%; height:730px; order:3; background-position: center bottom; }

やってみたこと

marginのサイズを確認してみましたが理想の形のコードと変わりはありませんでした
flexboxについて調べてみましたがやはりどこがダメなのか分かりません

今日はずっとこのことについて考えてみてもう限界だったので質問させていただくことにしました。どなたかご回答よろしくお願いします

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

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

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

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

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

guest

回答2

0

模写元はこうなってるようです。

css

1.vase-container { 2 /* min-height: 730px; */ 3 flex-flow: column wrap; 4 display: flex; 5 height: 730px; /* これがない */ 6}

投稿2020/09/25 07:19

編集2020/09/25 07:21
Lhankor_Mhy

総合スコア35871

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

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

退会済みユーザー

退会済みユーザー

2020/09/25 08:20

回答ありがとうございます 実現できたものの どうしてmin-heightではいけないのでしょうか
Lhankor_Mhy

2020/09/25 08:21

わー、またそれですか。 前回もそうやって質問をクローズしてくれませんでしたよね……?
Lhankor_Mhy

2020/09/25 08:25

まあ、いいや。 別に納得いかないならクローズしなくていいです。 min-height は最小の高さ、という意味なので、どこまでも大きくなります。 そして、height の初期値は auto なので、内容物に合わせて大きくなる、ということです。 ですから、高さが内容物に合わせてどこまでも大きくなるので、折り返しが発生しようがない、ということです。
退会済みユーザー

退会済みユーザー

2020/09/25 08:28

理解することができましたありがとうございます 最初の言葉余計です。 それオフラインで言ったら嫌われますよw
miyabi_takatsuk

2020/09/25 08:29

横槍すみません。 flex-flow: column wrap; で、wrap値があるため、 折れなきゃ表示し切れない内容の場合折れるって設定も相まってそうですね。 質問者さん、質問投げっぱにしないで、 しっかりと解決したなら閉じるようにしましょう。
退会済みユーザー

退会済みユーザー

2020/09/25 08:30 編集

閉じましたよ!!! 回答ありがとうございます!!
miyabi_takatsuk

2020/09/25 08:30

> それオフラインで言ったら嫌われますよw 質問を閉じないような行動の仕方もオフラインでは嫌われると思いますが。
退会済みユーザー

退会済みユーザー

2020/09/25 08:31

わからないのに閉じろということですか?
退会済みユーザー

退会済みユーザー

2020/09/25 08:32

わからなかったので閉じませんでした
Lhankor_Mhy

2020/09/25 08:37

>それオフラインで言ったら嫌われますよw 俺は嫌われてない >わからないのに閉じろということですか? 生殺与奪の権をry
miyabi_takatsuk

2020/09/25 08:38

その前回の質問と思しきもののやり取りを拝見しましたが、 Lhankor_Mhyさんが最後にコメント残されているので、それを見てわからなければ、また0831nnanaさんの方から、わからないならわからないと返事されてはいかがでしょうか? 質問閉じないうちに、そのコメント無視して、 次の質問を投稿してしまっている行動に対しての言葉だと思います。
Lhankor_Mhy

2020/09/25 08:48 編集

まあ、ネタはともかく。 前回の質問で分からないことがあって閉じられないなら、コメント欄で質問してください。 質問をクローズせず、なぜクローズしないのかの理由も説明しないのでは、私のコメントを無視してるようにしか思えないです。 そんなだからみんなに嫌われるんですよ?
退会済みユーザー

退会済みユーザー

2020/09/25 08:41

分かりました ご指摘ありがとうございます
退会済みユーザー

退会済みユーザー

2020/09/25 08:42

また一言余計ですねw
退会済みユーザー

退会済みユーザー

2020/09/25 08:43

お二人ありがとうございました
Lhankor_Mhy

2020/09/25 08:44

鬼滅の刃、見てないんですか……? それはスベったなあ
Lhankor_Mhy

2020/09/25 08:47

まあ、わかりました。 ご不快でしょうから、今後はあなたには関わらないようにしますね。 失礼をいたしましたことお詫びいたします。
miyabi_takatsuk

2020/09/25 08:48

> それはスベったなあ すみません、横槍の私が、ネタ知って吹きました。 質問閉じるか閉じないかは、質問者さんですしね・・・。 まさに生殺与奪の権r(以下ry
退会済みユーザー

退会済みユーザー

2020/09/25 09:15

関わらないようにしますとかw 煽ってんるんですか?
guest

0

ベストアンサー

flexboxについて調べてみましたがやはりどこがダメなのか分かりません

どの様に調べてどの様に試してみたのですが?疑問点がわかりません。フレックスボックスについての基本については下記リンクのMDNを参照してください。今回の説明では一部を抜粋していますが、他の部分も併せて確認してください。

フレックスボックスを使ってレイアウトされる文書の領域は、フレックスコンテナーと呼ばれています。フレックスコンテナーを作るには、その領域のコンテナーに対して display プロパティの値を flex もしくは inline-flex に設定します。またこれにより、このコンテナー直下の子要素が フレックスアイテムとなります。ほかの CSS プロパティと同様に、いくつかの初期値が定義されているため、フレックスコンテナーを作成するとそのコンテナーに含まれるフレックスアイテムは以下のように振る舞います。

フレックスボックスの基本概念 - MDN

flexboxを使うのであれば、コンテナー直下の子要素で左右に並べたいコンテンツを指定する必要があります。今回の場合はvase-containerの直下に添付画像の様に左に並べるコンテンツと右に並べるコンテンツ(画像)を指定してあげるだけで問題ないかと思います。

投稿2020/09/25 07:24

kai0310

総合スコア2070

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問