画像を均等幅に並べたい

前提・実現したいこと

htmlで画像を並べる

作りたいもの

1段目→見出し(th)画像1枚(td)
2段目→見出し(th)画像2枚(td)
3段目→見出し(th)画像3枚(td)
4段目→見出し(th)画像4枚(td)

上記をピラミッド型ではなく、縦長の長方形のように表示したいです

1枚目の画像をbody幅100％
2枚目の画像をbody幅50%で×2
3枚目の画像をbody幅3分の1で×3
4枚目の画像をbody幅25%で×4

発生している問題・エラーメッセージ

th、tdをcolspanで12分割

1段目に１２
2段目に６
3段目に４
4段目に３

このように振っているのですが、3段目のレイアウトが崩れてしまいます

該当のソースコード

    <table>
      <tr>
        <th colspan="12">1</th>
      </tr>
      <tr>
        <td colspan="12"><img src="" width="100%"></td>
      </tr>
      <tr>
        <th colspan="12">2</th>
      </tr>
      <tr>
        <td colspan="6"><img src="" width="100%"></td>
        <td colspan="6"><img src="" width="100%"></td>
      </tr>
      <tr>
        <th colspan="12">3</th>
      </tr>
      <tr>
        <td colspan="4"><img src="" width="100%"></td>
        <td colspan="4"><img src="" width="100%"></td>
        <td colspan="4"><img src="" width="100%"></td>
      </tr>
      <tr>
        <th colspan="12">4</th>
      </tr>
      <tr>
        <td colspan="3"><img src="" width="100%"></td>
        <td colspan="3"><img src="" width="100%"></td>
        <td colspan="3"><img src="" width="100%"></td>
        <td colspan="3"><img src="" width="100%"></td>
      </tr>
    </table>
  </body>
コード

試したこと

bodyを480pxで指定して行っています

画像はセル一杯に表示したいのでwidth＝100%を指定してます

ヒントをいただきたいです
お願い致します

Lhankor_Mhy

2021/04/09 05:54

テーブルでやるのはよくないと思いますが、これは必須条件でしょうか？

退会済みユーザー

2021/04/09 05:57

ありがとうございます。必須ではないかと思いますが、tableを学んだ後すぐに出てきた問題なので、tableを使用するものだと判断して上のようなコードを書いております。

Lhankor_Mhy

2021/04/09 06:01

Chrome では、テーブルセルのサイズが必ず整数になるので、端数が出た時にピクセル単位でレイアウトがずれるのですが、それは構いませんか？

退会済みユーザー

2021/04/09 06:08

bodyを480pxと、12で割れるように指定したのですがこれでも端数は必ず出るのでしょうか？ 3段目は160pxが3つになるものだと考えていました。端数が出た場合のずれは問題ないです。

Lhankor_Mhy

2021/04/09 06:15

border-collapse とかがありますから、計算通りにいかないこともあるかと思います。もちろん、端数が出ない場合もあるかと思います。

行動規範の内容に同意します

回答2件

ベストアンサー

先頭にダミー行を入れて、

html
1<table>
2  <tr>
3    <td></td>
4    <td></td>
5    <td></td>
6    <td></td>
7    <td></td>
8    <td></td>
9    <td></td>
10    <td></td>
11    <td></td>
12    <td></td>
13    <td></td>
14    <td></td>
15  </tr>

CSSでセルのwidthを決めてしまうのはどうでしょうか。
100%/12=8.33333% でいいと思います。

投稿2021/04/09 06:17

Lhankor_Mhy

総合スコア36960

退会済みユーザー

2021/04/09 06:59

ありがとうございます。私が上で記載しているコードのcolspanをwidthの％に変える、という意味でしょうか？教えていただいたコードでは、一番上に記載した私が作成したい、 1段目→見出し(th)画像1枚(td) 2段目→見出し(th)画像2枚(td) 3段目→見出し(th)画像3枚(td) 4段目→見出し(th)画像4枚(td) 上記をピラミッド型ではなく、縦長の長方形のように表示にはなりませんでした。

Lhankor_Mhy

2021/04/09 07:01

> 私が上で記載しているコードのcolspanをwidthの％に変える、という意味でしょうか？そうではないですね。サンプルを置いておきます。 https://jsfiddle.net/Lhankor_Mhy/kr6nqpdg/2/

退会済みユーザー

2021/04/12 15:40

日にちが空いてしまい申し訳ございません。飛ばして他の課題に着手しておりました。お陰様で解決致しました。ありがとうございます。

行動規範の内容に同意します

Flexbox を使えばシンプルでレスポンシブ対応も楽ですよ。

<html lang="ja">
	<head>
		<meta charset="utf-8">
		<style>
			p {
				margin: 0;
			}
			img {
				max-width: 100%;
				vertical-align: bottom;
			}
			[class^="col"] {
				display: flex;
			}
			@media screen and (max-width:768px) {
				.col3, .col4 {
					flex-direction: column;
				}
			}
		</style>
	</head>

	<body>
		<div class="col1">
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
		</div>
		<div class="col2">
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/999/fff.png&text=img"></p>
		</div>
		<div class="col3">
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/999/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
		</div>
		<div class="col4">
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/999/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/CCC/fff.png&text=img"></p>
			<p><img src="http://dummyimage.com/2000x200/999/fff.png&text=img"></p>
		</div>
	</body>
</html>

CSS Flexbox の基礎知識と使い方をやさしく解説 | コリス

投稿2021/04/09 08:22