こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

ご覧頂きありがとうございます。

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

投稿日時 - 2019-05-09 09:49:19

QNo.9614917

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.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の仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。

投稿日時 - 2019-05-10 00:50:06

ANo.1

cssで書くかtableで書くかですね
tableならcolspanとrowspanを組み合わせて三つの枠のあるテーブルを作るのです
その枠の中に画像や文章を配置します

tableで書くのが楽だけどcssで書くべきと言うのが今どきでしょうか

投稿日時 - 2019-05-09 12:39:11

あなたにオススメの質問