Webページのテキストの左に画像を浮かべる方法

CSSを使用して画像をWebページの左側に揃えるレイアウト

今日のほぼすべてのWebページを見ると、それらのページの大部分を構成するテキストと画像の組み合わせが表示されます。 ページにテキストや画像を追加するのはとても簡単です 。 テキストは段落、リスト、見出しなどの標準HTMLタグを使用してコード化され、イメージは要素を使用して含まれます 。

そのテキストとそれらのイメージをうまく連携させる能力は、偉大なWebデザイナーをはく離させるものです！ テキストと画像を次々と表示するだけでなく、これらのブロックレベルの要素がデフォルトでレイアウトされる方法です。 いいえ、最終的にあなたのウェブサイトのビジュアルデザインになるテキストと画像の流れをいくらかコントロールしたいと思っています。

そのページのテキストがその周りを流れる間に、ページの左側に整列されたイメージを有することは、印刷されたデザインおよびウェブページのための共通の設計上の処置である。 ウェブの言葉では、 この効果は画像を浮遊させることとして知られている 。 このスタイルは、 "float"のCSSプロパティで実現されます。 このプロパティを使用すると、テキストは、左揃えのイメージの周りを右に流れることができます。 （または、右に揃えられたイメージの周りを左に）このビジュアルエフェクトを実現する方法を見てみましょう。

HTMLで始める

あなたがする必要がある最初のことは、いくつかのHTMLを扱うことです。 この例では、テキストの段落を記述し、段落の先頭（テキストの前、開始

タグの後）にイメージを追加します。 HTMLマークアップの外観は次のとおりです。

段落のテキストがここに表示されます。 この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。

デフォルトでは、私たちのウェブページは画像の上にテキストの上に表示されます。 これは、画像がHTMLのブロックレベル要素であるためです。 これは、デフォルトでイメージ要素の前後に改行がブラウザに表示されることを意味します。 このデフォルトの外観はCSSに変えられます。 ただし、最初に、 image要素にクラス値を追加します 。 そのクラスはCSSで後で使用する "フック"として機能します。

段落のテキストがここに表示されます。 この例では、私たちはヘッドショットの画像を持っているので、このテキストは、ヘッドショットがある人に関するものです。

この「左」のクラスは、単独では何もしません。 希望のスタイルを達成するためには、次にCSSを使用する必要があります。

CSSスタイル

クラス属性がleftの場合のHTMLを使用して、CSSに変更できます。 私たちはスタイルシートにそのイメージを浮動させるルールを追加し、イメージの周りに最終的に折り返すテキストがあまりにも近づかないように、その隣に小さなパディングを追加します。 あなたが書くかもしれないCSSはここにあります：

このスタイルは、そのイメージを左に浮動させ、イメージの右と下に少しのパディング （CSS略語を使用）を追加します 。

ブラウザでこのHTMLが含まれているページを確認した場合、画像は左に揃えられ、段落のテキストは右に表示され、適切な間隔の間隔で表示されます。 私たちが使用した "left"のクラス値は任意であることに注意してください。 「左」という言葉はそれ単独では何もしないので、何かを呼び出すことができました。 これは、あなたが探している視覚的な変更を指示する実際のCSSスタイルで動作するHTMLのクラス属性を持つ必要があります。

これらのスタイルを実現する別の方法

イメージ要素にクラス属性を与え、要素を浮動させる一般的なCSSスタイルを使用するこのアプローチは、この「左揃えのイメージ」の外観を実現できる唯一の方法です。 また、クラス値をイメージから取り除いて、より具体的なセレクタを書くことでCSSでスタイルを設定することもできます。 たとえば、画像がクラス値 "main-content"を持つ部門の内部にある例を見てみましょう。

段落のテキストがここに移動します。