先ほど説明したオブジェクトを横方向に並べる事も出来ます。
こんなの使わないよ。と思われる方もいると思いますが、思いのほか使うのでしっかり覚えましょう。 .float_rei01{
float:left;
} floatプロパティです。
実際にどうなるのか見てみましょう。 <div class="float_rei01">一つ目のブロック要素オブジェクト</div>
<div class="float_rei02">二つ目のブロック要素オブジェクト</div> .float_rei01{
background:#ff0000;
height:100px;
float:left;
}
.float_rei02{
background:#00ff00;
height:100px;
float:left;
} 　このようにブロック要素が横に並びました。
ブロック要素は画面横幅いっぱいまで使われると説明しましたね？
しかしこのようにfloatを指定する事により、並べる事が出来ます。
見出し（<h1>）でも試してみましょう ブロック要素であろうとインライン要素であろうと真横に並べる事が出来るのです。
先ほどの例に追加してみます。 文章が右側に来ました。
<h1 class="float_rei01">一つ目の見出し</h1>
<h1 class="float_rei02">二つ目の見出し</h1>
ここまで来るのは大変だった。 このように書きました。まぁ普通ですよね。
では、このように書き直してみましょう。 ここまで来るのは大変だった。
<h1 class="float_rei01">一つ目の見出し</h1>
<h1 class="float_rei02">二つ目の見出し</h1> この結果はどうなると思いますか？
文章が最初に来て、見出しが二つ右側に並ぶと思いますよね？ 　答えはこうです。
最初の結果と同じなのです。
なぜかと言いますと、floatはすべてのオブジェクトを無視して左や右に寄せるプロパティなのです。
回り込ませると言った方が正解でしょうか。
文章を一番左に持ってきたい場合は、文章にもfloat:left;を適用させてあげなくてはなりません。
もしくは見出しにfloat:right;を適用するかです。
なので、floatを使う場合は注意が必要です。
思ってもみなかった効果が付いてしまうなんて事もあるのです。

　floatを解除するプロパティはclearです。
clearには、left;right;both;の値があります。
leftはfloat:left;を解除します。rightも同じです。
bothはその両方を解除する効果があります。
.clear{
clear:left;
} 使い慣れるのには時間がかかると思いますが頑張ってください。

伝えたいことや書き記したい思い、情熱が溢れだすことはよくある事だと思います。
そんな時に情熱に任せ文章を書いて行くとレイアウトが崩れてしまう・・・。
それじゃぁ一度冷静になって文章を添削しよう・・・。
　それではホームページを作る楽しさも半減とは言いませんが減ってしまうのは否めないですよね？
長文を書きたいけれどレイアウトが崩れるのは嫌だ！
そんなワガママなリクエストを聞いてくれるCSSプロパティがあるんです。 .overflow_rei01{
overflow:scroll;
} overflowプロパティです。
ボックスと言う概念があります。ボックスは初めて使う言葉ですが、何度か説明しています。
そうです。オブジェクトの事です。
例えば横５００px、縦３００pxのオブジェクトをいくつか作ります。
それをいくつか並べてページを作ります。
レイアウトはそんな感じでやって行くみたいです。
その一つ一つに太郎君の成長日記、はたまた家庭菜園での収穫の日々を入れて行く訳です。
昨日は収まったけれども今日は出来事がたくさんあったから枠内に収まらない。
そうすると枠から文章がはみ出て格好悪い。もしくはレイアウトがしっくり決まらない。
　このoverflowを使えばすべて解決されます。
文章が長くなってしまいましたね。実際に見てみましょう。 <div class="overflow_rei01">
今日の太郎はとてもよく働いた。<br>
その功績を讃え、給料を三十円アップしてやった。<br>
すると、太郎はこう言った。<br>
「親方、あっしの給料を三十円アップさせてくれるんでしたら、<br>
皆の給料もアップさせてくだせぇ。<br>
あっしの給料はそんなに上げなくてもいいですから。」<br>
それを聞いた私は、感心した。<br>
そして、太郎の給料を上げるのをやめた。
</div>
<div class="overflow_rei01">
本日の収穫<br>
米：２俵<br>
かぼちゃ：５玉<br>
タマネギ：３個<br>
キャベツ：３玉<br>
トマト：１２玉<br>
なす：３本<br>
レタス：１０玉<br>
最近家庭菜園の域を脱して来たように思える。<br>
このまま農家に転身してやろうか・・・
</div> .overflow_rei01{
overflow:scroll;
width:700px;
height:100px;
backgorund:#ffff00;
} overflow:scroll;にするとスクロールバーが付いて本文がスクロール出来るようになりました。
それではこれだとどうでしょうか？ .overflow_rei02{
overflow:hidden;
width:700px;
height:100px;
backgorund:#ff00ff;
} 太郎君の成長日記が途中で終わっています。
hiddenは、はみ出た部分を表示しないと言うやり方です。
意味はよく解りませんが、なぜかあります・・・。 .overflow_rei03{
overflow:visible;
width:700px;
height:100px;
backgorund:#ffffcc;
}
.overflow_rei04{
overflow:auto;
width:700px;
height:100px;
backgorund:#ffff00;
} visibleでは、はみ出た文章がボックスからそのままはみだしてしまい、autoではブラウザによって違うらしいですがほとんどスクロールになるようです。
これを覚えておけばレイアウトは思いのままに作れますね。

リストの行頭記号を変えたり画像を使ったりする方法をご紹介いたします。
これによって、ホームページをさらに飾り付ける事が出来るでしょう。 .list_rei01{
list-style-type:none;
} list-style-typeで行頭記号を変える事が出来ます。

値	効果
disc	黒丸
circle	白丸
square	四角
lower-roman	ローマ数字（小文字）
upper-roman	ローマ数字（大文字）
lower-greek	ギリシャ文字
decimal	数字
lower-alpha	アルファベット（小文字）
upper-alpha	アルファベット（大文字）
katakana	カタカナ
katakana-iroha	カタカナのイロハ
hebrew	ヘブライ数字
armenian	アルメニア数字
georgian	グルジア数字

　一部抜粋しての紹介ですが、こんなには使わないと思います。
序列のある物は<ol>タグ、無い物は<ul>タグで使いましょう。

画像を使う方法はこちら。 .list_rei02{
list-style-image:url("list_image.gif");
} このように記述します。
もちろんパスの指定は覚えていますよね？
忘れてしまった方は、こちらで確認してください。