PhotoshopからはじめるCSS再入門 第2回Adobe Pinch In / 制作コラム
CSSの世界に働く不思議な力
公開日 : 2014/05/27
わたしたちが住むこの世界は、地球の中心方向に力が働いているので地面に引き寄せられますが、CSSの世界では左上から力が働いています。
左上に引き寄せられる世界
さっそくAdobe Edge Reflowで適当なボックスを置いてその力を確認しましょう。Edge Reflowは最新版を使ってください。この記事ではEdge Reflow バージョン0.42を使っています。
1. Fileメニューから「New Project」を選択して、新しいファイルを開きます。この状態で表示されているのはグリッドです。グリッドの幅や数は左側の「Grid」で変更できます。
2. 「Columns」（カラム数）を11に変更します。
ではボックスを置いてみましょう。ボックスはCSSでレイアウトの基本となる入れ物で、中にテキストや画像、ボタンなどが入ります。
3. ツールバーの2番目の「Add a Box」（ボックスを追加）をクリックします。
4. ページの上のほうに、左右に余白をあけて横長のボックスを描きます。グリッドの線の近くで描きはじめると、ボックスがグリッドに吸着します。
ボックスの左と上に、数字が表示されていて、左上が基準になっていることがわかります。分かりやすいように、ボックスに色を塗っておきましょう。
1. 「Styling」（スタイリング）タブに切り替えます。
2. 「Backgrounds」（背景）の「Add a color」（色を追加）をクリックして、青を選択します。
3. 何もないところをクリックするか、Enterキーを押して、色を確定させます。
4. 「Layout」（レイアウト）タブに戻しておきます。
割合でデザインする
さて、ボックスの左と上に表示されているのは、左上からの距離です。よく見ると上はpx（ピクセル）、左は％と書いてありますね。
「Layout」の中の「Size」（サイズ）という項目にはボックスの横幅がありますが、これも％で指定されています。
Edge Reflowではボックスの横方向の位置や幅は、何もしないと割合（％）で設定されます。すべてピクセル単位でデザインしてきたPhotoshopユーザーには衝撃的です。
レスポンシブWebデザインでは、ページの横幅に合わせて要素の幅やレイアウトを変えるので、％指定が必要なのです。ハンドルを左右にドラッグして、ページの幅を変えてみてください。上からの位置は変わりませんが、左からの位置と幅が変化することが分かります。
サイズの固定
写真やロゴなど、幅が自動的に変わって欲しくない場合があります。このような場合は幅を固定することができます。さきほどのボックスの下部に、黄色の正方形のボックスを置いてみましょう。
1. ツールバーの左から2番目の「Add a Box」（ボックスを追加）をクリックします。
2. Shiftキーを押しながらドラッグして正方形を描きます。
3. 選択ツールで2つのボックスを選択し、Edge Reflowの右下にある「Alignment Panel」（整列パネル）で左揃えにします。（2つのボックスを選択するにはShiftキーを押しながら順にクリックするか、2つを囲むようにドラッグして範囲選択します）
4. 一旦選択を解除して、あらためて2つ目のボックスだけを選択します。
5. Stylingタブに切り替えて黄色を指定します。Layoutタブに戻しておきます
ボックスの左には％、上にはpxで距離が表示されています。今度はページの上からの距離ではなく、上のボックスの下辺からの距離になっていますね。私たちの世界とは上下さかさまで、ページの上が地面のような感じになって、そこに「積まれて」いる感じです。
ハンドルを左右にドラッグして、ページの幅を変えてみてください。
はい、あっという間に正方形ではなくなりました。
幅が25.53％、高さは276.22pxです。幅も高さも％指定でしかも小数点付き。頭がおかしくなりそうですね。さらに、この欄に表示されているのは2桁までですが、Edge Reflowの下部の「Code」（コード）ボタンをクリックして、コードを見ると、もっと細かい値になっています。あああー、もう！
しかしこれがEdge Reflowによるデザインの世界です。気にしないことにしましょう。
ということで、幅と高さを固定しましょう。「Size」の幅の欄にマウスを載せて、プルダウンから「px」（ピクセル）を選択します。
すると、今見ている幅がピクセル値で自動的にセットされます。
次に高さを調整します。幅の値を、高さの欄にコピー＆ペーストしましょう。
これで正方形に戻りました。これでハンドルを動かすとどうでしょう。今度はどんなにページの幅が狭くなっても幅が変わらなくなりました。このように、％指定、px指定を使い分けることで、ページの幅に応じて変わるものと変わらないものを作りわけることができます。
成り行きで決まる位置
さてそれでは正方形のボックスを横に並べてみましょう。
1. 黄色のボックスを複製します。Altキー（Macの場合はOptionキー）を押しながらドラッグすると複製できます。
2. さらに同じ操作を繰り返して、もう1つボックスを作ります。
3. 整列パネルを使って3つのボックスの上辺を揃えます。
4. それぞれの色を緑、赤に変更します。
これでハンドルを動かしてみてください。赤いボックスはぎりぎりまで粘るものの、幅を固定しているせいで入りきれなくなって、あえなく下にいってしまいます。さらに幅を狭めると、緑のボックスも下に落ちます。この時、左上から力が働いていることを思い出してください。そのせいで、少しでも上、少しでも左の空いている場所に行こうとします。
左から何％、上から何pxという相対的な位置指定なので、ページの幅が狭くなって指定された位置に置けなくなると、ブラウザが勝手にずらしてしまうのです。文章が長くなると途中で折り返されるのに似ています。
これが「Float」（フロート）という仕組みです。喫茶店のコーヒーフロートに浮かんでいるアイスクリームを思い浮かべるとよいと思います。グラスが小さいとアイスクリームをいくつも浮かべられないので、どれか沈みます。
「Advanced」（高度な設定）のFloatの欄を見ると、「Float Left」（左寄せ）がONになっているのが分かります。
このボックスを左に寄せて、続く要素をその右側に流し込むという指定です。Floatを変更することで、右寄せにしたり、中央に配置したり、フロートをOFFにすることもできます。
このように要素の位置がページの幅に応じて成り行きで決まってしまうというのが、CSSのやっかいなところでもあり、面白いところです。
位置の固定
当然、成り行きでは困る場合もあります。絶対そこにいて動かないでほしいという要素は、「絶対配置」にします。
1. 赤いボックスを選択します。LayoutタブのAdvancedにある「Position」（位置）の指定を、Staticから「Absolute」（絶対配置）に変更します。
2. 位置の指定を、右から「9%」に変更し、Enterキーを押します。
ハンドルを動かしてみると、赤いボックスは例え他のボックスと重なろうとも、右から9%の位置を死守します。これが絶対配置です。
今回は、CSSの世界に働く不思議な力についてご紹介しました。Photoshopできっちり1ピクセル単位でやっていた調整とはまったく違う世界でびっくりすると思います。Edge Reflowを使ってデザインするときは、必要なところはきっちり揃えつつも、％指定や小数点を気にしないおおらかな気持ちで、デザインしてみてください。