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

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

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

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

Q&A

解決済

2回答

2470閲覧

cssの画像表示で、行ごとに2列・3列の異なる表示をしたい

dotdotuniv

総合スコア8

CSS

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

0グッド

0クリップ

投稿2020/04/19 03:16

編集2020/04/19 03:26

理想

  • 画像を表示例の、アルファベットのように並べたい。つまり、空白領域を含めて3列。
  • 可能であれば、ABなどの順序を任意で変更して、並べ替えできるようにしたい。
  • 画像右側に固定メニューを表示(ここは作成済)、全体をflexで分割している。

表示例:
AB
CDE
FGH

現状コード (htmlはざっくり)

css

1.parent { 2 display: flex; 3 justify-content: left; 4} 5 6.child { 7 flex-wrap: wrap; 8  display: inline-block; 9} 10.right-side { 11 .... 12}

html

1<div class="parent"> 2<div class="child">画像読み込み</div> 3<div class="right-side">固定メニュー</div> 4</div>

不明点

  • flexで分割した子要素内で、飛ばして表示することは可能なのか?
  • 並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか?
  • 画像サイズに変動があっても、自動で縮小されて3列に表示されるか?

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

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

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

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

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

guest

回答2

0

ベストアンサー

  • flexで分割した子要素内で、飛ばして表示することは可能なのか?
  • 並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか?

上記については、A、Bのあとに空の<div>を1つ置けばできます。
CodePenで作ってみたので、ご参照ください。

HTML

1<div class="img-group"> 2 <div style="background-image: url(aaa.jpg);"></div> 3 <div style="background-image: url(bbb.jpg);"></div> 4 <div></div> 5 <div style="background-image: url(ccc.jpg);"></div> 6 <div style="background-image: url(ddd.jpg);"></div> 7 <div style="background-image: url(eee.jpg);"></div> 8 <div style="background-image: url(fff.jpg);"></div> 9 <div style="background-image: url(ggg.jpg);"></div> 10 <div style="background-image: url(hhh.jpg);"></div> 11</div>

CSS

1.img-group { 2 display: flex; 3 flex-wrap: wrap; 4 /* align-items: flex-start; */ 5} 6.img-group > * { 7 flex-grow: 0; 8 flex-shrink: 0; 9 flex-basis: calc(100% / 3); /* 横幅を指定 */ 10 height: 20vw; /* 高さを指定。100vwは画面の横幅100%の意味です。好きなように設定してください */ 11 12 /* 背景画像のための設定 */ 13 background-position: center center; 14 background-size: cover; 15}

display: grid;がやりたいことに近そうなので、余裕があれば調べてみることをオススメします。
(IE11では実装がとても面倒にはなるので、対象にしているのであればdisplay: flex;のままでいいかもしれません。)

投稿2020/04/19 04:30

編集2020/04/19 07:16
new1ro

総合スコア4528

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

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

dotdotuniv

2020/04/19 10:54

>空の<div>を1つ置けばできます。 css側でどうにかいじろうとしていたので、完全に盲点でした。。。 ありがとうございました。
guest

0

不明点

  • flexで分割した子要素内で、飛ばして表示することは可能なのか?
  • 並び替えをするには、orderプロパティを使えば良さそうだが、空白領域を飛ばせるのか?

childブロック内に画像(img)を入れるとして、

html

1<div class="parent"> 2 <div class="child"> 3 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=A"> 4 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=B"> 5 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=C"> 6 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=D"> 7 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=E"> 8 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=F"> 9 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=G"> 10 <img src="https://placehold.jp/100/3d4070/ffffff/300x300.png?text=G"> 11 </div> 12 <div class="right-side"> 13 固定メニュー</div> 14</div>

空白は、before疑似要素を order でA、Bのあとに配置すればいいでしょう。

css

1.parent { 2 max-width: 1000px; 3 display: flex; 4 margin: 0 auto; 5} 6 7.child { 8 width: 70%; 9 display: flex; 10 justify-content: left; 11 flex-wrap: wrap; 12} 13.right-side { 14 width: 30%; 15 background-color: pink; 16} 17 18.child > img, .child::before { 19 display: block; 20 width: 31%; 21 margin: 1%; 22} 23 24.child::before { 25 content: ''; 26 order: 0; 27} 28.child img:nth-child(-n+2) { 29 order: -1 30}

Codepenサンプル

  • 画像サイズに変動があっても、自動で縮小されて3列に表示されるか?

画像の縦横比が同じなら上記のCSSでOK。
縦横比か異なる場合は、他の画像とどのようにそろえるのかを明確にしてもらう必要があります。

投稿2020/04/19 05:33

編集2020/04/19 05:34
hatena19

総合スコア34075

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問