CSSのfloatプロパティが難しくてわけわかんないんですが・・・

こんにちわ、田中でございます。

とある勉強会に行ってhtmlとcssの勉強をしていたのですが、
htmlとcssで初めて引っかかりました!

floatが難しくて理解できない!!
最終的に成功はしたのですが、成功したというのと、
理解したというのはまた別の話でして…

この先使うときにすごく心配です!!
なので今日は、少しいつもと違うかな?
と思いましたが、こういうブログにさせていただきました!

早速、floatをとりあえずググってきます笑

…縦に並んでいるものを横並びにする、
っていうのがCSSのfloatプロパティなのですかね?(個人の見解です)

悩んでばかりいても仕方ありません!
とりあえず、意味がわからなくても
書いてみればなんとなくわかるでしょう!(多分)

では早速、


HTML

<div class=”red”></div>
<div class=”violet”></div>
<div class=”pink”></div>

CSS

.red{
background-color: red;
width: 200px;
height: 250px;
}.green{
background-color : green;
width: 100px;
height: 150px;
}.violet{
background-color :violet;
width: 500px;
height: 80px;
}


こんな感じになったのではないでしょうか?
いつも通り見慣れた鬱陶しい縦並びですね!
この状態からCSSにfloatを追加してあげると・・・

CSS
.red{
background-color: red;
width: 200px;
height: 250px;
float:left;
}.green{
background-color : green;
width: 100px;
height: 150px;
float:left;
}.violet{
background-color :violet;
width: 500px;
height: 80px;
float:left;
}


こんな感じに横並びに!

何と無く分かりましたよね?
僕もまだまだわからないのですが、
微妙にニュアンスだけつかんだような気がします。

もう少し深入りしたものも、またブログに載せたいと思います。
個人的なリベンジとして…

関連記事一覧

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP