画像の周りにテキストを折り返すコードが必要ですか？通常、HTMLページを作成すると、すべてが直線的に流れます。つまり、ブロックが次々と流れます。私の以前の投稿はすべてこの例です。つまり、テキスト、画像、テキストなどです。

画像の下ではなく、画像の横にテキストを含めたい場合があります。これは、画像の周りのテキストの折り返しと呼ばれます。HTMLを使用してテキストを折り返すのは実際にはかなり簡単です。テキストを折り返すためにCSSを使用する必要はないことに注意してください。

ただし、最近では、W3Cは、これらの種類のタスクにHTMLではなくCSSを使用することを推奨しています。以下で両方の方法について説明しますが、可能であれば、レスポンシブWebサイトのデザインに適応しやすいCSSを使用することをお勧めします。^(CSS)

HTMLを使用して画像の周りにテキストをラップする

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。Fusce dictum gravida enim、quis ultricies maurisposuerequis。Duis adipiscingtinciduntsagittis。Cum sociis natoque penatibus et magnis dis parturient montes、nasceturridiculusmus。Aliquam a felis vitae auguelobortisdictum。Curabitur molstieposuerelaoreet。lorem egestas non imperdietenimcongueのUtpellentesquenunc。

画像の右側に沿ってテキストを折り返すには、画像を左側に揃える必要があります。

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

テキストを左側に表示し、画像を右端に表示する場合は、整列パラメータを「右」に変更するだけです。

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。Fusce dictum gravida enim、quis ultricies maurisposuerequis。Duis adipiscingtinciduntsagittis。Cum sociis natoque penatibus et magnis dis parturient montes、nasceturridiculusmus。Aliquam a felis vitae auguelobortisdictum。Curabitur molstieposuerelaoreet。lorem egestas non imperdietenimcongueのUtpellentesquenunc。

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

それでおしまい！とても^(Pretty)簡単ですよね？CSSを使用するのは、画像に余白を追加して、テキストと画像の間にスペースを空ける場合のみです。

次のCSS^(CSS)スタイリングコードを使用して、画像に余白を追加できます。

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

上記のコードは、MARGIN CSS要素を使用して、画像の右側に10ピクセルの空白を追加します。画像を左に揃えたので、右に空白を追加します。

基本的に、4つの数字はTOP RIGHTBOTTOMLEFTを表します。したがって、右揃えの画像に空白を追加する場合は、次のようにします。

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

したがって、 HTML^(HTML)を使用してこのタスクを実行するのはかなり簡単ですが、ここでも、レスポンシブサイトではうまく機能しない可能性があります。

CSSを使用して画像の周りにテキストをラップする

画像の周りにテキストを折り返すためのより良い方法は、CSSを使用することです。これにより、要素の配置をより細かく制御でき、最新のコーディング標準でより適切に機能します。

<img src="IMAGE URL" alt="A photo" class="left" />

HTMLの例の画像タグに^(HTML)CSSを直接​​含めたとしても、実際にはもうそうするべきではありません。代わりに、すべてのCSS^(CSS)コードを保持するスタイルシートと呼ばれる別のファイルが必要です。

IMGタグでは、タグにクラスを割り当てて名前を付けるだけです。私の例では、クラスにleft^(left)という名前を付けました。私のスタイルシートでは、次のコードを追加するだけです。

.left {
 float: left;
 padding: 0 10px 0 0;}

ご覧のとおり、左揃えの画像の右側に10pxのパディングを追加しました。また、floatプロパティを使用して、ドキュメントの通常のフローから画像を移動し、親コンテナの左側に配置しました。

ご覧のとおり、IMGタグ自体にすべてのコードを追加するよりもはるかにクリーンです。また、管理が簡単で、より多くのCSSプロパティを使用してWebページの外観をカスタマイズできます。ご不明な点がございましたら、お気軽にコメントください。楽しみ！

HTML Code to Wrap Text Around Image

Need the code to wrap text around an imаge? Normally whеn you create an HTML pagе, everything flows linearly, meanіng one block dirесtly after another. All of my previous рosts are an example of this, i.e. text, then pіcture, then text, еtc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• iPhoneとAndroidでQRコードをスキャンする方法

• Androidからテキストメッセージを印刷する方法

• 実行中のプロセスのリストをWindowsのテキストファイルに保存する

• GitHubからファイルをダウンロードしてコードを表示する方法

• 複数のテキストファイル内を一度に検索

• RaspberryPiを更新する方法

• Spotifyコードを作成してスキャンする方法

• Quickly Wrap Text Google Sheetsの方法？

• GIMPでShadowをText or Imageに追加する方法

• SynWrite Editor：Windows 10のFree Text & Source Code Editor

• コンピュータにテキストを読み上げる方法

• Windows 10のText and ImageをClipboard Historyにピンする方法

• 「デバイスを起動できません。（コード10）」エラー

• Google Chromeオフライン（スタンドアロン）インストーラーをダウンロードする方法

• iPhoneからAndroidにテキストメッセージを転送する方法

• 書評-Windows8のハウツーオタクガイド

• PCソフトウェアを自動的に更新する方法

• AdobeInDesignでテキストボックスをリンクする方法

• Windows10システムイメージバックアップを作成する

• NintendoSwitchでスクリーンショットを撮る方法