PhotoshopからはじめるCSS再入門 第8回：流れに任せるレイアウト
（この記事では2014年10月公開のAdobe Edge Reflow CC Preview 8.1を使用しています）
レイアウトについては、連載の第2回でも簡単に紹介しましたが、今回はCSSの世界の「流れ」を感じながら、レイアウトの仕組みを見ていきたいと思います。
まずは画像を3枚、ぴったりくっ付けて配置します。分かりやすく、1から3の番号を振っておきます。3つともマージンを確実に0にして、完全にくっ付けましょう。
この記事ではそれぞれの画像を「1番」「2番」「3番」と呼ぶことにします。
この後、いろいろ実験しては、元に戻していきますので、この状態をあらかじめファイルに保存しておきましょう。
Floatは「後に続け」
Edge Reflowで何か配置すると、あらかじめ「Float（フロート）」が「Float Left（フロート左）」となっています。
「Float Left」は、その要素を左に寄せて、後続の要素に「後に続け」、つまり「左にならえ」と指示するものです。Edge Reflowのハンドルを左へ動かし画面幅を狭くしてみましょう。「後に続け」という指示があるので、2番と3番は可能な限り1番の右側に続こうとしますが、入りきれなくなると3番から順に下に落ちます。
Floatの指定はこのように横方向に流れを作りだし、あとに続く要素はその流れに身を任せるようにレイアウトされます。ペンギンの世界にFloat Leftがあればこのようなことになるでしょう。
画面の幅を元に戻します。さて、Floatの働きを理解するために、1つ目の要素のFloatをわざと切ってみましょう。1番を選択して、Floatを「Float None（フロートなし）」に変更します。
1番の「後に続け」という指示がなくなり、レイアウトは崩れるはずなんですが、なぜか崩れません。
これはEdge Reflowが気を効かせて、2番と3番が見た目で同じ位置に置かれるように勝手にマージンを調整しているためです。2番の画像をクリックすると、0に設定していたはずのマージンがおかしなことになっていることがわかります。
それではReflowが勝手に変えた2番と3番のマージンを0に設定しなおしましょう。
すると、「Float None」によって「後に続け」という指示が消えたことが分かります。画面幅によらず、2番と3番は初めから下に落ちていますね。
Float Noneを指定した1番を選択した状態で、コードを見てみてみましょう。するとFloat Noneというコードは特に見当たりません。
CSSの世界ではこのFloat Noneという状態が普通なので、単に上から下に並べばよいときはあえてFloatの指定を書く必要はないのです。流れをつくって横に並べたいときにFloatを指定します。Floatを指定して「後に続け」の指示があれば、2つ以上の要素を横に並べることができるわけです。
Edge Reflowでは要素を置くだけでFloatが指定されて流れが作られるので、あえてNoneを指定したいときにはじめて設定を変更することになります。
要素の順番が大切
では、2番も3番も「Float None」を指定して、Edge Reflowが勝手に変更したマージンを2つとも0に戻し、3つの画像を縦に並べてみてください。
この状態が、Floatなしの状態です。CSSなしの状態とほぼ同じです。この状態では、要素はページの上から下に順番に並びます。「順番」は、Edge Reflowでは、画面右の「Elements Panel（要素パネル）」で変更することができます。
要素パネルで3番をドラッグして2番の上に持ってきて、順番を入れ替えてみましょう。
実際の表示でも3番が真ん中に来ました。
要素パネルは、Photoshopのレイヤーパネルと見た目が非常に似ていますが、重なり順ではなく、表示される順番を管理するためのものだという点に注意してください。
Clearは「前の指示を解除」
さて、「Float None」は「後に続くな」という指示でした。CSSの世界ではこの方法とは別に、前の要素が指定した「後に続け」命令を、後続の要素で無視するようにすることもできます。
まず、さきほど保存しておいたファイルを開いて、3つの画像を最初の状態に戻しましょう。
この状態で2番に「Clear Left（クリア左）」をクリックしてONにします。
1番には「Float Left」の指示があるのですが、2番が下に落ちました。「Clear Left」が「Float Left」を解除したためです。
もう一度同じボタンを押して「Clear Left」をOFFにすると、「解除」の指示が取り消され、元の表示に戻ります。
右に寄せて左に続け
ではこんな風にレイアウトするにはどうしたらよいでしょうか？2番は画面右に、3番はその左に続くようにしたいとします。
まず、2番と3番を「Float Right（フロート右）」にします。Float Rightは、その要素を右に寄せて、後続の要素は左に続けという指示を出すものです。
するとEdge Reflowが勝手に2番と3番の要素の順番を入れ替えますので、要素パネルを使って正しい順序に戻します。
最後に2番と3番のマージンを0にして完成です。
画面の幅を変えてみると、3番が2番の下に落ちることが分かります。
これは「Float Right」で2番が右に寄った上で、「左に続け」という指示が有効になっているためです。ペンギンの世界でFloat Rightの指示があったらきっとこうなるはずです。
ここで、3番を「Float Left」にすると、次のようになります。（マージンを0にするのを忘れずに）
この場合3番は可能な限り左に寄ろうとする一方で、2番は右側に固執し続けます。
このようにCSSの世界では、Float、Clearを駆使して流れをコントロールしながらレイアウトを行っていきます。
Edge Reflowでレイアウトを変更すると、Float、Clear、マージンなどの設定が勝手に変更されてしまうことがあって混乱するかもしれませんが、慌てないでください。この記事で見てきたように基本的なルールはシンプルです。Edge Reflowが気を効かせて変えたマージンやClearの設定をこまめに調整しながら作業を進めれば、きっと思ったとおりにレイアウトできると思います。