このエントリーは tech.kayac.com Advent Calendar 2015 の3日目のエントリーです。
こんにちは。ここ5年で6回引っ越している @ki_230 です。
普段は引っ越しの傍ら、ウェブサイトのマークアップに勤しんでおります。
今回は出力結果よりも出力結果を導き出すルールが重要！という話をしたいと思います。
まずは引っ越しの話からはじめましょう。
※ できることであればPC版Chromeでご閲覧ください。
例えば、あなたが友達に引っ越しを頼まれたとしましょう。
いまの家がこんな感じなんですけど、新しい家におんなじ感じで家具を配置して欲しいんですよね。
※ マウスオンで家具の名前がわかります。
合点承知の助！
でもって、家具を運び入いれる際、新居の広さが以前のものと全く変わらなければ問題は起こりません。
※ マウスオンで家具の名前がわかります。
完璧だ。
完璧ですね。
部屋の広さが同じであれば、前の部屋と同じ座標に家具を設置すれば良いだけの話ですからね。普段からピクセルパーフェクトを心がけている一流のフロントエンジニアであればお茶の子さいさいでしょう。
しかし、新居と前の部屋の広さが違った場合、「おんなじ感じ」の解釈の仕方にレイアウトのセンスが問われることになるわけです。
今回は一旦前より広い部屋に引っ越した場合を考えてみましょう。
* なにも考えずに左上基準で配置してみた場合
こんな感じでしょうか。
当然、部屋の広さに依存せずに左上基準で前と同じ座標に家具を配置することはできます。
今回の場合は、部屋の右側・下側に謎のスペースが生まれてしまいました。
ある意味ではゆとりのある生活が遅れるのかもしれませんが、
ちょっと右側・下側を贅沢に使いすぎですね。
正直センス無いですね。
と言われてしまいそうです。
* とりあえずセンター基準で配置してみた場合
無難といえば無難です。
しかし部屋は広くなったにも関わらず、生活スペースは変わりません。
部屋の広さを活かしきれてないですね。
テレビとカラーボックスは壁際に置いて欲しかったですね。
正直センス無いですね。
と言われてしまいそうです。
* ほんのりとパーセンテージで配置してみた場合
ちょっと間延びした感はありますが、前の部屋の雰囲気は残っています。
一見問題ないようにも見えます。
ちゃぶ台と座布団がちょっと離れてますね。
ちゃぶ台とゴミ箱が離れすぎてますね。
これじゃあゴミを捨てるのが大変じゃないですか。
正直センス無いですね。
と言われてしまいそうです。
さてさて、どうしてこんな感じになってしまったのか考えてみましょう。
今回の場合、結局どう配置するのが正解だったのか。こればかりは一概には言えません。結局のところ依頼主の胸のうち次第です。
しかし、そんななかでも1つだけ確かに言えることがあります。
それは、
- 前の部屋のレイアウトは、依頼主の胸のうちにあるルールが具現化されたもの
- 依頼主は前と同じルールで配置して欲しいのであって、同じ座標に配置してほしいわけではない
ということです。
なので、おんなじ感じで、とリクエストを受けた際は、座標を計測する以上に依頼人の胸のうちにあるルールを探り出すことが重要になってくるわけです。
繰り返しになりますが、マークアップとは座標ではなく、座標を導き出すためのルールを実現することが重要なんです。
座標を導き出すためのルールを実現することが重要なんです。
重要な事なので3回言いました。
そう。そして、フロントエンジニアはこのルールを推測するのが得意なのです。これが一流のフロントエンドエンジニアが引っ越しの達人である理由ですね。
長い前置きでしたが、ここからようやくCSSの話になります。
フロントエンドエンジニアが引っ越しの達人である理由
昨今マルチデバイス全盛の時代、世の中には様々なサイズのディスプレイがあります。
一流のフロントエンドエンジニアは、受け取ったPSDデータが、仮に1つのディスプレイサイズしか想定されていなかったとしても、そこから なんとなく いいかんじに ルールを読み取り、マルチディスプレイに対応させることなどお茶の子さいさいなのです。（デザイナーに直接確認するのが一番ですが）
例えば、
的なデザインを見たとき、
200px × 200px の正方形が左上から100pxのところに配置されてますね。
と思えば、
.box {
margin: 100px;
border-radius: 10px;
width: 200px; height: 200px;
background: #3F51B5;
box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}
という感じに。
200px × 200px の正方形が上下左右センター合わせで配置されてますね。
と思えば、
.box {
position: absolute;
top: 50%; left: 50%;
margin: -100px;
border-radius: 10px;
width: 200px; height: 200px;
background: #3F51B5;
box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}
という感じに。
マージンを100px持った四角形が描かれてますね。
と思えば、
.box {
position: absolute;
top: 100px; bottom: 100px;
left: 100px; right: 100px;
border-radius: 10px;
background: #3F51B5;
box-shadow: 0 0 20px rgba(0, 0, 0, .6);
}
という感じにコーディングするわけです。
同じウィンドウサイズで観覧すれば同じものになりますが、ウィンドウサイズを変化させると全く違うデザインになってしまうということがDEMOをみていただければ伝わると思います。
これらの実装方針に正解はありませんが、デザイナーの意図は存在します。
それをデザインから読み取ることもあれば、デザイナーに直接確認することもあります。
ここでルール読み取り力が身につくわけですね。
なので、今回の引っ越しのケース、私であれば、
- テレビは壁際に設置（角度はちゃぶ台に対して45度）
- カラーボックスも壁際に設置
- ちゃぶ台は部屋のセンターに設置
- ゴミ箱はちゃぶ台の近くに設置
というルールを感じ取り、こんな感じで配置します。
※ こちらのDEMO を是非ともさまざまなディスプレイサイズでご確認ください
きっと依頼主も満足してくれることでしょう。
いかがだったでしょう。ルールを実現する重要性が伝わったでしょうか？
みなさんも引っ越す機会があったら是非フロントエンドエンジニアをアサインしてみてくださいね。
明日は期待のルーキー、ふかぽんがすばらしい記事を書いてくれる予定です！
