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

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

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

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

CSS

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

Q&A

解決済

1回答

4403閲覧

レスポンシブで画像の横に文字を入れる方法

aaayn

総合スコア7

HTML

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

CSS

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

0グッド

0クリップ

投稿2019/07/24 04:47

レスポンシブで画像の横に文字を入れたいです。

画像の横に文字を入れる方法について質問です。
モバイルファーストで、スマホのときは画像の下に文字、
PCの時は画像の右に文字としたい場合、どうすればよいでしょうか?
ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

「画像の横に文字」を連続して縦にいれたいのですが、
横並びに表示されてしまいます。

該当のソースコード

HTMLは以下の通りです

<div class="box"> <div class="text"> <p style="text-align: left"> <strong>Amazon Pay</strong <strong><ご注意></strong> ご利用にはAmazon.co.jpのアカウントが必要です。 </p></div> <div class="pict"> <img src="画像URL" alt="" width="640" height="820" class="alignnone size-full wp-image-1253" /></a></div> <div class="boox"> <div class="texxt"> <p style="text-align: left"> メルマガ会員様限定サービスを開始! aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> <div class="picct"> <img src="画像のURL" alt="" width="480" height="490" class="alignnone size-full wp-image-1249" /></a></div>

CSSは以下の通りです
body {
margin: 0;
padding: 20px;
}

.box {
display:flex;
flex-direction: row;
justify-content: space-between;
}

.text {
}

.pict {
width: 80%;
margin-left: 3%;
}

.pict img {
width: 100%;
height:auto;
}

@media (min-width:768px) {
.box {
flex-direction: row;
justify-content: space-between;
}
.box:nth-child(even) {
flex-direction: row-reverse;
}
}

.boox {
display:flex;
flex-direction: row;
justify-content: space-between;
}

.texxt {
}

.picct {
width: 80%;
margin-left: 3%;
}

.picct img {
width: 100%;
height:auto;
}

@media (min-width:768px) {
.boox {
flex-direction: row;
justify-content: space-between;
}
.boox:nth-child(even) {
flex-direction: row-reverse;
}
}

補足情報(FW/ツールのバージョンなど)

初心者のため、色々間違っているかもしれません。
宜しくお願い致します。

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

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

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

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

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

yukikp

2019/07/24 05:07

(質問の本質と関係ないですが、コードは、コードブロックに入れておくといいですよ!)
aaayn

2019/07/24 07:01

ありがとうございます。 教えていただいたのに大変申し訳ないのですがコードロックが何なのか分からず・・・
dit.

2019/07/24 07:42

teratailには質問を見やすくするための仕組みがあります。 そのうちの一つがコードブロックです。 Ashiさんの回答を見ると、コードの部分が囲まれて途中から省略されてるような形になってますよね?これがコードブロックです。 インデントが保たれたり、コピーしての検証がしやすかったりするのでこの形に直してほしいということです。(質問は編集できます) https://teratail.com/help/question-tips#questionTips3-5-1 HTMLの部分を選択して<code>というボタンを押してください。 ```html ここにコード ``` という状態になればOKです。(htmlの部分は自分で直してください) CSSも同じように。 ただし、HTMLの終わりの```とCSSの始まりの```cssの間は空白行などで離して下さい。
guest

回答1

0

ベストアンサー

まず、閉じタグ(</div>とか)が足りない箇所がいくつかあります。
これもレイアウト崩れの原因になるのできちんと確認してみてください。

また、<img>タグに閉じタグは存在しません。
</a>の閉じタグがついていますがこれは間違いです。

すでに試されていますが、ご希望のレイアウト構造は
「display:flex」で作ることができます。

display:flexを指定されたセレクタは
flexコンテナーと呼ばれる”入れ物”になります。

そして、それと同時にflexコンテナーの子要素が
flexアイテムと呼ばれる”flexで操作可能な要素”になります。

この時重要なのが、flexアイテムになるのは
flexコンテナー直下の子要素のみであり、孫要素などは影響を受けません。

display:flexを指定した場合、デフォルトの設定が「flex-direction:row」なので、
「row」としてコンテナーを使いたい場合、上記の記述はなくても構いません。

シンプルな構造としては、以下のようにするとうまくいくと思います。

<div class=“Container”> <div class=“Item”> <img src=“” alt=“”> <p>テキストテキストテキスト</p> </div> <div class=“Item”> <img src=“” alt=“”> <p>テキストテキストテキスト</p> </div> </div>

.Containerに「display:flex」を指定し、
「flex-direction:column」で.Itemを縦並びにします。

.Itemにも「display:flex」を指定すると
その中の<img><p>が横並びになります。

投稿2019/07/24 07:31

Ashi

総合スコア139

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

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

aaayn

2019/07/24 10:09

出来ました! ご丁寧に教えていただきまして、ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問