動画と画像＆タイトル２列（横に2つ縦に2つの計4個）を横並びにして、入りきれなかった画像＆タイトルを動画の下に回り込ませて表示させたいのですが画像＆タイトルの２列目から動画の下に回り込んでしまいます。アドバイスよろしくお願いいたします。調べてみて動画と並べたい画像＆タイトルの4個と動画の下に回り込ませたい画像＆タイトルのクラスを分ける必要があるのではないかと感じたのですが、CSSのみで対応することは可能でしょうか？ ※ 該当ページ https://imgur.com/a/tTAIVhZ.png ※ 該当コード document.write( truncate( "テスト1", 19 ) ); タイトルテスト1 テスト１ aaaaa テスト3 テスト1 /* ↓ スライドの外枠 */ .carousel-area { margin: 23px 0px 0px 19px; display: inline-block; width: 540px; height: 380px; position: relative; overflow: hidden; /* はみ出したスライドを隠す */ } /* 一覧表示画面本体定義 */ .inline-player .image-card-wrap { width: 260px; margin-top: 23px; margin-left: 19px; vertical-align: top; word-wrap: break-word; zoom: 1; } /* 一覧表示画面の画像配置位置 */ .inline-player .image-card-wrap .image-thumbnail-card { height: 150px; width: 260px; }

つらい・・・

動画と画像＆タイトル2列を横並びにするにはどうすればよいでしょうか？

解決済

質問者：初心者サイト作成
質問日時：2025/03/06 22:51
回答数：2件

動画と画像＆タイトル２列（横に2つ縦に2つの計4個）を横並びにして、入りきれなかった画像＆タイトルを動画の下に回り込ませて表示させたいのですが画像＆タイトルの２列目から動画の下に回り込んでしまいます。アドバイスよろしくお願いいたします。

調べてみて動画と並べたい画像＆タイトルの4個と動画の下に回り込ませたい画像＆タイトルのクラスを分ける必要があるのではないかと感じたのですが、CSSのみで対応することは可能でしょうか？

※ 該当ページ
https://imgur.com/a/tTAIVhZ.png

※ 該当コード
<div class="inline-player">

<div class="carousel-area" style="">

<div
id="carousel"
class="carousel"
style="--w: 100%; transform: translateX(0%)"
>
<div class="carousel-container">
<div class="carousel-video-area" style="display: inline-block">
<a href="">
<div class="carousel-video-wrap">
<video
class="carousel-video-streaming"
src=""
type="video/mp4"
autoplay=""
muted=""
loop=""
></video>
</div>
<div class="carousel-video-title">
<script>
document.write(
truncate(
"テスト1",
19
)
);
</script>
タイトルテスト1
</div>
</a>
</div>
</div>
</div>

<span id="prev" class="prev"></span>
<span id="next" class="next"></span>

<ul class="indicator" id="indicator">
<li class="list active"></li>
</ul>
</div>
<div class="image-card-wrap" style="display: inline-block">
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト１
</div></a
>
</div>
<div class="image-card-wrap" style="display: inline-block">
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">aaaaa</div></a
>
</div>
<div class="image-card-wrap" style="display: inline-block">
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト3
</div></a
>
</div>
<div class="image-card-wrap" style="display: inline-block">
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link"></div
></a>
</div>
<div class="image-card-wrap" style="display: inline-block">
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト1
</div></a
>
</div>
</div>

<style>
/* ↓ スライドの外枠 */
.carousel-area {
margin: 23px 0px 0px 19px;
display: inline-block;
　 width: 540px;
height: 380px;
position: relative;
overflow: hidden;
/* はみ出したスライドを隠す */
}

/* 一覧表示画面本体定義 */
.inline-player .image-card-wrap {
width: 260px;
margin-top: 23px;
margin-left: 19px;
vertical-align: top;
word-wrap: break-word;
zoom: 1;
}

/* 一覧表示画面の画像配置位置 */
.inline-player .image-card-wrap .image-thumbnail-card {
height: 150px;
width: 260px;
}
</style>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： gura_
回答日時：2025/03/07 11:57

初心者サイト作成さん

････動画と画像＆タイトル２列（横に2つ縦に2つの計4個）を横並びにして、入りきれなかった画像＆タイトルを動画の下に回り込ませて表示させたい･･･････

