HTMLページでフローティング画像を使用するにはどうすればよいですか？
HTMLでフローティング画像を使用するには、CSSプロパティfloatを使用します。画像を左右に浮かせることができます。その他のプロパティ値には、次のものがあります。
| Sr.No. | プロパティの値と説明 |
|---|---|
| 1 | なし 浮いていない |
| 2 | 左 左に浮かぶ |
| 3 | 右 右に浮かぶ |
| 4 | 初期 デフォルト値 |
例
次のコードを実行して、HTMLでフローティング画像を使用することができます。右フロートと左フロートのCSS属性の使用法は次のとおりです
<!DOCTYPE html> <html> <head> <title>HTML Floating Image</title> </head> <body> <h1>Float Right</h1> <p>The below image floats to the right.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> <h1>Float Left</h1> <p>The below image floats to the left.</p> <p> <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" /> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>
出力
-
HTMLで画像をリンクとして使用するにはどうすればよいですか？
HTMLで画像をリンクとして使用するには、タグとhref属性を持つタグを使用します。 タグは、Webページで画像を使用するためのものであり、タグは、リンクを追加するためのものです。 image tag src属性の下に、画像のURLを追加します。それで、高さと幅も追加します。 例 次のコードを実行して、画像をHTMLのリンクとして使用することができます <!DOCTYPE html> <html> <head> <title>HTML Image as link<
-
HTMLページでアニメーション画像を使用するにはどうすればよいですか？
HTMLのアニメーション画像は、移動するWebページ上の画像です。 GIF形式、つまりGraphicsInterchangeFormatファイルです。 HTMLでアニメーション画像を追加するのは非常に簡単です。 を使用する必要があります srcのタグ 属性。 src 属性は画像のURLを追加します。 また、高さを使用して画像の高さと幅を設定します およびwidth属性。 例 次のコマンドを実行して、HTMLのアニメーション画像を操作できます- <!DOCTYPE html> <html> <head> &