締切済み

HTMLを使った画像と文章の配置について

2019/05/09 09:49

ご覧頂きありがとうございます。イメージ画像のように画像と文章を配置したいのですが、この場合どのようなコーディングを行えばよいでしょうか？ワードプレスを使用しております。

kin66
お礼率22% (24/108)

HTML
回答数2
ありがとう数1

みんなの回答 （2）
専門家の回答

みんなの回答

Proof4
ベストアンサー率78% (151/192)

2019/05/10 00:50 回答No.2

CSS3のGridレイアウトを使えば容易に実現できます。以下にコーディング例を示すので参考にしてください。 ------ <!DOCTYPE html> <html> <head> 　<meta charset="UTF-8"> 　<style> 　　main{ 　　　width: 1000px; 　　　display: grid; 　　　template-rows: 1fr; 　　　template-columns: auto auto; 　　　gap: 10px; 　　} 　　main > *{ 　　　color: white; 　　　padding: 30px; 　　　display: flex; 　　　align-items: center; 　　　justify-content: center; 　　　box-sizing: border-box; 　　　font-size: 30px; 　　} 　　#image1{ 　　　background: #6666ff; 　　　width: 50%; 　　　grid-column: 1/2; 　　　grid-row: 1/2; 　　} 　　article{ 　　　background: #ff6666; 　　　height: 200px; 　　　grid-column: 1/2; 　　　grid-row: 2/3; 　　} 　　#image2{ 　　　background: #6666ff; 　　　grid-column: 2/3; 　　　grid-row: 1/3; 　　} 　</style> </head> <body> 　<main> 　　<div id="image1">画像</div> 　　<article>文章</article> 　　<div id="image2">画像</div> 　</main> </body> </html> ------ ※OKWaveの仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。