質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

403閲覧

本文が画像の下にきてしまいます

suraimuuu

総合スコア8

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/06/29 02:49

http://www.tada.co.jp/engineering/

少し違うのですが形的には上記のサイトのように左右交互に画像と本文があるようにしたいのですが
main4の本文が画像の下に来てしまいます。
positionで変えようとすると、その下のmain5の画像にfloatが効かなく?なります。
サイドメニューが邪魔かと思い消してみても駄目でした。
サイドメニューとメインのHTMLとCSSです。
初心者なのでコードが見づらいと思いますがよろしくお願いいたします。

HTML

1 <main> 2 <div id="side"> 3 <div class="sidemenu"> 4 <ul> 5 <li><a href="">サイドメニュー1</a></li> 6 <li><a href="">サイドメニュー2</a></li> 7 <li><a href="">サイドメニュー3</a></li> 8 <li><a href="">サイドメニュー4</a></li> 9 <li><a href="">サイドメニュー5</a></li> 10 <li><a href="">サイドメニュー6</a></li> 11 <li><a href="">サイドメニュー7</a></li> 12 <li><a href="">サイドメニュー8</a></li> 13 <li><a href="">サイドメニュー9</a></li> 14 <li><a href="">サイドメニュー10</a></li> 15 </ul> 16 17 </div> 18 </div> 19 20 <div id="content"> 21 <div class="main1"> 22 <figure><img class="gazou1 "src="jpg"alt="" width="410px" height="200px"></figure> 23 <h1>見出し1</h1> 24 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 25 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 26 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 27 </div> 28 29 30 <div class="main2"> 31 <figure><img class="gazou2 "src="jpg" alt="" width="275px" height="200px"></figure> 32 <h1>見出し2</h1> 33 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 34 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 35 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 36 </div> 37 38 39 40 <div class="main3"> 41 <figure><img class="gazou3" src="jpg" alt="" width="275px" height="200px"></figure> 42 <h1>見出し3</h1> 43 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 44 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 45 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 46 </div> 47 48 <div class="main4"> 49 <figure><img class="gazou4" src="jpg" alt="" width="275px" height="200px"></figure> 50 <h1>見出し4</h1> 51 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 52 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 53 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 54 </div> 55 56 <div class="main5"> 57 <figure><img class="gazou5" src="png" alt="" width="275px" height="200px"></figure> 58 <h1>見出し5</h1> 59 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 60 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 61 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 62 </div> 63 64 <div class="main6"> 65 <figure><img class="gazou6" src="jpg" alt="" width="275px" height="200px"></figure> 66 <h1>見出し6</h1> 67 <p>本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 68 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文<br> 69 本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> 70 </div> 71 72 </div> 73 </main> 74

CSS

1#content { 2 float: left; 3 width: 990px; 4 background-color: #f4a460; 5 position:absolute;right: 10px; top: 92px; 6} 7 8#content h1 { 9 text-align: center; 10} 11.main1 { 12 text-align: right; 13 margin-bottom: 100px; 14 } .anime1 p { 15 display: inline-block; 16 text-align: left; 17} 18.gazou1 { 19 float: left; 20 width: 30%; 21} 22 23.main2 { 24 display: block; 25 margin-bottom: 250px; 26} 27.main2 h1{ 28 margin-bottom: 0; 29} 30.main2 { 31 text-align: right; 32 margin-bottom: 100px; 33 } .anime2 p { 34 display: inline-block; 35 text-align: left; 36 } 37.gazou2 { 38 float: right; 39} 40 41 42.main3 { 43 margin-bottom: 250px; 44} 45.main3 h1 { 46 margin-bottom: 0; 47} 48.main3 { 49 text-align: right; 50 margin-bottom: 100px; 51 } .anime3 p { 52 display: inline-block; 53 text-align: left; 54} 55.gazou3 { 56 float: left; 57 margin-bottom: 400px; 58} 59 60 61.main4 h1{ 62 margin-bottom: 0; 63} 64.main4 { 65 text-align: right; 66 margin-bottom: 100px; 67 } .anime4 p { 68 display: inline-block; 69 text-align: left; 70 } 71.gazou4 { 72 float: right; 73} 74 75 76.main5 img { 77 float: left; 78} 79 80.main6 img { 81 float: right; 82} 83

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

flexで処理してflex-flow: row-reverseを指定してはいかがでしょうか?

投稿2020/06/29 04:01

yambejp

総合スコア116724

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

suraimuuu

2020/06/29 04:39

回答ありがとうございます! 思っていたような形に出来ました! ただ貼ってくださったcodepenの様に要素と要素の間の綺麗な余白が出てくれません… * { margin: 0; padding: 0; } CSSの初めに指定しているこれが邪魔しているのでしょうか?
yambejp

2020/06/29 05:22

余白をつけるならimgをdivか何かに囲んでそのdivのpaddingで調整する感じですかね・・・
suraimuuu

2020/06/29 05:37

質問ばかりで申し訳ないのですが marginとpaddingの使い分けはどのようにしていますか…? 今はmarginばかり使っている状況です…
yambejp

2020/06/29 06:03

どちらでも構いませんがpaddingの方がdivとして保持される範囲が明確に見えるので wrapして処理するならpaddingがいいと思います 今回の場合wrapしないでimgに余白をつけるならmarginで問題ありません
suraimuuu

2020/06/29 06:32

なるほど… ご丁寧な対応ありがとうございました! 助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問