No.1ベストアンサー
- 回答日時:
こんにちは
同じ形式のレイアウトを並べるだけなので、一つを枠内にレイアウトできるようにしておけば、あとは並べるだけです。
とは言え、左右、上下などレイアウトの表現が大変アバウトなので、具体的な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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS css初心者 フレックスボックスの適用を一部適用除外したいですが方法が分かりません。 2 2023/11/27 00:13
- HTML・CSS CSS初心者です。わかる方教えてください。 3 2023/09/08 22:04
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- HTML・CSS datepickerを使ってカレンダーを表示出来たのですが、そのカレンダーを付属画像の右側にある カ 1 2021/12/23 08:43
- Word(ワード) ワード。オブジェクトの一部分にグラデーションを塗るには 2 1 2022/10/04 16:25
- その他(車) 難しい駐車で非常に困っております。 8 2022/02/06 09:11
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS スマホで、左右にスワイプしてウェブページを読み込ませる方法は? 1 2023/10/16 17:39
- Excel(エクセル) ある文字を含む際に、値を返す数式についてです 5 2022/08/28 16:58
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
HTMLですCSSです 画像のように作りたいのですが 以下のようにあってますか?間違ってる感じがしま
HTML・CSS
-
プログラマーがHTMLとCSSでウェブデザインをするのは大人の幼稚園なんじゃないかと思い込んでる
その他(プログラミング・Web制作)
-
HTMLです ブロック要素にするにはどうすれば良いですか?教えてくださいお願いします
HTML・CSS
-
-
4
HTMLですCSSです この画像のように 文字を打ち込みたいのですが、 下の3この四角にを画像のよ
HTML・CSS
-
5
HTMLです 店主のこだわりというのを画像のように表せますか? 背景は茶色で 文字は白で 点線と白四
HTML・CSS
-
6
すいません HTMLです この画像をHTML、(もしくはCSS)で表すにはどうすれば良いですか? 教
HTML・CSS
-
7
HTMLです すいません教えてください お願いします 色の点せんは関係ないので色の点線は作らなく
HTML・CSS
-
8
CSSで謎の現象
HTML・CSS
-
9
text-indentは、要素全体の透明度ですか?
HTML・CSS
-
10
大至急。webのシングルページを作ろうと考え、イラレでデザインをしました。 それからの手順で悩んでる
HTML・CSS
-
11
HTMLです次の意味を持つ要素または次の効果を設定するプロパティを選んでください。とい
HTML・CSS
-
12
初心者html・CSS ウィンドウを縮小するとタグの一部が隠れてしまう。
HTML・CSS
-
13
HTMLです 四角みたいにして中には ホ、 ア、 レ みたいに 上の四角は2つ、 下は左に1つ、 と
HTML・CSS
-
14
かっこいいウェブを作るテク
HTML・CSS
-
15
HTMLの CSSのファイルというのは、 .cssにするとメモ帳が出てくるのですが 大丈夫でしょうか
HTML・CSS
-
16
下のやつをHTMLで表せますか?すいません これは最後に付け加えたいです 最後に お願いします Co
HTML・CSS
-
17
JRのjsonファイルって使って大丈夫そ?
その他(プログラミング・Web制作)
-
18
HTMLで作った時報アプリが動きません
JavaScript
-
19
CSSでつくったメニューのアニメーションがうまく動かない・変えたい
HTML・CSS
-
20
ワードプレスインストールできない
オープンソース
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
「貸してください」という依頼...
-
「~頂けますようお願いします...
-
VBA 電話番号の正規表現について
-
「以上、よろしくお願い致しま...
-
「指示に従ってください」「迎...
-
20mシャトルランって100回走る...
-
太ってる自分も好きになる方法...
-
分数に1~9までの数を1回だけ入...
-
wppxファイルが開けないのです...
-
言葉使いについて 「ご着席お願...
-
「袋どうされますか」と聞かれ...
-
中学3年です。筋トレを2月から...
-
ご相談お願いいたしますは二重...
-
データベースソフトの「TCARD f...
-
ご指導賜りますようお願い申し...
-
氷晶石の化学式を理解もしくは...
-
ご不幸のあった方へのお願いの...
-
小数点第一位とは・・・
-
Amazonとdポイント連携(4/10~...
-
集合の要素の個数
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
「~頂けますようお願いします...
-
「貸してください」という依頼...
-
「以上、よろしくお願い致しま...
-
「指示に従ってください」「迎...
-
20mシャトルランって100回走る...
-
L判 と 2L判 は 何cm×何cm
-
ご相談お願いいたしますは二重...
-
お願いされたら、好きじゃなく...
-
小数点第一位とは・・・
-
ご指導賜りますようお願い申し...
-
2ヶ月って何日くらいでしたっけ...
-
高麗川駅に電話したいのですが...
-
wppxファイルが開けないのです...
-
57kgの5パーセントってなんkgで...
-
言葉使いについて 「ご着席お願...
-
すごい簡単な質問ですが。
-
彼女がお泊まりですぐに拗ねます…
-
ご不幸のあった方へのお願いの...
-
リストボックスの特定行の背景色
-
もしもスマホガラスフィルムをd...
おすすめ情報