ふんいきがわかるCSSレイアウトの知識

投稿日時: 投稿者:

初 FPS TPSにPUBGを選んでしまった、マネフォのJSer 大須賀です。ドンカツたべられません

先日社内で、デザイナさんに向けてちょっとしたCSSの説明をしました。
本記事では、このスライドを作るに至った動機などを書いていきます。


　
※ 2017/10/04 10:56「PUBGはTPSだ」と弊社ゲーム部の部員から指摘を受けました。全くもってその通りなので修正しました。

デザイン・実装のジレンマ

  • デザインの良し悪しが分かるのはデザイナ
  • 実装コストが分かるのはエンジニア

という状況で「お互いの作業がトレードオフになることがある」という点に難しさがないでしょうか？

効率を上げるには、なにかしなきゃいけません。

ということで冒頭のスライドが生まれました。


　

他の人達のとりくみ

色んな所で同じような課題に立ち向かっている人達もいるようです。

本記事もふくめて相互理解というのが共通のテーマになっているかと思いますが、それぞれ全く違うアプローチになっています。
コレをやれば解決！という方法はなくてまだ手探りが必要ということかもしれません。
　

まとめ

デザインと実装のあいだのコスパ調整は双方の知識をあわせないと判断できません。
相互理解 という言葉はこういう状況から自然に発想されたものでは無いでしょうか。

今回の取り組みではCSSのふんいきを伝えることで 相互理解 を深めようという狙いのとりくみでした。

目に見える改善があったわけではないですが、今後もいろんなことを通してデザイナとエンジニアの相互理解につながっていけば良いなと思います。

決して「デザイナーさんにCSS書いてもらって楽したい！」「余った時間でJSのメンテしたい」とか私利私欲にまみれた動機ではないです！
　
　
　
　
　
　
　
　
　

付録

本文が少し短いので、ここからはスライドの内容とその狙いを軽く載せておきます。

箱詰めの話

これはDOMの設計の話です。
そうですCSSの話ではないのです。

が、基本的にはこのツリー構造のHTMLというものにじわっと拘束されながらCSSを書いていくことになるので、この話をしないわけにはいかないなと思って冒頭にいれました。

おきばしょの話

これはpositionだったりtext-alignだったりの話でした。

レイアウトに関してはflex-boxが実戦投入しやすくなりかなり自由度が挙がってきましたし、girdが控えているのでDOMに縛られれない世界が来るかもしれないですね。

伸び縮みのはなし

height, widthの初期値であるautoの話でした。

webは様々な理由から柔軟に伸びたり縮んだりするレイアウトの仕組みがありますが、
ページの更新に伴う調整コストを下げるにはこのautoにどれだけ任せておけるかが鍵になりますね。

並び順のはなし

inlineもblockもどちらも自動レイアウトの制御に関わっているわけですが、ここでは基本的な選択肢を紹介できればいいかなという意図でいれました。

改行のはなし

弊社B2Bプロダクトはユーザの実際のブラウザの大きさを集計し、横幅1200pxを基準にデザインしてもらっていますが、基本的には様々な幅のブラウザで快適に利用できるほうが良いですよね。

そういう前提において、幅の伸縮と改行は切り離せないと思ったので入れました。

あ、ちなみに有効な高さは 600px ぐらいしかなさそうでした
想像するに横はモニタの解像度いっぱいまで広がるけど、縦はいろいろあって縮んでいるようです。
サイズの集計をモニターのサイズで行ってしまうと意図せずユーザの縦方向の領域が足りてない、なんてことになっているかも。
この集計の話もどっかで書きたいかも。

レスポンシブのはなし

さて最後はレスポンシブの仕組みや「そんな万能じゃないんです」みたいな話です。

要件定義からデザインする過程で、「レスポンシブもよろしく」みたいな雑な依頼がデザイナさんに飛ぶと「そのレスポンシブいろいろお高いよ？」みたいな状態になることもあるので、どさくさにまぎれて愚痴を言っとこうという狙いで載せました。

このスライドの例だと flex-box 使ってれば割りと簡単にできそうですね。 (保守性が下がらないとは言ってない)

最後に

マネーフォワードでは、エンジニアを募集しています。
ご応募お待ちしています。

【採用サイト】
■マネーフォワード採用サイト
■Wantedly | マネーフォワード

【マネーフォワードのプロダクト】
自動家計簿・資産管理サービス『マネーフォワード』
■Web
■iPhone,iPad
■Android

「しら」ずにお金が「たま」る　人生を楽しむ貯金アプリ『しらたま』
■Web
■iPhone,iPad

ビジネス向けクラウドサービス『MFクラウドシリーズ』
■会計ソフト『MFクラウド会計』
■確定申告ソフト『MFクラウド確定申告』
■請求書管理ソフト『MFクラウド請求書』
■給与計算ソフト『MFクラウド給与』
■経費精算ソフト『MFクラウド経費』
■入金消込ソフト『MFクラウド消込』
■マイナンバー管理ソフト『MFクラウドマイナンバー』
■資金調達サービス『MFクラウドファイナンス』

メディア
■くらしの経済メディア『MONEY PLUS』