囲み記事を作る

損をしない自動車保険選び損をしないクレジットカード選び銀行の利用就職・アルバイト情報

囲み記事を作る

枠を使って囲み記事風にすることができます。

float:right; width:240px; height:120px

実施例
この文章が囲み記事の中に表示されています。「 overflow:auto; 」の指示を入れて有りますので、設定した枠のサイズよりも文字数が多いと、自動的にスクロールバーが出ます。

囲み記事を右に作りたい時は「 float:right; 」、左に作りたい時は「 float:left; 」と指定します。
高さ方向の位置は、記入した場所になります。
囲み記事のサイズを「 width 」と「 height 」で指定します。
囲みと本文の隙間は「 margin 」で、囲みの中の枠と文字の隙間は「 padding 」で指定します。
枠の形状は「border:2px gray inset;」の「inset」、「outset」、「solid」等で指定します。
「 overflow:auto; 」の指示を入れておくと文章量に関係なく囲みのサイズは一定になり、文章が多くて収まりきらないときは、自動的にスクロールバーが出ます。
実施例を右に書いています。
囲み記事の横の文章の回り込みを終えたいときは<Br clear="all">の指示を入れます。

上の実施例は次のように記入しています

記入例-1
<DIV style="float:right; width:240px; height:120px;border:2px gray inset;overflow:auto;
background-color:#005500;color:#FFFFFF;padding:4px;margin-left:30px;">
実施例
<Br>この文章が囲み記事の中に表示されています。「 overflow:auto; 」の指示を入れて有りますので、設定した枠のサイズよりも文字数が多いと、自動的にスクロールバーが出ます。</DIV>

記入例-2
HEADタグの間に次の指定をします
<Style type="text/css">

</STYLE>
そして本文を次のように書きます
<DIV>実施例
<Br>この文章が囲み記事の中に表示されています。「 overflow:auto; 」の指示を入れて有りますので、設定した枠のサイズよりも文字数が多いと、自動的にスクロールバーが出ます。</DIV>

TOPページに戻る