１．誤記の全角スペースなどもあり、何をしたいのかわかりにくいですね。

２．現状説明より、どうしたいのか図示するほうが回答者には分かりやすいです。

３．ソースがあれば、それとどうかけ離れているかはわかりますから。

４．苦言が長くなりましたが、こういうことをしたいのではないですか。下記↓

５． style="display: inline-block" はすべて削除しました。
また色付けなどして余計な記述も付け加えてあります。それらは適当に削除してください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
/* 全体レイアウト定義 */
.inline-player {
display: grid;
grid: 1fr / repeat(4,1fr);
}

/* ↓ スライドの外枠 */
.carousel-area {
grid-row:1 / 3; grid-column:1 / 3; /* 4 マス分に配置 */
background: #ddf;/* 確認用色付け */
margin: 23px 0px 0px 19px;
/* display: inline-block; 削除 */
/* 　ここの全角スペース削除 */width: 540px;
height: 380px;
position: relative;
overflow: hidden;
/* はみ出したスライドを隠す */
}

/* 一覧表示画面本体定義 */
.inline-player .image-card-wrap {
background: #fdd;/* 確認用色付け */
width: 260px;
margin-top: 23px;
margin-left: 19px;
vertical-align: top;
word-wrap: break-word;
zoom: 1;
}

/* 一覧表示画面の画像配置位置 */
.inline-player .image-card-wrap .image-thumbnail-card {
background: #dfd;/* 確認用色付け */
height: 150px;
width: 260px;
}
</style>
</head>
<body>

<div class="inline-player">

<div class="carousel-area" style="">

<div
id="carousel"
class="carousel"
style="--w: 100%; transform: translateX(0%)"
>
<div class="carousel-container">
<div class="carousel-video-area" >
<a href="">
<div class="carousel-video-wrap">
<video
class="carousel-video-streaming"
src=""
type="video/mp4"
autoplay=""
muted=""
loop=""
></video>
</div>
<div class="carousel-video-title">
<script>
document.write(
truncate(
"テスト1",
19
)
);
</script>
タイトルテスト1
</div>
</a>
</div>
</div>
</div>

<span id="prev" class="prev"></span>
<span id="next" class="next"></span>

<ul class="indicator" id="indicator">
<li class="list active"></li>
</ul>
</div>

<div class="image-card-wrap" >
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト１
</div></a
>
</div>

<div class="image-card-wrap" >
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">aaaaa</div></a
>
</div>

<div class="image-card-wrap" >
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト3
</div></a
>
</div>

<div class="image-card-wrap" >
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">空白分追加</div
></a>
</div>

<div class="image-card-wrap" >
<a href=""
><div class="image-thumbnail-card">
<img src=""/>
</div>
<div class="image-title-link">
テスト1 ??
</div></a
>
</div>
</div>
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

A. gura_さん回答ありがとうございます。

画像を使って図示したほうが分かりやすいというアドバイス参考にさせていただきます。
３．のソースというのはソースコードのことでしょうか？

コードで教えていただきたい部分があります。
grid: 1fr / repeat(4,1fr); はどのような意味でしょうか？

.inline-player {
/* Grid Layout（グリッドレイアウト）は、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。*/
display: grid;
/* frとは gridレイアウトを使うに当たって誕生した新しいサイズの単位です。*/
/* repeat(4, 1fr) と指定すると、利用可能な空間の等しい割合(1fr)を占める4つの列（横）が作成されることを意味します。*/
grid: 1fr / repeat(4, 1fr);
width: 1140px;
margin: 0 auto 50px;
background-color: #fff;
border: 2px solid #999;
clear: both;
}

通報する

お礼日時：2025/03/07 21:30

No.2

回答者： gura_
回答日時：2025/03/08 09:33

No.1 gura_ です。

①. ３．のソースというのはソースコードのことです。

②．grid: 1fr / repeat(4,1fr); は
row を 1fr で繰り返し、
column を repeat(4,1fr) にせよという事です。

grid: auto-flow 1fr / repeat(4,1fr);
と書いた方が分かり易いですかね。参考↓
https://www.tohoho-web.com/css/prop/grid.htm

③．貴方の .inline-player { } の記述・解釈でほぼ満点だと思います。
＊ただ、clear: both; はここでは不要です。

④．こちらもご参考に。↓
https://www.tohoho-web.com/ex/grid.html