Webページ上に右揃えの画像を作成する方法

CSSのfloatプロパティを使用すると、このテキストの右側のイメージで見られるように、任意のイメージを任意のテキストの右側に浮かべることができます。 Webページでこれを行うには、以下の手順に従います。

この例では、外部CSSファイルを使用します。 外部CSSファイルを使用することで、CSSファイルへのリンクを含む任意のページにフローティングイメージを作成できます。 外部CSSファイルを使用すると、将来調整したい設定を簡単に変更できます。

1. CSSファイルを作成します。 Webページ用のCSSファイルがすでにある場合は、CSSファイルを編集して次のコードを追加します。

2. CSSファイルに次のコードを追加します。

 .floatRight {float:right; margin-left:20px} 

ヒント:float:leftを追加すると、テキストの左側に画像が浮かぶようになります。

複数の画像を右側に浮かべる場合は、CSSファイルに次の行も追加します。

 .floatRightClear {float:right; clear:right; margin-left:20px} 

3.上記のコードが作成されたら、CSSファイルを保存し、以下の例のようなコードを使用して各HTMLページから呼び出します。 この例では、CSSファイルにstyle.cssという名前を付けました。

4.最後に、コンテナの右側に浮かべるイメージにを追加します。