• Top
• Category
• Contact
• About

サイト構築 -CSS

sponsorsr

floatを使うと思った通りにならず、下に落ちてしまう、幅に収まらないなど、CSS初心者がつまづきやすい問題を解決するポイントを解説したチュートリアルを紹介します。

How Floating Works

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

• floatのルール
• 1. フロート要素を親要素から見るとどうなるか
• 2. 左や右にフロートさせる
• 3. フロート要素が押し下げられてしまう原因
• 4. フロート要素の配置の順番
• 5. フロート要素の配置の優先順位
• 6. フロート要素で親要素を広げない
• フロートのクリア
• clearfix

floatのルール

floatプロパティには、4つの値があります。

.foo {  float: left | right | inherit | none}

この4つの値はそれぞれ、要素を親要素の中でどのようにフロートさせるか指定します。

float: left;

指定した要素を左にフロートさせ、続く要素は右に回り込みます。

float: right;

指定した要素を右にフロートさせ、続く要素は左に回り込みます。

float: inherit;

親要素のフロートの値を継承。

float: none;

初期値、フロートの指定はなし。

1. フロート要素を親要素から見るとどうなるか

フロートさせられた要素というのは、その親要素に対して存在していないということです。言い換えると、親要素の中の子要素をフロートさせると、親要素の中身は空の状態になります。
このことは、親要素の中の子要素を絶対値で配置した時に似ています。

.parent {  position: relative;  padding: 10px;}.child {  float: left }

子要素をフロートすると、親要素の中身は空になる

2. 左や右にフロートさせる

値に「left/right」を指定すると、要素を左や右にフロートさせ、その親要素内で可能な限り左や右に配置されます。これはフロートさせられた要素が期待通りになる最適なポジションです。
この「可能な限り」というのがポイントになります。

3. フロート要素が押し下げられてしまう原因

フロートさせられた要素は、親要素のできるだけ上に配置されますが、前に定義された兄弟要素がある時は押し下げられてしまいます。もし前に定義された要素がインラインやブロック要素であるなら、それは問題ではありません。

このことは例えば、フロートさせる要素をパラグラフの前か後に定義することで、異なる結果になることを意味します。

<div class="container">  <div>フロート</div>  <p>パラグラフ</p></div>

パラグラフの「前に」フロート要素を定義

パラグラフの「後に」フロート要素を定義してみます。

<div class="container">  <p>パラグラフ</p>  <div>フロート</div></div>

パラグラフの「後に」フロート要素を定義

4. フロート要素の配置の順番

複数の要素をフロートさせた場合、前に宣言された要素がより望ましいポジションを与えられます。2番目のルールで説明した通り、最も望ましいポジションはマークアップで要素を最初に定義することです。

3つの要素に「float: right;」を適用すると、最初に定義された要素が最も望ましいポジションで配置され、最後の要素は一番離れて配置されます。

<div class="container">  <div class="right">1</div>  <div class="right">2</div>  <div class="right">3</div>  <p>パラグラフ</p></div>

最初に定義された要素が一番右に配置される

5. フロート要素の配置の優先順位

右（左）の同方向にフロートさせられた要素が複数ある場合、親要素に対してより右（左）に近く、より上に配置されます。

横幅が十分にあれば並んで配置されますが、横幅が足りない場合は下に移動します。

3番目の要素は幅がないため、1, 2番目の下に配置される

6. フロート要素で親要素を広げない

左にフロートさせられた要素は、その親要素の左側を広げることはできません。

左に空きがない場合でも、左にフロートさせられた要素は、その親要素の右側を広げるべきではありません。

左は拡張することができません。
右は拡張すべきではありません。

フロートのクリア

clearプロパティはフロートを解除するもので、floatプロパティと組み合わせて利用します。値は3つあります。

.foo {  clear: left | right | both }

「clear: left;」を要素に指定すると、それに続く要素の左のフロートを解除します。「clear: both;」を指定すると、それに続く要素のあらゆるフロートを解除します。

パラグラフに「clear: left;」を指定

もしクリアが左か右のどちらかだけ指定すると、他の方向のフロートは影響を受けません。

<div class="container">  <div class="left">1</div>  <div class="left">2</div>  <div class="left">3</div>  <div class="right">1</div>  <div class="right">2</div>  <div class="right">3</div>  <p class="clear-left">パラグラフ</p></div>

フロートがクリアされるのは、左だけ

clearfix

フロートを解除する適切な方法に関して、多くの混乱が以前はありました、特に旧式のブラウザで。この問題を解決するのが「clearfix」で、下記のスタイルシートはフロート要素をもつ親要素に定義することで、フロートを適切に解除します。

.cf::after {  content:"";  display:table;  clear:both;}

なぜ疑似要素を使うのが効果的なのかは、疑似要素についての記事を参考にしてください。

• Pseudo-Classes, Pseudo-Elements, and Colon Notation
• 翻訳版:使い方をしっかりマスターしておきたい便利な5つの疑似クラス

How Floating Works

Related Posts

coliss