この単語は、どのくらいの大きさなのか、みたいなときに使うんですが、開発の現場ではたまに出てきますよね。CSSコンポーネントも粒度であらわせるし、設計をするにはそれを決めないといけないのです。これがまた、やったら難しいんですよ。ボタン一個なのか、ボタングループなのか、ナビゲーション全体としてのコンポーネントなのか、みたいなのはすべて粒度が違うわけです。作る際にはあがってきたデザインを「どこがUIコンポーネントとして切り取れるか」といった具合でとらえる思考が必要なのかなぁと感じるのですが、それでも何をコンポーネント化すればいいのか、を毎回考えていたらたいへんですよね。その際にヒントになるのが、「3回出てきたらコンポーネント化」というアイディアです。threeだそうです。コンポーネント化のタイミングって決めにくいんですが、それを3回めでやろう、というルールに従うならばわかりやすいですよね。高津戸さんのセッションでは、かなり余白に注目した内容が盛り込まれていて、そのコンポーネントの中に含まれている要素が、一部取り除かれたときも正しく余白がでるようにCSSを書く、ということを話されていました。見出しと画像が上下にあって、その2つを枠が囲っているデザインのコンポーネントのとき、上にある見出しのmargin-bottomとしてCSSを書く、といった例です。これは、もし上の見出しがなくなったとしても、画像のみでも枠の余白が変わらないスタイルになります。逆に、画像の上にmargin-topで設定してしまうと、画像のみのときに枠の上部の余白が増えてしまうわけですね。いった余白に注目したいくつものパターンを紹介してくれていたところが、けっこう好評価だったセッションでした。まとめまずは、画像もなんにもない、この記事をここまで読んでくれてありがとうございます!全然、まとめじゃなくて感想でしかないんですけど。考えさせられたんですが、そのきっかけの一つとして、今回聴講をご一緒していた盟友でもある制作者さんが「デザイナーがデザインするときも、粒度を考えるべきなんじゃないかと思う」って言ってたのが、そうだよなぁと思ったのです。それを実現しようとするのが、もしかしたらコーディングにおける理想で、現実としてだいじなのがお互い歩み寄ったり、お互いの作業領域を良い意味で越えていくことなのかなと思うわけでした。都内でウェブデザインの制作・ディレクション業を営んでいるほか、専門学校で講師業もやっています。FoundCSSコーディングのお仕事を理想に近づけたい。セミナーレポート-なかなか参考になるかもしれないウェブデザイン関連の本、10冊。524ゲームが教えてくれた。524JSさんと仲良くしたい。524俺の嫁、アタシのダンナ。