デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

CSS floatで要素を綺麗に整列させる2つのポイント


こんにちは、koheiです。
Webサイトを作る時、HTML,CSSで実装していきますが、初心者で一番躓くのが要素を横に並べたい時に使うfloatプロパティではないでしょうか?
僕も最初floatがさっぱり分かりませんでした。でもfloatを理解すると、一気に実装スキルが上がります!
ということで、今日はfloatで要素を綺麗に整列させる2つのポイントをご紹介します。

スポンサーリンク

floatプロパティの基本コード

まずは、単純に画面の中央にdiv要素のboxを3つ横に並べてみましょう。

HTML、CSSは以下のように記載します。

コード解説
・整列させたい3つのボックス(box1,box2,box3)にfloat:leftを指定することで回り込みを行っています。(CSSコード:10行目、19行目、26行目)
・3つのボックスの親要素(main_box)を中央揃えにするため、margin: 0 auto;を指定しています。(CSSコード:3行目)
・回り込みを解除するため、main_boxのafter疑似要素にクリアーフィックスを指定しています。(CSSコード:29行目〜34行目)

それではfloatで整列させるための具体的なポイントを説明していきます。

ポイント1:親要素の横幅を超えないように!

3つのボックスの親要素(main_box)の横幅は、900pxです。
3つのボックスを綺麗に整列させるには、この900pxを超えないように3つのボックスの横幅、マージンを設定していきます。
3つのボックスの横幅は250px、真ん中のボックス(box2)の左右マージンを75pxに設定しています。
従って、3つのボックスの横幅とマージンの合計が900pxとなり、親要素(main_box)の横幅と一致します。これで綺麗に均等にボックスを整列させることができます。

もし、親要素の横幅を超えた場合はどうなる?
整列させる要素の横幅、マージンの合計が親要素の横幅を超えてしまった場合は、以下のようにレイアウトが崩れていまいます。

ポイント2:floatの解除を忘れないこと!

2つ目のポイントはfloatの解除を忘れないようにしてください。
floatの解除方法は、floatを指定した要素の後にクリアーフィックスを指定します。今回の例では、CSSのコード29行目〜34行目の部分です。

もし、float解除を忘れてしまったら・・
floatの解除を忘れると、以下のように回り込みが解除されずに、レイアウトが崩れてしまいます。

【紹介】2カラム〜4カラム整列対応のCSSテンプレート

最後に、2カラム〜4カラムで要素を整列させたい時に使えるCSSを紹介します。

このテンプレートを使用したサンプルコードも無料で配布しています。ご活用ください。

■2カラム〜4カラム整列対応のCSSテンプレート
※自分のCSSファイルへコピーしましょう。

使い方:2カラムの指定

説明
・2カラムにしたい要素のクラスに「col」、「one-second」を指定してください。
・親要素のクラスに「row」を指定してください。

使い方:3カラムの指定

説明
・3カラムにしたい要素のクラスに「col」、「one-third」を指定してください。
・親要素のクラスに「row」を指定してください。

使い方:4カラムの指定

説明
・4カラムにしたい要素のクラスに「col」、「one-fourth」を指定してください。
・親要素のクラスに「row」を指定してください。

まとめ

最後にまとめると、floatで整列させる時のポイントは以下になります。

まとめ
・親要素の横幅を超えないように!
・floatの解除を忘れないこと!

皆さんも上記に注意して実装してみてください!
それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン