• 締切済み

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

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

  • kin66
  • お礼率22% (24/108)
  • HTML
  • 回答数2
  • ありがとう数1

みんなの回答

  • Proof4
  • ベストアンサー率78% (151/192)
回答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の仕様上、インデントを全角スペースで表現しています。コピペの際はご注意ください。

  • agehage
  • ベストアンサー率22% (2516/11205)
回答No.1

cssで書くかtableで書くかですね tableならcolspanとrowspanを組み合わせて三つの枠のあるテーブルを作るのです その枠の中に画像や文章を配置します tableで書くのが楽だけどcssで書くべきと言うのが今どきでしょうか

関連するQ&A

  • HTMLでの画像配置

    PC初心者です。HTMLの画像配置について教えて下さい。 添付画像のように画像1、2、3と3つの画像があります。 添付画像と同じ配置をしたいのですが、 実際の表示が、画像1の下に、画像3がきてしまいます。 画像2の下に画像3を置きたいです。 どのようにコーディングすればよろしいでしょうか? ちなみに、ホームページビルダー13を使用しています。 HTMLは詳しくないので、詳細を書いて頂けるとありがたいです。 足りない情報などもありましたら、補足させて頂きますので、 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • Webのコピーした画像と文章の配置を編集したい

    Webから料理レシピをコピーしてワードに貼り付けを行い、画像と文字の配置を編集したいのです。 画像の横がずいぶん空いているのず、何の入力も出来ず、改行しなければならなくなります。 図の横に材料一覧を記入したい。 |-------------------------------| | |---------|   文章AAAA   | | | 画像  |   文章 BBBB  | | |---------|   文章 cccc   |

  • ワード文字の配置の画像を選択するには?

    ワードの文章の配置に画像を配置したらその画像を選択できなくなりました. どのようにしたら選択できるのでしょうか?確かショートカットキーで選択できたと思いますがよろしくお願いします。

  • 画像の配置について

    mac osxにてillustratorCS4を使用しています。 画像の配置についてなのですが、 例えば、illustrator上で50%縮小して配置しているリンク画像A(あるいは埋め込み画像)を、別の画像Bに差し替える場合、 差し替えた画像も同じように50%縮小(あるいはAと同じ大きさ?)になりますが、 それを原寸(100%)のサイズで配置し直したい場合はどうすればいいのでしょうか? 画像Aはだいたいどのくらい縮小すればいいのかを確認するために配置したので、 それをphotoshopできちんと縮小してillustratorでは縮小なしの原寸で配置しなおしたい状況です。 どうぞよろしくお願いします。

  • 画像を好きな位置に配置するには…

    ホームページを作成する際に、画像を好きな位置に配置するにはどうすれば良いのでしょうか? お聞きしたいのは、例えば、画面の左側に文章を数行入力し、その右側に画像を配置するような場合です。 現在は、そのような場合、左側に文章を数行入力すると、その右側に画像を貼り付けることができない状態です。 ご教授の程、よろしくお願いします。

  • 画像の配置

    画像の配置 Word 2007で文字の折り返しを「四角」にして、配置で「文字と一緒に移動する」にチェックを入れても、文字と一緒に移動しないので、もう一度「文字と一緒に移動する」のチェックを見るとチェックが外れている。何回繰り返してチェックが入らない。何故でしょうか? Word 2003では正しくできるのだが?

  • ワードプレスの画像と文章のズレ修正について

    ワードプレスの画像と文章のズレ修正について ワードプレスに画像を2枚取り込み、それぞれにコメントを追記し投稿したのですが、画面で表示される画像の位置とコメントの位置にズレが生じています。 このズレを補正する方法について詳しく教えて下さい。

  • 画像の配置

    IllustratorCS3を使っていますが、配置で画像を取り入れる場合複数の画像を一度に配置する方法はどうすれば良いのでしょうか

    • ベストアンサー
    • Mac
  • ワードの差し込み印刷で画像を配置するには?

    WindowsXP sp2でワード2003を使用しています。 ワードの差し込み印刷の方法で画像を配置するなんてこと可能ですか? またマクロを使用することで可能になるでしょうか?

  • 切り抜いた配置画像について

    フォトショップで切り抜いた画像をイラストレーターに配置する、その方法について教えてください。 私は長年、フォトショップでクリッピングマスクをかけた画像をeps保存してイラストレータに配置してきました。 でも最近気づいたのですが、フォトショップで切り抜いた画像をクリッピングマスクなどせずに、レイヤーのまま画像を統合せずにpsd保存して、配置してもも同じ結果が得られることに気づきました。これで問題なければこの方法で入稿したいのですが、これって、問題ありでしょうか?それとも私が知らなかっただけで、一般的な方法ですか? 分かりにくい文章ですみません、よろしくお願いします。

専門家に質問してみよう