HPB18 | HPB19 コンテンツ一覧
ホーム > HPB19 > HTML 回り込み文書 作成方法 画像と文書 横並び表示
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

HTML 回り込み文書 作成方法 画像と文書 横並び表示


HTML 回り込み文書 作成方法 画像と文書 横並び表示



画像の横のスペースに文書を埋め込み、横のスペースからあふれる分の文書を、自動的に画像の下に続けて表示する様式を回り込み文書といいます

画像の横にスペースができる際の余白スペースに文書を配置する方法としては、テーブル(表)を利用して、レイアウトをデザインする方法も使えますが、その場合、レイアウトが固定されてしまい、文書の長さに応じて見栄え良く配置する手間が掛かり、文書の長さが変わった際、再配置する必要が出ることもあります

自動配置である回り込み文書を利用すると、自動的に再配置されますので楽に見栄え良くレイアウトされたページを作成できます




画像の 「align」 属性で表示位置を定義する



画像の 「align」 属性に 「right」(右)、または、「left」(左) を指定することで、画像は指定位置に表示され、文書はその指定画像を回り込むように配置されます


記述例
<img src="img/HP_HTML_000003.jpg" width="250" height="166" border="0" style="padding-right : 30px;padding-bottom : 30px;" align="left" alt="西之島 新島 画像で見る 現在の噴火のようす">
説明
align="left"
画像(img src)に対し、左寄せの回り込みを指定しています
style="padding-right : 30px;padding-bottom : 30px;"
画像の右側と下側、それぞれ、文書との間に、「30px」余白を設定しています
表示例

西之島 新島 画像で見る 現在の噴火のようす


西之島 新島 画像で見る 現在の噴火のようす西之島(にしのしま)は、東京の南約1,000キロメートル、父島の西約130キロメートルに位置する、東京都小笠原村小笠原諸島の無人島、もともと海底火山の活動により生じた火山島で、火山列島(硫黄列島)と同じ火山脈に属し、付近では海底火山活動が活発です

西之島は海底から計測すると、富士山よりも大きい、比高4,000メートル (周辺域からの比高2,500m) 、直径30キロメートルにもなる大火山で、山頂部の火口地形は、直径約1キロメートルにもなり、海面に出ている西之島はその火口地形の一部にすぎません

西之島の最新の噴火状況につきましては、「 西之島 新島 画像で見る 現在の噴火のようす 最新情報 小笠原諸島 」 をご参照下さい (別タブ(ウィンドウ)が開きます)




なお、「align」 属性は、画像(img src)だけでなく、インラインフレーム(iframe src)、テーブル(table)等、他のコンテンツでも指定できます


記述例
<iframe src="https://abhp.net/cm/CM_HPB19_In_000000.html" width="108" height="163" scrolling="NO" marginwidth="0" marginheight="0" frameborder="0" style="padding-left : 80px;padding-bottom : 60px;border-width : medium;border-style : none;" align="right"></iframe>
説明
align="right"
iframe src に対し、右寄せの回り込みを指定しています
style="padding-left : 80px;padding-bottom : 60px;
画像の左側 「80px」、下側 「60px」、文書との間に余白を設定しています
表示例

HTML 回り込み文書 作成方法 画像と文書 横並び表示



画像の横のスペースに文書を埋め込み、横のスペースからあふれる分の文書を、自動的に画像の下に続けて表示する様式を回り込み文書といいます

画像の横にスペースができる際の余白スペースに文書を配置する方法としては、テーブル(表)を利用して、レイアウトをデザインする方法も使えますが、その場合、レイアウトが固定されてしまい、文書の長さに応じて見栄え良く配置する手間が掛かり、文書の長さが変わった際、再配置する必要が出ることもあります

自動配置である回り込み文書を利用すると、自動的に再配置されますので楽に見栄え良くレイアウトされたページを作成できます




画像のクラスで 「float」 を定義する



<head> 部で定義しておいた 「float」 クラスを、<body> 部に配置した画像に指定することで、画像は指定位置に表示され、文書は指定画像を回り込むように配置されます


記述例
<head> 部
<style type="text/css">
<!--
.cl_inline_in{
float: left;
}

.cl_inline_out{
clear: both;
}
-->
</style>
<body> 部
<div class="cl_inline_in"><img src="img/HP_HTML_000003.jpg" width="250" height="166" border="0" style="padding-right : 30px;padding-bottom : 30px;" alt="西之島 新島 画像で見る 現在の噴火のようす"></div>
説明
<head> 部
.cl_inline_in{
float: left;
}
<head> 部で、左寄せ 「float」 属性のクラスを定義しています
<body> 部
<div class="cl_inline_in">
画像(img src)に対し、左寄せの回り込みを指定しています
style="padding-right : 30px;padding-bottom : 30px;"
画像の右側と下側、それぞれ、文書との間に、「30px」余白を設定しています
表示例

西之島 新島 画像で見る 現在の噴火のようす


西之島 新島 画像で見る 現在の噴火のようす
西之島(にしのしま)は、東京の南約1,000キロメートル、父島の西約130キロメートルに位置する、東京都小笠原村小笠原諸島の無人島、もともと海底火山の活動により生じた火山島で、火山列島(硫黄列島)と同じ火山脈に属し、付近では海底火山活動が活発です

西之島は海底から計測すると、富士山よりも大きい、比高4,000メートル (周辺域からの比高2,500m) 、直径30キロメートルにもなる大火山で、山頂部の火口地形は、直径約1キロメートルにもなり、海面に出ている西之島はその火口地形の一部にすぎません

西之島の最新の噴火状況につきましては、「 西之島 新島 画像で見る 現在の噴火のようす 最新情報 小笠原諸島 」 をご参照下さい (別タブ(ウィンドウ)が開きます)





「align」 属性 指定値



指定 記入例 画像と文書の位置関係
左寄せ <img align="left"> 画像は左寄せ、文字は画像の右上から複数行回り込み
右寄せ <img align="right"> 画像は右寄せ、文字は画像の左上から複数行回り込み
解除 <br clear="all"> 画像の回り込みを左右に(align="leftまたはright")設定している際、その回り込みを途中で解除したい場合に使用
ただし、<img> タグの次に挿入される改行に限り有効
上揃え <img align="top"> 画像は左寄せ、文字は画像の右上に1行表示 ※
中央揃え <img align="midlde"> 画像は左寄せ、文字は画像の右中央から1行表示 ※
下揃え <img align="bottom"> 画像は左寄せ、文字は画像の右下に1行表示 ※

※.ブラウザ等環境によって正常に機能しません

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > HPB19 > HTML 回り込み文書 作成方法 画像と文書 横並び表示
HPB18 | HPB19 コンテンツ一覧
   

© 2014 abhp.net All Rights Reserved.

参考情報


img src=画像ファイル align=left-right 画像の隣に複数行の文書を表示する -HTMLタグ辞典-
br clear=属性 画像の下から文書を始める -HTMLタグ辞典-
img src=画像ファイル align=属性 画像を1行の中に表示する -HTMLタグ辞典-
画像の回り込みの文章の位置、または画像の表示位置を指定する:HTMLタグ辞典 - HTMLタグボード
途中で文章の回り込みを解除する:HTMLタグ辞典 - HTMLタグボード

ページTOP
ページTOP
ページTOP
ページTOP
ページTOP
ページTOP