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

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

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

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

Q&A

解決済

2回答

1879閲覧

CSSで画像を写真のように並べたいのですがどうしても出来ません

tomotomotomo

総合スコア18

CSS

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

0グッド

0クリップ

投稿2019/01/02 07:01

編集2019/01/02 07:41

前提・実現したいこと

CSSで画像を並べたいです。
ここに質問の内容を詳しく書いてください。
CSSで図のように画像を並べたいです。
どなたかご伝授お願いいたします。

HTMLの方は

<div class="gallery_wrap"> <div class="gallery_box box01"> <img src="img\category\sotugyou.PNG" alt=""> </div> <div class="gallery_box box02"> <img src="img\category\sotugyou.PNG" alt=""> </div> <div class="gallery_box box03"> <img src="img\category\sotugyou.PNG" alt=""> <img src="img\category\sotugyou.PNG" alt=""> </div> <div class="gallery_box box04"> <img src="./image/slide_img03.jpg" alt=""> <img src="./image/slide_img04.jpg" alt=""> </div> <div class="gallery_box box05"> <img src="./image/slide_img01.jpg" alt=""> </div> <div class="gallery_box box06"> <img src="./image/slide_img02.jpg" alt=""> </div> <div class="gallery_box box07"> <img src="./image/slide_img02.jpg" alt=""> </div> <div class="gallery_box box08"> <img src="./image/slide_img03.jpg" alt=""> <img src="./image/slide_img04.jpg" alt=""> </div> <div class="gallery_box box09"> <img src="./image/slide_img02.jpg" alt=""> </div> </div>

にしています。

CSSは

.gallery_wrap{ display: flex; width: 70%; height: auto; margin: 20px auto; } .gallery_box{ width: 33%; height: 100%; margin: 10px; } .box3{ display: flex; flex-direction: column; } .box4{ display: flex; flex-direction: column; } .box8{ display: flex; flex-direction: column; } .gallery_box img{ width: 100%; height: 100%; object-fit: cover; } .box03 img{ width: 100%; height: 50%; } .box04 img{ width: 100%; height: 50%; } .box08 img{ width: 100%; height: 50%; }

よろしくお願いいたします。

イメージ説明
イメージ説明

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

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

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

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

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

y_waiwai

2019/01/02 07:03

現状のコードではどういうふうになるんでしょうか
kei344

2019/01/02 07:12 編集

(質問文は編集できます)質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、現在試されているCSSも提示してください。
tomotomotomo

2019/01/02 07:19

現在のCSSです .gallery_wrap{ display: flex; width: 70%; height: auto; margin: 20px auto; } .gallery_box{ width: 33%; height: 100%; margin: 10px; } .box3{ display: flex; flex-direction: column; } .box4{ display: flex; flex-direction: column; } .box8{ display: flex; flex-direction: column; } .gallery_box img{ width: 100%; height: 100%; object-fit: cover; } .box03 img{ width: 100%; height: 50%; } .box04 img{ width: 100%; height: 50%; } .box08 img{ width: 100%; height: 50%; }
kei344

2019/01/02 07:20

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文にコードブロックで質問文に追記することをお勧めします。
退会済みユーザー

退会済みユーザー

2019/01/02 07:24

画像ですが画質が悪いため詳細が見えません。 もう少し高画質の画像をあげられますか?
tomotomotomo

2019/01/02 07:34

すみません お願いいたします 現状は全部(3つ目と4つ目と5.6と10.11は小さくなって縦2列に並んでいます)横に並んでいるじょうたいです
guest

回答2

0

ベストアンサー

CSS

1.gallery_wrap { 2 flex-wrap: wrap; /* 折り返すのに必要 */ 3} 4.gallery_box { 5 width: calc(33% - 20px); /* margin分を確保 */ 6 height: auto; /* heightを指定しないほうが良い */ 7} 8```**動くサンプル:**[https://jsfiddle.net/hd7uaenp/](https://jsfiddle.net/hd7uaenp/)

投稿2019/01/02 08:02

kei344

総合スコア69364

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

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

tomotomotomo

2019/01/02 08:48

ありがとうございます。 並べるのが苦手で、ものすごく助かりました。 もっと勉強します。 ありがとうございました。
guest

0

こうですか?
https://jsfiddle.net/oq0m7bfw/

横幅を指定していらっしゃいますので、それに合わせて「.s」にCSSかけてます。

ただ上のように画面に入りきらないと困るケースもあると思うので、その場合「.s」のCSS削除して、「.gallery_wrap」にお好きなwidthを指定してあげればいいと思います。

投稿2019/01/02 08:19

mac_mac

総合スコア17

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

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

tomotomotomo

2019/01/02 08:50

ありがとうございます。 どうしても並べるのが苦手で悪戦苦闘していました。 もっと勉強して、並べれるようになりたいです。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問