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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

Q&A

2回答

9073閲覧

画像と文字を横並びにはしたのですが、ここからウインドウの横幅に幅半分ずつ画像と文字の部分を並べたいです。

shinaozora50

総合スコア15

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

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

0グッド

0クリップ

投稿2020/02/03 07:54

今、画像と文字の部分を横並びにはできたのですが、ウインドウの幅に画像と文字を並べたいのですが、画像と文字の間が空いてしまいます。隙間なくウインドウの横幅に横並びさせた画像と文字の部分を同じ横幅で均等に並べたいのですが、上手くいきません。

イメージ説明](eab5768e35988c18a3507dee89442843.png)

したいことは、下の画像のような感じに、ウインドウ幅いっぱいに画像と文字を、画像と文字の部分の幅を、ウインドウの半分の幅に均等に横並びさせたいです。

イメージ説明

どのようにしたら上手く、画像と文字の部分をウインドウの幅に半分ずつ均等に横並びさせることができるでしょうか?
画像をimgタグで表示させていますが、他の方法で表示させる方がやりやすいでしょうか?

コードはこの様に書いています。

HTML

1<div class="main-section_content"> 2 <div class="content1"> 3 <div class="photo1"> 4 <img src="images/photo01.jpg" alt="フォト1"> 5 </div> 6 <div class="text1"> 7 <h4>1.テキストテキストテキストテキスト</h4> 8 <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> 9 </div> 10 </div> 11</div>

css

1.main-section_content { 2 width: 100%; 3 margin: 0; 4 padding: 0; 5} 6 7.content1 { 8 display: flex; 9 flex-direction: row; 10 justify-content: space-around; 11 flex-grow: 1; 12} 13 14.photo1 img { 15 width: 514px; 16} 17 18.text1 { 19 width: 514px; 20} 21 22footer { 23 background-color: gray; 24 padding: 40px 0; 25}

まだ制作途中なので、したい画像の見本と、文字の部分の色など色々違って、申し訳ございません。
上手く説明できなくて、申し訳ございません。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

.photo1 img.textの幅が固定値になっているので、ここを可変式に変えてあげれば良いと思います。
また横幅を等間隔にさせたいとのことなので、.photo1.textで幅を等間隔にしてあげるようにすると良さそうです。

イメージとしては.photo.textで横並びにさせているので、その部分でまず幅を等間隔(50%)にしてあげて、その中にある.photo imgは等間隔(50%)にした中でぴったり表示(100%)にしてあげるイメージです。

css

1.photo1 { 2 width: 50%; 3} 4 5.photo1 img { 6 width: 100%; 7} 8 9.text1 { 10 width: 50%; 11} 12

投稿2020/02/03 08:11

vnsa7221

総合スコア348

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

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

0

css

1.main-section_content { 2 width: 100%; 3 margin: 0; 4 padding: 0; 5} 6 7.content1 { 8 display: flex; 9} 10 11img { 12 width: 100%; 13 vertical-align: bottom; 14} 15 16.photo1, 17.text1 { 18 width: 50%; 19} 20 21.text1 { 22 background: #ccc; 23 padding: 10px; 24}

上記の方法でご希望通りになると思います。

投稿2020/02/03 08:08

inquirer

総合スコア84

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問