すいませんHTMLです cssです教えてください！お願いします！↓ 画像のようにイを、左上にアを

解決済

質問者：Wohinfahrensie
質問日時：2023/12/24 16:15
回答数：1件

すいませんHTMLです
cssです教えてください！お願いします！↓
画像のように
イを、左上に
アを右下に
画像をその下の左下に隣にすいません。をいれて
その右下にけんさく赤文字で下線を
お願いします
四角は白で

背景はできれば茶色でお願いします！

使う画像は左上から以下の通りでお願いします
hot_coffee.png
ice_caffee_au_lait.png
ice_coffee.png

通報する

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

質問の本文を隠す

回答 (1件)

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

No.1ベストアンサー

回答者： fujillin
回答日時：2023/12/25 13:41

こんにちは

同じ形式のレイアウトを並べるだけなので、一つを枠内にレイアウトできるようにしておけば、あとは並べるだけです。

とは言え、左右、上下などレイアウトの表現が大変アバウトなので、具体的なCSS等に落としようがありません。
（多分、アバウトな発想しかなさっていないのだと思いますが、意図がわからないこともあって回答がつきにくいのだと思います。）

とりあえず勝手に解釈して、似た様な結果になる一例を以下に。
考え方によって方法は様々ですので、あくまでもご参考までに。

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { background-color: sienna; }
ul, ul * { margin: 0; padding: 0; }
ul {
width: 80%; max-width: 800px;
margin: 50px auto;
list-style-type: none;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 25px;
}
li {
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 20px;
background-color: white;
}
li > div:nth-child(3n + 2) {
display:flex;
justify-content: flex-end;
align-items:flex-end;
flex-wrap: wrap;
}
li > div:nth-child(2) {
min-height: 3em;;
}
li > div:nth-child(5) {
grid-column: 2; grid-row: 3;
color: red; text-decoration: underline;
}
img { width: 100%; }
</style>
</head>
<body>
<ul>
<li>
<div>イ</div><div>ア</div>
<img src="img/photo01.jpg" >
<div>すいません</div><div>けんさく</div>
</li>
<li>
<div>イ</div><div>ア</div>
<img src="img/photo02.jpg" >
<div>すいません</div><div>けんさく</div>
</li>
<li>
<div>イ</div><div>ア</div>
<img src="img/photo03.jpg" >
<div>すいません</div><div>けんさく</div>
</li>
</ul>
</body>
</html>