ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >フレーム

文字を回り込ませる

{float:位置;}でインラインフレームに文字を回り込ませることができます。 インラインフレームの表示位置を指定することで回り込む文字の位置が 決まります。

回り込んだ文字はイメージやボックスの項と同様に<br clear="all"> か{clear:both;}を指定すると解除できます。

■ インラインフレームの表示位置を指定する

インラインフレームを表示できる位置は以下の通りです。

位置説明
noneインラインフレームの表示位置は指定しません。(デフォルト)
leftインラインフレームが左に表示されその後ろに続く文字やインラインフレームが右に回り込みます。
rightインラインフレームが右に表示されその後ろに続く文字やインラインフレームが左に回り込みます。

【ブラウザ表示】

右に回り込む文字

これで回り込みが解除されました。

左に回り込む文字

ソース

<iframe src="iframesample.html" class="sample7" title="if">
インラインフレームのサンプル
</iframe>
右に回り込む文字
<p class="cl2">これで回り込みが解除されました。</p>
<iframe src="iframesample.html" class="sample8" title="if">
インラインフレームのサンプル
</iframe>
左に回り込む文字

外部ファイル

iframe.sample7{float:left;}
iframe.sample8{float:right;}
p.cl2{clear:both;}


<body>〜</body>に直接記入する場合

<iframe src="iframesample.html" style="float:left;" title="if">
インラインフレームのサンプル
</iframe>
右に回り込む文字
<p style="clear:both;">これで回り込みが解除されました。</p>
<iframe src="iframesample.html" style="float:right;" title="if">
インラインフレームのサンプル
</iframe>
左に回り込む文字

■ その他の項目

横幅、高さを指定する
枠線の太さ、色、種類を指定する
外側の余白を指定する
横に並ぶ文字の位置を指定する

スタイルシート一覧のページに戻る

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.