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

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

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

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

CSS

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

Q&A

解決済

3回答

709閲覧

flexを使ってulでくくった画像を横に並ばせて、2行で折り返し表示がしたい

taro3yui3

総合スコア1

HTML

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

CSS

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

0グッド

0クリップ

投稿2023/04/04 04:33

編集2023/04/06 22:43

実現したいこと

画像を赤い箱の1234のように2で折り返したい

flexを使ってulでくくった画像を並ばせたくて いろいろ試してみたのですが
123が並んで4ケ目だけ下にいくか
1234が縦並びになったり、123が重なってしまったりで希望の形になりません

イメージ説明

該当のソースコード

html

1<main> 2 <div class="flexbox"> 3 <div class="div1">1</div> 4 <div class="div1">2</div> 5 <div class="div1">3</div> 6 <div class="div1">4</div> 7 </div> 8 9 <div class="flexbox2"> 10 <ul class="ul2"><img src="img/photo1.jpg" alt="photo1"></ul> 11 <ul class="ul2"><img src="img/photo2.jpg" alt="photo2"></ul> 12 <ul class="ul2"><img src="img/photo3.jpg" alt="photo3"></ul> 13 <ul class="ul2"><img src="img/photo4.jpg" alt="photo4"></ul> 14 </div> 15</main>

該当のソースコード

css

1main{width: 500px;} 2 3.flexbox { 4 display: flex; 5 flex-wrap: wrap; 6 text-align: center; 7 } 8 9.div1 { 10 background: red; 11 border: 1px solid #000; 12 width: 45%; 13 } 14 15.flexbox2 { 16 display: flex; 17 flex-wrap: wrap; 18 text-align: center; 19 } 20 21.ul2{ 22 background: blueviolet; 23 border: 1px solid #000; 24 width: 20%; 25 } 26

試したこと

widthで幅を%指定
mainでくくって、幅を指定してpxで指定など横幅の問題化と試してみたけどダメでした。
また50%で指定しても(2ケ並べたいので1ケ50%指定かと思ったのですが)うまく2ケづつになりません

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

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

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

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

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

guest

回答3

0

doyumaさんの回答をもとにwidth指定を追加。
その後divならできるけどulだとできない、と追加質問していましたが
ulタグの初期値が影響していたことが分かりました。
ulとdivタグの違いについて調べているときに発見しましたのでいったん解決とさせていただきます。

int32_tさん・doyumaさん
ありがとうございました。

投稿2023/04/04 14:45

taro3yui3

総合スコア1

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

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

doyuma

2023/04/05 00:06

解決できて何よりです。 おっしゃる通り、ulタグにはデフォルトでpaddingやmarginが設定されております。 ulタグ以外にも設定されているタグはございます。 ブラウザによって見え方が違う場合もございます。 この性質は厄介なので、デフォルトで設定されている部分はリセットすることが多いと思われます。 参考サイトを掲載しておきますので参考にしてください。 https://snownotes.org/understanding-about-user-against-stylesheet-and-reset-css/ https://webdesign-trends.net/entry/8137
taro3yui3

2023/04/06 13:43

確認が遅くなりすみません。 サイトのご紹介、ご丁寧にありがとうございます。読ませていただきます。 すこしづつ理解進めていってる感じなのでまた何かありましたらお力添えいただければ幸いです。
guest

0

ベストアンサー

まずはCSSで、imgに対してwidthやmax-widthを指定した方がいいかと思います。

mainに対してwidth: 500px;が指定されております。
しかし、imgには何も指定されていないため、
画像一枚あたり横幅はデフォルトの600pxになっているため、
mainから突き抜けてしまっております。

なので、imgに対してwidthやmax-widthを指定すべきです。

投稿2023/04/04 06:13

doyuma

総合スコア66

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

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

taro3yui3

2023/04/04 14:15

ありがとうございます。 width指定してみると ul の代わりに div で結んだバージョンでは希望の配置ができました。 ul の代わりに div の性質の違いなのでしょうか?
guest

0

css

1.ul2 { 2 ... 3 box-sizing: border-box; 4 width: 50%; 5}

でいかがでしょうか。

投稿2023/04/04 04:42

int32_t

総合スコア20659

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

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

taro3yui3

2023/04/04 05:39

ご回答ありがとうございます。 試してみたのですが、かさなったままでした。 box-sizing: border-box については知らなかったのでこの機会に調べてみました。 使いこなせたら便利そうです。
int32_t

2023/04/04 05:43

重なる、というのは <ul> どうしが重なっているのですか? 「ul 2つで折り返し」はできてませんか?
taro3yui3

2023/04/04 14:15

「ul 2つで折り返し」ができなくってお互い重なり合っている感じです。 ただ、widthでimgに対してサイズの指定をすると ul の代わりに div で結んだバージョンでは希望の配置ができました。 NETで模写課題でulで結んで…と指定があるのですがdivタグとulだと見た目同じでものちのち変わってくるのでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問