グリッドレイアウトHTMLとCSS

趣味のイラストをまとめるためにサイトを作っているのですが、画像の配置が上手くできずに行き詰まっています。
大小様々なサイズのイラストを29枚、綺麗に1画面に収まる様に計算して作成しました。漫画のコマを割る様な形で全部大小バラバラです。(斜め線はありません)
ところがいざ載せようと思ったところ、縦横どこかしらが合う様に作られたCSS解説しか見つけられず冷や汗が出てきました。
上の列①＋②＋③＝その下の列④という様なもの(小さいサイズのものを基準にして大きいもののサイズを表すパターン)はあるのですが、いかんせんこちらの配置は①(縦長)＋②＋③＝①の下半分＋④(②の幅の3/2)＋⑤(②の幅の残り3/1と③)！と言った形で中途半端なサイズ感で組み合わせて綺麗な長方形に収めているため、「基準にすべきサイズ」がありません。見事に全部比率が違うので、どう足していってもどれにもなれません。

どうにかして上手く配置する方法はないんでしょうか。
面倒なことを言っている自覚はあるのですが、どうにも上手く検索できず答えに辿りつけません。有識者の方、よろしければご教授ください。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/02/22 10:16

こんにちは

実際に考えていらっしゃるレイアウトがどのようなものなのかわかりませんが・・

＞縦横どこかしらが合う様に作られたCSS解説しか見つけられず～
完全にフリーに位置を指定したいのなら、position:absoluteで個々に位置を指定すれば可能でしょう。
ひとつずつ位置を指定する必要があるので、それなりに面倒ですが・・
https://developer.mozilla.org/ja/docs/Learn/CSS/ …

多少なりともモジュール的な寸法があるのなら、いわゆるグリッドレイアウトも可能かと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/CS …


個々の画像を若干縮小・拡大表示しても良いのなら、すでに見つけていらっしゃるようなレイアウト方法でも可能ではないかと推測します。
div要素などで外枠をレイアウトしておいて、画像はその中にフィットするように配置しておけば、いちいちサイズを計算しなくてもレイアウトだけ考えれば済むようになるであろうと想像します。
そのようなレイアウトであれば、比較的簡単に指定できるようなツールも多く作られています。
以下は一例です。
https://masonry.desandro.com/layout.html

実際の内容が不明なので、ご参考にでもなれば・・・

この回答へのお礼

丁寧に教えてくださりありがとうございました！
ひとつずつ試してやってみようと思います！
ありがとうございました！

お礼日時：2023/03/06 02:16