趣味のイラストをまとめるためにサイトを作っているのですが、画像の配置が上手くできずに行き詰まっています。
大小様々なサイズのイラストを29枚、綺麗に1画面に収まる様に計算して作成しました。漫画のコマを割る様な形で全部大小バラバラです。(斜め線はありません)
ところがいざ載せようと思ったところ、縦横どこかしらが合う様に作られたCSS解説しか見つけられず冷や汗が出てきました。
上の列①+②+③=その下の列④という様なもの(小さいサイズのものを基準にして大きいもののサイズを表すパターン)はあるのですが、いかんせんこちらの配置は①(縦長)+②+③=①の下半分+④(②の幅の3/2)+⑤(②の幅の残り3/1と③)!と言った形で中途半端なサイズ感で組み合わせて綺麗な長方形に収めているため、「基準にすべきサイズ」がありません。見事に全部比率が違うので、どう足していってもどれにもなれません。
どうにかして上手く配置する方法はないんでしょうか。
面倒なことを言っている自覚はあるのですが、どうにも上手く検索できず答えに辿りつけません。有識者の方、よろしければご教授ください。
No.1ベストアンサー
- 回答日時:
こんにちは
実際に考えていらっしゃるレイアウトがどのようなものなのかわかりませんが・・
>縦横どこかしらが合う様に作られた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
実際の内容が不明なので、ご参考にでもなれば・・・
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- 着物・浴衣・水着 男物の浴衣を女性が着る時の注意点 1 2022/07/01 12:40
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- 俳優・女優 実物を見たことがないのに、画像から実寸サイズを導き出すことってできるんでしょうか。 このTwitte 1 2023/08/25 19:11
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
- レディース 骨格7タイプ診断で自分がどれなのか分かりません ラブリーとかドラマチックとかよく分かりません正直 ち 1 2022/10/01 21:23
- 格闘技 このコブラツイストの形(かた)について教えてください。 4 2022/11/12 18:37
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- Illustrator(イラストレーター) イラストレーター(イラレ)で書き出した画像が荒れます… 3 2022/05/19 17:30
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ズームインした画像をズームイ...
-
リサイズ
-
gimp2でサイズ変更がうまくでき...
-
GIMP、サイズ変更
-
aviutlを利用すると、縦横比が...
-
フォトショップ7.で取り込んだ...
-
ペイントで画像をドット絵に加...
-
premiere pro:黒い帯消したい
-
wordに貼り付けたvisioのサイズ...
-
複数の写真を1枚に印刷
-
Photoshopで複数の画像に一定の...
-
Photoshop Elementsでのカンバ...
-
イラストレーターに取り込んだ...
-
保存した画像の余白カットしたい
-
【アイコンの背景色が黒塗りに...
-
ペイントのBMPで作ったアイコン...
-
画像の拡大率を固定したまま次...
-
イラストレーター、配置した白...
-
Snipping Toolのキャプチャ画面...
-
イラストレーターに配置した画...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jpgの画像を画像サイズを変えず...
-
premiere pro:黒い帯消したい
-
縦横比率維持したままのスクリ...
-
ワードに貼り付けた画像の画像...
-
イラストレーターで常に同じサ...
-
ペイントで画像をドット絵に加...
-
複数の写真を1枚に印刷
-
縮専ソフトについての質問
-
画像サイズを、1MB以下にしたい。
-
GIFアニメーションのファイルサ...
-
After Effectsにjpgを貼ると画...
-
GIMP キャンバスサイズの変更で
-
画像のサイズ変更について
-
A6のチラシを作るには
-
バナーの画像がぼやけてしまいます
-
画像を回転するとアスペクト比...
-
wordに貼り付けたvisioのサイズ...
-
画像の圧縮とサイズ変更とリサ...
-
フォトショップ7.で取り込んだ...
-
Photoshopで複数の画像に一定の...
おすすめ情報