画像と文章を横並びに表示したいのですが

Question

ウェブデザイン初心者です。
画像と文章を横並びに表示したいのですが、いくらやってもできません。
html、cssのコードのおかしいところを教えていただきたいです。
本当に何もやっても反映せず困り果てています。
どうぞよろしくお願いします。

htmlは以下の通りです。

<div id="flex">

  <div class="image"><img src="images/3_1_ahahakinnsei_s.jpg" alt=""></div>

  <div class="text">
    <p class="title">solo exhibition</p>
    <p class="text">GALLERY FINE ART LABORATORY VOL.25 <br>GFAL 　東京 June 1, 2005 - July 1, 2005 </p>

    <p class="text">
      平安時代のあたりにいそうな顔の女があははと笑っている <br>
      阿波波と当ててみる <br>
      それから同じ名前の神社が実在するを知った。 <br>
      作品は目と口は空洞になっていて筒抜けていて <br>
      その穴を覗いた先は金星の風景がひろがるのです。　
    </p>
    <p>
      title: 阿波波 金星の風景 <br>
      material: 木、胡粉、ガーゼ<br>
      size: h18 x w13 x d120cm<br>
      year: 2005
    </p>
    </div></div>
</div>

cssは下記の通りです。

#flex {
width: 90%;
height: auto;
margin: auto;
}

#flex {
display: flex;
justify-content: space-between;

}
.text{
width: 50%;
height: auto;
margin: auto;
}

Comments

[recal]

提示されたコードで横並びになったので
このコード以外の箇所で問題がありそうです。

Answer 1

おかしいところ、ということなので。

1. 番号リストhtmlタグの開閉の個数が合っていません。タグを書くとき、頭の次に尻も書いてから、中身を入れていくと間違いにくいと思います。

2. 番号リスト#flex{}の記述が二ヶ所あります。全く同じ相手にかけるなら、一ヶ所にまとめたほうがわかりやすそうです。

3. 番号リストclass="text" が、テキスト全部の囲み<div>と、中の平文の囲み<p>両方についています。この場合、.text{ width: 50%;(略)}が両方にかかってしまいます。

4. 画像を囲んでいる class="image" に対する書式の指定がありません。

5. class="image" の中の画像に対しても、書式の指定がありません。どのような大きさで表示したいのかは指定したほうが良いと考えます。

6. 「横に並べたい」とのことですが、真横に並んでほしいのか、間をあけたいのか、文章と画像の頭が揃っていた方がいいのかなどは読み取れませんでした。このあたりは、flexについて調べ色々試していく過程で習得できると思われます。flex css とかでぐぐれば参考が沢山出てきます。

---

全体的に不慣れなご様子ですので、デベロッパーツールを使いながら、どこをいじったらどう変わるのか、一手ずつ試していかれることをおすすめします。
また、囲んでいる箇所にそれぞれ、仮の背景色を付けたり枠線を引いたりするのも、変化がわかりやすくなり、習得の助けになると思います。

【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool

　
下記に、ちょっとだけ変えたソースを添付します。どこが変わったのか、その属性が増えることで何が起きてるのか、デベロッパーツールでいじってみてください。ご希望の形が見つかることをお祈りします。

---

<div id="flex">
	<div class="image"><img class="u_w_max" src="images/3_1_ahahakinnsei_s.jpg" alt=""></div>
	<div class="text_wrapper">
		<p class="title">solo exhibition</p>
		<p class="text">GALLERY FINE ART LABORATORY VOL.25 <br>GFAL 　東京 June 1, 2005 - July 1, 2005 </p>

		<p class="text">
		平安時代のあたりにいそうな顔の女があははと笑っている <br>
		阿波波と当ててみる <br>
		それから同じ名前の神社が実在するを知った。 <br>
		作品は目と口は空洞になっていて筒抜けていて <br>
		その穴を覗いた先は金星の風景がひろがるのです。　
		</p>
		<p class="text">
		title: 阿波波 金星の風景 <br>
		material: 木、胡粉、ガーゼ<br>
		size: h18 x w13 x d120cm<br>
		year: 2005
		</p>
	</div>
</div>

#flex {
width: 90%;		border: 6px solid red;
height: auto;
margin: auto;
display: flex;
justify-content: space-between;

}
.text_wrapper{	border: 6px solid blue;
width: 50%;
height: auto;
margin: auto;
}

.image{ width: 50%;	border: 6px solid yellow;}
.image .u_w_max{ width: 100%;}

Comments

[izpchtml]

丁寧なご回答、本当にありがとうございます！
ネットで調べながら反映しないの繰り返しで混乱気味になっていました。
お送りいただいた回答をもとに進めてみます。

[izpchtml]

Nucle_catさま　おかげさまで無事反映しました！色線も入れて頂いて分かりやすかったです。ありがとうございました！
ご回答いただいてからその通りにしても反映せずでこれはおかしいと思い、調べて行ったらcssのフォルダの場所も間違えてちゃんと指定の場所に入っておらずでした..。ほぼ１ヶ月半、詰め込みで一気に学習したのですが、いざ自分で作るとなると基本的な事を理解できていないと痛感しています。一歩ずつ頑張ります。