先日、プログラミング学習用のサイトを2つご紹介しました。
サイトを使って勉強をしていて、わからなかったのがfloatfloat。
使い方が少しわかったので、残しておきたいと思います。
floatとは
＜div＞タグや<p>タグは、もう1つ別のタグを書くと、必ず次の行に2つ目の要素が並びます。
＜div＞1行目＜/div＞ ＜div＞2行目＜/div＞
floatは、＜div＞タグや<p>タグなど、通常縦に並ぶ要素を、
横にしたいときに使います。
＜div class="float"＞1行目＜/div＞ ＜div class="float"＞2行目＜/div＞
.float {
float:left;
}
| left | 指定した対象を左に寄せて、次の要素を右に回り込ませる。 |
| right | 指定した対象を右に寄せて、次の要素を左に回り込ませる。 |
| none | 初期値。配置の指定なし。 |
画像でfloatを使う（失敗例）
同じことを画像を使ってやってみます。
＜div class="float"＞＜img src="画像のパス" /＞＜/div＞ ＜div class="float"＞＜img src="画像のパス" /＞＜/div＞ ＜div＞さぁ、どうなるでしょうか。＜/div＞
.float {
float:left;
}
私が期待していたのは、画像だけが横に並び、
文字は縦になることですが、
文字も横になってしまいました。
そして、今回のケースではわからないですが、
同じ大きさの画像を使っていて、floatを使ったときに、
高さが若干違うという事象が起こりました。
解決編
まだまだHTML＆CSS初心者の私には訳が分かりませんでしたが、
この本を読んで解決しました！
 |
はじめてのWebページ作成 HTML・CSS・JavaScriptの基本 （KS情報科学専門書） [ 松下 孝太郎 ] 価格:2,090円 |
この本は、HTML・CSS・JavaScriptそれぞれの基本的な書き方の説明があり、
本に沿ってサンプルコードを書いて、結果どうなるかを見て把握することができるように書かれた本です。
この本で分かった、上記の原因は、
floatを使って、ブロックが横に並ぶようにしたけど、
その横並びの解除をしていなかったこと。
これだけ…。
divで他のクラスを入れたりしてもダメで、
floatを使って横並びにした後は、clearを使って解除しないと駄目なことがわかりました。
ということで、解除してみます。
＜div class="float"＞＜img src="画像のパス" /＞＜/div＞ ＜div class="floatend"＞＜img src="画像のパス" /＞＜/div＞ ＜div＞さぁ、どうなるでしょうか。＜/div＞
.float {
float:left;
}
.floatend {
clear:left;
}
要素の左寄せをfloatを使って指定していたので、
左寄せのclearを指定することで、解除ができました。
まとめ
きちんと理解してコードを書かないと、
想定と違う状況になったときに、
焦ったり、
できない方法を試みたりしてしまいます。
やはり基本の積み重ねは大事ですね。
