ID非公開

2021/10/21 1:26

22回答

プログラミングについて

画像
補足

画像と文章の塊の4つの配置関係について教えて頂きたいです。

ベストアンサー

0

ThanksImg質問者からのお礼コメント

返信が遅くなって申し訳ございません! お二方ともありがとうございました。 大変助かりました、ありがとうございました!私が知っているコードでかいたID非公開さんをベストアンサーに選ばさせていただきました。

お礼日時:10/21 18:40

その他の回答(1件)

0

私はプログラミングが出来ないのですが......。 grid レイアウトではこうなります。 幅や高さは仮です。 4つの部分に全部 div を使うのも芸が無いので、テキストの部分には article 要素を採用しました。article 要素を用いたので、子要素に見出し(h2~h6)が必須です。 ● CSS div#grid {width: 600px; height: 600px; display: grid; grid-template-columns: 295px 295px; grid-template-rows: 295px 295px; gap: 10px; margin: auto;} div.image1 {grid-column: 1; grid-row: 1; border: blue solid 5px;} article.text1 {grid-column: 2; grid-row: 1;} article.text2 {grid-column: 1; grid-row: 2;} div.image2 {grid-column: 2; grid-row: 2; border: blue solid 5px;} p.exp {text-align: justify;} p.foot {text-align: right;} img.full {width: 100%; height: 100%;} ● HTML <div id="grid"> <div class="image1"> <img src="images/blue.jpg" alt="" class="full"> </div> <article class="text1"> <h3>見出し見出し見出し</h3> <p class="exp">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="foot">脚部脚部脚部脚部</p> </article> <div class="image2"> <img src="images/blue.jpg" alt="" class="full"> </div> <article class="text2"> <h3>見出し見出し見出し</h3> <p class="exp">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> <p class="foot">脚部脚部脚部脚部</p> </article> </div>