PhotoshopからはじめるCSS再入門 第8回:流れに任せるレイアウト

BY 公開

PhotoshopからはじめるCSS再入門

(この記事では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」が有効になっている

「Float Left」は、その要素を左に寄せて、後続の要素に「後に続け」、つまり「左にならえ」と指示するものです。Edge Reflowのハンドルを左へ動かし画面幅を狭くしてみましょう。「後に続け」という指示があるので、2番と3番は可能な限り1番の右側に続こうとしますが、入りきれなくなると3番から順に下に落ちます。

 3番は入りきれなくて下に落ちるが、それでも左に寄ろうとしている

Floatの指定はこのように横方向に流れを作りだし、あとに続く要素はその流れに身を任せるようにレイアウトされます。ペンギンの世界にFloat Leftがあればこのようなことになるでしょう。

 ペンギンにとってのFloat Left

画面の幅を元に戻します。さて、Floatの働きを理解するために、1つ目の要素のFloatをわざと切ってみましょう。1番を選択して、Floatを「Float None(フロートなし)」に変更します。

 Float Leftから、Float Noneに切り替えたところ

1番の「後に続け」という指示がなくなり、レイアウトは崩れるはずなんですが、なぜか崩れません。

これはEdge Reflowが気を効かせて、2番と3番が見た目で同じ位置に置かれるように勝手にマージンを調整しているためです。2番の画像をクリックすると、0に設定していたはずのマージンがおかしなことになっていることがわかります。

 2番の左マージンと上マージンが変更されている

それではReflowが勝手に変えた2番と3番のマージンを0に設定しなおしましょう。

 上下左右のマージンを0にしたところ

すると、「Float None」によって「後に続け」という指示が消えたことが分かります。画面幅によらず、2番と3番は初めから下に落ちていますね。

 1番にFloat Noneを指定し、2番と3番のマージンを0にした結果

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 Noneにして、マージンを0にした結果

この状態が、Floatなしの状態です。CSSなしの状態とほぼ同じです。この状態では、要素はページの上から下に順番に並びます。「順番」は、Edge Reflowでは、画面右の「Elements Panel(要素パネル)」で変更することができます。

 Elements(要素)パネル

要素パネルで3番をドラッグして2番の上に持ってきて、順番を入れ替えてみましょう。

 3番を2番と入れ替えたところ

実際の表示でも3番が真ん中に来ました。

要素パネルは、Photoshopのレイヤーパネルと見た目が非常に似ていますが、重なり順ではなく、表示される順番を管理するためのものだという点に注意してください。

Clearは「前の指示を解除」

さて、「Float None」は「後に続くな」という指示でした。CSSの世界ではこの方法とは別に、前の要素が指定した「後に続け」命令を、後続の要素で無視するようにすることもできます。
まず、さきほど保存しておいたファイルを開いて、3つの画像を最初の状態に戻しましょう。

この状態で2番に「Clear Left(クリア左)」をクリックしてONにします。

 Clear LeftをONにしたところ

1番には「Float Left」の指示があるのですが、2番が下に落ちました。「Clear Left」が「Float Left」を解除したためです。

 2番にClear Leftを指定したので、1番のFloat Leftの指示が解除された

もう一度同じボタンを押して「Clear Left」をOFFにすると、「解除」の指示が取り消され、元の表示に戻ります。

右に寄せて左に続け

ではこんな風にレイアウトするにはどうしたらよいでしょうか?2番は画面右に、3番はその左に続くようにしたいとします。

まず、2番と3番を「Float Right(フロート右)」にします。Float Rightは、その要素を右に寄せて、後続の要素は左に続けという指示を出すものです。

 Float Rightを指定したところ

するとEdge Reflowが勝手に2番と3番の要素の順番を入れ替えますので、要素パネルを使って正しい順序に戻します。

 2番と3番を入れ替えて、1、2、3の順番に戻す

最後に2番と3番のマージンを0にして完成です。

画面の幅を変えてみると、3番が2番の下に落ちることが分かります。

 3番はなるべく右に寄りたいが、入りきれないので下に落ちる

これは「Float Right」で2番が右に寄った上で、「左に続け」という指示が有効になっているためです。ペンギンの世界でFloat Rightの指示があったらきっとこうなるはずです。

ここで、3番を「Float Left」にすると、次のようになります。(マージンを0にするのを忘れずに)

 3番は、できるだけ左に寄ろうとする

この場合3番は可能な限り左に寄ろうとする一方で、2番は右側に固執し続けます。

このようにCSSの世界では、Float、Clearを駆使して流れをコントロールしながらレイアウトを行っていきます。
Edge Reflowでレイアウトを変更すると、Float、Clear、マージンなどの設定が勝手に変更されてしまうことがあって混乱するかもしれませんが、慌てないでください。この記事で見てきたように基本的なルールはシンプルです。Edge Reflowが気を効かせて変えたマージンやClearの設定をこまめに調整しながら作業を進めれば、きっと思ったとおりにレイアウトできると思います。

  TAGS

  AUTHOR

石川 修一

株式会社ニューロマジック / 執行役員 / 早稲田大学大学院 基幹理工学研究科 招聘研究員 デザイン、フロントエンドからクラウドまで、新しいことに興味がありすぎて時間が足りない、Web制作会社の制作部門リーダー。九州芸術工科大学で粘土や溶接、写真現像、CGなど学び、ドリームキャストのゲーム開発へ。その後システムエンジニアとして今の会社に参加し、Flashエンジニアとしてフロントエンドに転向。そんなことをしているうちにAdobeのあらゆるソフトを使うように。趣味は世界の空港巡り。