https://hmaster.net/


HTMLタグと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>
左に回り込む文字

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

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

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