画像の周りにテキストをラップするHTMLコード

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

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

ただし、最近では、W3Cは、これらの種類のタスクにHTMLではなくCSSを使用することを推奨しています。以下で両方の方法について説明しますが、可能であれば、レスポンシブWebサイトのデザインにより適応できるため、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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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