のはこごと

モノヅクリノハコの中の人の雑記です

【HTMLとCSSの基礎の基礎講座】その25:ボックスを浮かす、回り込みの解除

ついに25日目です。AdventCalendar企画、最終日です。

筆不精のくせに案外書けたもんだ!ワーイヽ(゚∀゚)メ(゚∀゚)メ(゚∀゚)ノワーイ

 

という事で最終日は【ボックスを浮かす・回り込みの解除】についてです。そう、第一回目でチラッとだけやったあれです。

floatというものを学んでいこうと思います。さらっと書いてますが、こいつ結構重要だったりします。では、早速見ていきましょう。主に使うのは、

float

clear

この2つのプロパティです。

 

float:値; →浮かす

値にはrightとleftが入ります。それぞれ対象要素を左寄せで浮かすか、右寄せで浮かすかです。

 

clear:値; →回り込みを解除

浮かせたままですと、その隙間にどんどん要素が回りこんで入ってきてしまう為、こいつを使ってそれを阻止します。

値にはrightとleft、それと両方の回りこみを解除するbothがあります。

 

img1

サイト全体を包括している<div>にidをつけてwidthを固定してあげます。

構造を作っていくものにはidを振りましょう。classにはしない!

この時、id="wrapper"というものがよく使われます。

人によってはwrapって書く人もいますけどね。

float、なんとなーくわかってきましたでしょうか?

  • 浮く
  • 浮かせた場所には次の要素が回りこんで入ろうとしてくる
  • それを阻止する為にclearをかける

です。

 

さあ、それでは、floatだけで国旗を書いてみましょう。

HTMLのほうは、<div>でも<p>でも構いません。

<class>は色名でokです。むしろ何でもokです。

cssをうまく使って、浮かせて並べてみましょう。

……

…………

 

という訳で、まずは簡単なベルギーあたりを作ってみちゃいましょう。

まず、<div>もしくは<p>でカラーが3色なので、3つの箱を作ります。

img2

ああ/(^o^)\色名で作ればよかった!

まあいっか。それぞれ、左にいくもの、真ん中、右にってかんじです。

これで3つの箱は用意出来ましたね。

さて、これにCSSで色をつけて横に並べてみます。

なんとなく想像はついているとは思いますが、このままだとHTMLの構造通り、下に一列に並んでしまいます。

 

ていっ!

img3

ベルギーは黒と黄色と赤の3色が使われているので、それぞれ色と箱の幅・高さを指定してあげて、

さあ、浮かせます。

float!!!

 

img4

このように横に並べば成功です!

本来ならclearをかけて浮くのをどこかで止めなければならないのですが、

ま、今回は3つを並べるだけなのでいいでしょう。割愛!!

 

floatの練習をするには、国旗を作ってみるのは有効だと思います。

自分はあと、日本とデンマークも作ってみたりしました。

日本に関しては、border-radiusで●を作りそれの位置をpositionでいじったりが必要だったり、デンマークもtopとbottomを計算したり、

* {margin:0;}が大事だったりと色々試行錯誤したものですが、はまると、どんどん色んな国がCSSだけで描けるようになってきます。面白いですよ!

 

【float】によるCSSのレイアウト崩れを防ぐには

  • 左右に配置した<div>の次の<div>へ「clear:both;」で回りこみを解除する
  • 「width:」で横幅を指定してあげる

これで、大体のレイアウト崩れを防ぐ事ができます。

あとは、数をこなして感覚を掴む事ですね。こればっかりはやってみないとわからない事なので、何度もチャレンジ!

CSSはとっても面白いので、ぜひともチャレンジしてみてくださいね!

 

ということで一人AdventCalendar、無事完走いたしました。

来年はやらないぞ!!!笑

たまにはこうやって知識を思い出しながらまとめてみると、新しい発見があったり、自分の忘れている事が沢山出てくるのでいいものですね。25日間、楽しく更新できました!

 

ご愛読、ありがとうございました!nohako先生の次回作にご期待ください。

( ゚д゚)ハッ!…ただのしかばねになっている!!

 

次回からはまたのんびりのったりペースでの更新となります。

 

勉強会などの感想は、もうひとつのサイトにて書いておりますので、そちらも宜しくお願いいたします。

それでは、良いお年をー('∇')ノノ