Menu

floatを用いて要素を横並びする場合の注意点とは


floatを適用したらどこかで必ず効力を解除する

ホームページに画像を貼りつけ、その右横、あるいは左横に画像の説明文を記載したい場合、「float」と呼ばれるスタイルシートのセレクタで対応するのが簡単です。スタイルシートが未発達だった昔は、画像と説明文を横並びにするようなデザインを施したい場合、TABLEタグを使うケースが多かったのですが、近年はまったくといっていいほど使われなくなっています。これはスタイルシートで対応できるようになったからということもありますが、ユーザビリティ、SEOといった点でもよくないという認識が広まったからでしょう。
floatの使い方はそれほど難しいものではありませんが、使い方を誤るとデザインが大きく崩れてしまうために注意が必要です。まず、floatを適用した場合、どこかで必ずfloatの効力を解除しなければなりません。解除しないと横並びさせたい要素だけではなく、それより下にあるすべての要素が横並びになってしまうからです。

カラム落ちしてしまった場合の対処

また、floatを使って複数の要素を横並びにすると、端の方にある要素だけ下の方に落ちてしまう感じになることがあります。これは「カラム落ち」と呼ばれる現象で、floatを使ってデザインをするとよく発生するトラブルの一つです。なぜカラム落ちになってしまうかというと、もともと設定されているホームページの横幅に比べて、横並びさせている要素の合計の幅が長くなってしまい、収まらなくなったためです。もしカラム落ちした場合は、ホームページの横幅を確認して、そのサイズに収まるような形で要素を並べるようにしましょう。

アクセス数を伸ばしたい、見やすさを重視したいならいつどこでも見られるスマホやタブレットに対応しているレスポンシブwebデザインを取り入れることが重要です。