HTML 回り込み文書 作成方法 画像と文書 横並び表示 |
HTML 回り込み文書 作成方法 画像と文書 横並び表示画像の横のスペースに文書を埋め込み、横のスペースからあふれる分の文書を、自動的に画像の下に続けて表示する様式を回り込み文書といいます 画像の横にスペースができる際の余白スペースに文書を配置する方法としては、テーブル(表)を利用して、レイアウトをデザインする方法も使えますが、その場合、レイアウトが固定されてしまい、文書の長さに応じて見栄え良く配置する手間が掛かり、文書の長さが変わった際、再配置する必要が出ることもあります 自動配置である回り込み文書を利用すると、自動的に再配置されますので楽に見栄え良くレイアウトされたページを作成できます 画像の 「align」 属性で表示位置を定義する画像の 「align」 属性に 「right」(右)、または、「left」(左) を指定することで、画像は指定位置に表示され、文書はその指定画像を回り込むように配置されます
なお、「align」 属性は、画像(img src)だけでなく、インラインフレーム(iframe src)、テーブル(table)等、他のコンテンツでも指定できます
画像のクラスで 「float」 を定義する<head> 部で定義しておいた 「float」 クラスを、<body> 部に配置した画像に指定することで、画像は指定位置に表示され、文書は指定画像を回り込むように配置されます
「align」 属性 指定値
※.ブラウザ等環境によって正常に機能しません |