今、ボックスレイアウトを行うならfloatではなくflexbox!


floatはカラム落ちの危険性が高い

近年、ホームページのデザインとして、記事の見出しと関連画像、概要をボックス型のレイアウトでまとめ、横にいくつか並べるというものが多くなっています。こうすることで単に記事の見出しだけをリスト形式で表示するよりも、どんな内容の記事があるのかわかりやすくなるからです。

では、こうした箱を並べるようなレイアウトはどのようにして作ればいいのでしょうか。まず、以前よく使われていたのがスタイルシートでfloatというプロパティを用いるやり方です。floatとは浮かせるということで、本来、HTMLに書いた順番に上から下へと縦に並ぶ要素を横に浮かせていくという形で横並びさせることが可能です。ただ、floatは現在、あまり多く使われていません。というのは、カラム落ちと呼ばれる現象が起きやすいからです。カラム落ちはホームページの横幅に対して並べる要素の合計幅が長いと発生し、横一列にならずに二段になってしまいます。

floatよりも使いやすいflexbox

それでは、今、floatの代わりになにが用いられているのかというとflexboxと呼ばれるプロパティです。flexboxはcss3で使えるようになったプロパティで、ホームページの横幅に対して要素の幅を可変させることが可能です。そのため、floatと比べるとカラム落ちする可能性が低く、ボックス型のレイアウトを組むにはうってつけのプロパティといえます。

floatは一度設定すると、ここから先はfloatは解除というHTMLを書き忘れてしまうと、すべての要素がfloatの影響を受けることになってしまいますが、flexboxではそういったことはないので、その点でも使いやすいといえるでしょう。

レスポンシブデザインは、プログラミングスクールを活用することで学ぶことができます。また、デザインやプログラミングに必要な基礎知識も養うことができます。

Related Posts