動画と画像&タイトル2列(横に2つ縦に2つの計4個)を横並びにして、入りきれなかった画像&タイトルを動画の下に回り込ませて表示させたいのですが画像&タイトルの2列目から動画の下に回り込んでしまいます。アドバイスよろしくお願いいたします。
調べてみて動画と並べたい画像&タイトルの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">
テスト1
</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>
No.2
- 回答日時:
No.1 gura_ です。
①. 3.のソースというのはソースコードのことです。
②.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
No.1ベストアンサー
- 回答日時:
初心者サイト作成 さん
・・・・動画と画像&タイトル2列(横に2つ縦に2つの計4個)を横並びにして、入りきれなかった画像&タイトルを動画の下に回り込ませて表示させたい・・・・・・・
1.誤記の全角スペースなどもあり、何をしたいのかわかりにくいですね。
2.現状説明より、どうしたいのか図示するほうが回答者には分かりやすいです。
3.ソースがあれば、それとどうかけ離れているかはわかりますから。
4.苦言が長くなりましたが、こういうことをしたいのではないですか。下記↓
5. 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">
テスト1
</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>
A. gura_さん回答ありがとうございます。
画像を使って図示したほうが分かりやすいというアドバイス参考にさせていただきます。
3.のソースというのはソースコードのことでしょうか?
コードで教えていただきたい部分があります。
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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS サイトにコンテンツを並べる際の CSS についてアドバイスお願い致します。 5 2024/07/08 21:39
- HTML・CSS スライダーの枠に動画を収めるにはどのように修正すれば良いでしょうか? 1 2024/08/10 20:23
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript Colorboxがうまく設置できません 2 2024/01/13 16:59
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ 3 2023/12/25 16:07
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- HTML・CSS HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま 3 2023/12/24 16:15
- JavaScript Q&A掲示板の入力フォームに文字数制限を設けて入力可能な文字数を表示したい 1 2024/04/08 02:46
このQ&Aを見た人はこんなQ&Aも見ています
-


Dreamweverは今も主流なんですか? 昔使われてたツールだって言う人もいたけど、殆どの会社はこ
HTML・CSS
-


testファイル内にある複数のpngファイルを昇順に1スライド1枚ずつパワポに貼り付けたい
Visual Basic(VBA)
-


Web画面の文字をVB6で取得したい
Visual Basic(VBA)
-
-
4

プログラミングについて プログラミングの練習(勉強)ができるようなサイトなどありませんか? あれば教
その他(プログラミング・Web制作)
-
5

pythonでAmazonのほしいものリストをローカル保存するスクリプト書いたら一部しか保存できぬ!
その他(プログラミング・Web制作)
-
6

Xamppはオープンソースのディストリビューションですか?
オープンソース
-
7

プログラミングの進学について
その他(プログラミング・Web制作)
-
8

[Excel VBA]特定の条件で文字を削除&残す処理をするファイルを作成したいです
Visual Basic(VBA)
-
9

Web初心者です。 簡易的なWebページを作成し
その他(プログラミング・Web制作)
-
10

エクセル タブの下のメニューを選択 実行するコード
Visual Basic(VBA)
-
11

Excelの計算が合いません。 諸事情で会計の簡素な購入・販売諸元表を作っているのですが、一つの項目
Excel(エクセル)
-
12

c++の勉強方法を教えてくださいプログラミングをやった事がなく1から勉強を始めようと思います1日1時
C言語・C++・C#
-
13

XMLサイトマップの登録方法がわかりません
XML
-
14

AIのプログラムについて教えてください
その他(プログラミング・Web制作)
-
15

エクセルを使ってQRコードを作成したい。
Excel(エクセル)
-
16

【ExcelVBA】dictionaryの重複判断の基準(セル結合だと違う値として認識される)
Visual Basic(VBA)
-
17

VSCode で HTML と PHP が混在するファイルで自動整形を行いたい
PHP
-
18

【ExcelVBA】5万行以上のデータ比較の効率的な処理方法について
Visual Basic(VBA)
-
19

Trees掲示板CGI(CGI-Resque氏作)+ 画像添付 機能のようなフリーCGIありますか?
CGI
-
20

検索1位なのに依頼がない
SEO
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
HTML/CSSを使って写真のような...
-
スマホ(android)のタッチパネ...
-
初心者html・CSS ウィンドウを...
-
ホームページの制作について教...
-
CSSデータの作成方法について(...
-
メモ帳の段落の揃え方
-
HTMLタグのあるCSVファイルを利...
-
WEBページを強制的に横画面で見...
-
css初心者 フレックスボックス...
-
テーブルタグのセルの幅の一部...
-
HTMLでクロス抽出したい
-
レスポンシブで困っています・・
-
GoogleSearchControlにホームペ...
-
htmlの<input type=”file”>でア...
-
Webサイトの「デザインのみ(コ...
-
webディベロッパーについて詳し...
-
CSSを教えて下さい webデザイナ...
-
静止画画像をクリックすると音...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
テーブルの行を折りたたみたい...
-
レスポンシブで困っています・・
-
HTMLでクロス抽出したい
-
iPhoneで HTMLファイルを閲覧
-
HTML/CSSを使って写真のような...
-
ホームページの制作について教...
-
スマホでHTMLファイルを開いて...
-
GoogleSearchControlにホームペ...
-
メモ帳の段落の揃え方
-
css初心者 フレックスボックス...
-
スマホ(android)のタッチパネ...
-
WEBページを強制的に横画面で見...
-
角丸画像の背景色を透明にした...
-
、URL化させるにはどうしたらい...
-
HTMLタグのあるCSVファイルを利...
-
静止画画像をクリックすると音...
-
テーブルのセルデータを自動改...
-
テーブルタグのセルの幅の一部...
-
スマホで、左右にスワイプして...
おすすめ情報











