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

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

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

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

Q&A

解決済

2回答

1341閲覧

HTML 画像に文字を回り込ませる.

murakamikesao

総合スコア35

HTML

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

0グッド

0クリップ

投稿2020/08/28 23:26

画像をSPANの中にいれて、文を書きたいのですが、うまく配置でないで悩んでいます.
<br clear="left">が廃止されたとのこと.
サンプルのようにする方法を教えてください、

http://masaboo.cside.com/new_html1/ht_20.htm

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="style.css"> <title>CSSのテスト</title> <style> P { color:red } </style> </head> <body> <span> <img src="san0.gif"style= "align="left;"> <p>日本では三輪車が走っているのを見ることは少なくなりました。</p> <img src="san1.gif" align="right"> <p>日本では三輪車が走っているのを見ることは少なくなりました。</p>

<img src="san2.gif" "position:static">

<p>日本では三輪車が走っているのを見ることは少なくなりました。</p> </span> <!-- clear: right; clear:both --> </body> </html> http://masaboo.cside.com/new_html1/ht_20.htm

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

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

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

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

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

m.ts10806

2020/08/29 02:32 編集

コードはマークダウンのcode機能を利用してご提示ください。質問は編集できます。 こちらは「質問への追記修正依頼」のコメント欄です。指摘があれば基本的に対応すべきです。
guest

回答2

0

  • span要素の中にp要素は入れられません。div要素(や他のグループ化要素)を使ってください。
  • img要素にはalt属性(代替テキストの指定)が必須です。
  • style属性で「float: left;」や「float: right;」を指定すれば、お望みの結果になるかと。

HTML

1 <div style="width: 15em;"> 2 <img src="san0.gif" alt="" style="float: left;"> 3 <p>日本では三輪車が走っているのを見ることは少なくなりました。</p> 4 5 <img src="san1.gif" alt="" style="float: right;"> 6 <p>日本では三輪車が走っているのを見ることは少なくなりました。</p> 7 8 <img src="san2.gif" alt="" style="float: left;"> 9 <p>日本では三輪車が走っているのを見ることは少なくなりました。</p> 10 </div>

投稿2020/08/28 23:43

Daregada

総合スコア11990

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

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

murakamikesao

2020/08/29 00:19

ありがとうございます. spanの中ではPタグ使えないこと.alt=""も必須なのだとのこと. よく理解できた感じです.これからもよろしくお願いします.
Daregada

2020/08/29 00:31

alt属性は、画像を見られない環境向けの説明(代替テキスト)を書くのですが、装飾的に使う場合は""とすることが認められています。alt属性自体を省略することはできません。
Daregada

2020/08/29 01:19

解決した質問は「解決済」の状態にしてください。過去の質問も放置しないほうがいいですよ。
murakamikesao

2020/09/04 11:50

解決した質問は「解決済」の状態にしてください。過去の質問も放置しないほうがいいですよ。 ありがとうございます。 解決済みのボタンがどこにあるのかわからないでいます.
退会済みユーザー

退会済みユーザー

2021/03/17 01:48 編集

誰かの回答をもとに解決に至ったのであればその回答をベストアンサーに選んでください.それで解決済になります.この質問では,こちらの回答で解決されたようにみえますが,それとは別に回答を立てそちらをベストアンサーにしていることから低評価がついていると考えられます.自己解決は回答の中に必要な答えが見つからなかったときのみ行うのがよいです. また,ほかの質問でも同じ指摘をされていると思うのですが,解決済にする方法はヘルプ(https://teratail.com/help#resolve-question)に書いてあります.なぜサービスの利用前にヘルプやマニュアルを読まないのでしょうか.
guest

0

自己解決

spanの中ではPタグ使えないこと.alt=""も必須なのだとのこと.
よく理解できた感じです.

投稿2020/09/04 12:01

murakamikesao

総合スコア35

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

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

Y.H.

2021/03/17 01:25

Daregada さんの回答で解決したのに自己解決ですか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問