# CSS Talk vol.3に参加したメモ
###### tags: `CSS` `勉強会` `グリッドレイアウト` `CSS設計`

13:30 開場
14:00 勉強会の案内・説明
14:10〜16:30 セッション
16:30〜 懇親会 (勉強会と同会場にて)
18:00 終了

## 勉強会の案内・説明
司会　にまたさんの導入
　安田さんのご挨拶
　開いた理由
- CSSで書くときの問題とか、「こうした方がいい」とかがあるので～
- CSSはデザインとかかわりがあるので、共有し合える場になれば

## 「グリッドレイアウト これまでとこれから」森永哲平
自己紹介
会社　グラッドキューブ　プロダクト開発チーム　エンジニア
メディア　SPAIA
### グリッドレイアウトとは
画面を縦横に分断する～～なんちゃらーーーあとでIT用語辞典調べよう
格子＝グリッド
方眼紙があってそこに乗せていく感じ
なぜよく使われるの？→すっきりとした見やすい構成になる！

### これまでのグリッドレイアウト
- CSSフレームワークを使う方法（最もポピュラー）
画面幅を12分割することが多い
どれだけの幅を使うかをクラスで指定する

- たまにJSのライブラリを使う方法がある
縦横色んな大きさのブロック　サイトMasonry
画面幅に応じて配置が動的に変わるときとか

グラッドキューブWebSite
サービスのところ。何％で配置を行ってます
Jeet というフレームワーク
グリッドレイアウトに特化したやつ　軽いらしい
スタイラスがどうの？　スタイラスとは
フレックスボックスとの相性は悪い

### CSSgridlayout
ホットなトピック
W3Cにて使用策定中　2/9に勧告候補
CSSだけでグリッドレイアウトできる！
各ブラウザが正式採用している！
対応状況
Firefox52~, Chrome57~, Safari iOS10.3~,とかとか
IEとEdge
最初にMicrosoft導入。だけどベンダープレフィックスが必要で仕様が古いままらしい。
Chromeは軽いバグがあるらしい

### デモ
html
div>p*4 class=Area1~4
main{
display:grid;
grid-template-culumns: 100px 100px 100px;
列の幅と列の高さを指定し、
各列、各行の間隔を指定する
}

こんな書き方もできる
grid-template-culumns: 100px 1fr 2fr;
1列目は100px
2,3列目は残りの幅を1:2で分割する

.aria3{
grid-culumn: 1/3; //列の開始位置、終了位置の指定　1番から3番までの2列分
grid-row2; //行,行の開始位置の指定　2番から3番までの1行分
}

左端が1番
一番上の端っこが1番

HTML,CSSのコードはcodePen
https://speakerdeck.com/m_n_t_p/guritudoreiauto-koremadetokorekara

### これからのグリッドレイアウト
- CSSGrid Layoutは広まるか
普及するまでは時間がかかる？

### まとめ
Flexbox → 縦または横の一方向だけの指定
CSS Grid Layout → 両軸対応
うまくつかいわけよう

デザイナーやディレクターの方にlayoutの列の幅や行の高さ、列、行の間隔とか具体的な指示を下さい
px単位の指示ほしいよね～デザイナーの人よろしく～って話

CSSフレームワーク
JSライブラリ
CSS Grid layout
場合に応じてうまく使い分けろ

実装が楽になるはず…

## 「SC5 style guide generator の話」 後藤知宏
CSS設計について考える
株chatbox

CSS設計とは
FRONTEND CONFERENE
イベントのサイトとかはCSS設計不要でしょ
- 小規模なサイトを制作するとき
- 頻繁に仕様変更が発生するとき
- たくさんの人が入れ替わりで作業するとき
最終的に形が整っていればおっけ～
わざわざ設計する必要なさそうな話

CSS設計の目的
正しさ　正しい書き方をより簡単に行えるように
どんな人が入ってきても一番簡単なことを簡単に書けるようにする
CSSでぐちゃぐちゃに
何でもできるツールを何でもできないところに落とし込むのが設計
＝ルールを導入する
信頼性の高い状態で設計できる

分けて考えるという当たり前のこと？
共通化しない？

TOPはTOPだけとか
設計に時間を割く必要？

なぜ共通化するのか　こういう時にCSS設計が必要
50ページの制作を行うのに50倍の予算がつかない場合
構築時の担当者を未来永劫保存しておきたい場合

で、やるとして

破たんするとき
規格外のクライアント要求
健忘症的デザイナー
思いやり不足　ちゃんと伝わってない

まぁうまいこといかない　コミュニケーション不足！
CSS設計はちゃんと伝えないと破たんする

だからといってCSSの話をお客さんとかデザイナーに話してもちょっとむり
スタイルガイドってツールがあるよ！

最近は
SC5-styleguide

CSS設計の意図を伝えるつーる
CSSのドキュメントをコメント
まあいろいろ

フォルダをつくる
いくつかコマンドをたたく
なんかいろいろ

コンポーネント集一覧みたいなのがWebで作れる
規約、ルールが作れる
ルール内における変更に強くなる

みんなにとって楽なCSS設計！

タグのmixinsが便利　使えます。　後で調べる
JSの関数みたいに使える

スタイルガイドは必要ない場合の方が多いです

ただ
意外と大変
きれいなCSSを書かなきゃいけない
コンポーネント間のマージなどstyleguideの中だけでは表現できない
HTMLモックなども同時に作成できたらGOOD

面倒でそのうちメンテされなくなる
作るならちゃんとワークフローを
お客さんに公開してメンテの意識を
自動デプロイは必須

CSS設計は大事な技術ではある
何かの時に対応できるように、スキルアップのために意識していこう！

## 「エンジニアとデザイナーとの距離」安田学
https://www.slideshare.net/manabuyasuda1/ss-73215731?from_m_app=ios
TAMのマークアップエンジニアの人
デザイナーとエンジニアの距離感について
CSS設計って大変
コードを工夫するだけでは難しい
OOCSS的なCSS設計手法にもデメリットがある
- コードが複雑になる扱いが難しい
- 想定していない出材の追加や変更が増えると整合性がとれなくなることが多い

問題点は大きく二つ
エンジニア目線
- 抽象化でコードが複雑
- 共通化でコード同市が密結合になりやすい

デザイナー目線
- デザイナーがコードを理解しにくい
- エンジニアとの意思の疎通がとりにくい。

デザイナーとエンジニアの認識のずれが問題

CSSのベストプラクティスの一つに「意味のある名前にする」
デザインの意図やコンテキストをコードの名前に使う。
デザインの意図＝その見栄えにしている意図

どこをクリックしてほしいのかを考える
そのボタンをなぜ目立たせるのか
ページの優先度によって書き換えている場合があるので

コンテキスト　前後の文脈や状況のこと
トップページにあるものなのか、詳細ページにあるものなのか。

見栄えが30分後に変わっていても、デザインの意図やコンテキストは基本的には変わらないはずである
「どんな場所でつかいますか？」
ちゃんと質問してコミュニケーションをとる

デザインに対する認識のずれをなくしていこう

EnduringCSS(ECSS)
コンテキストを重視している設計手法

ecss.ioをみろ！

コードぐりっと

.header
.contents
.footer
↓
.st-header
.st-contents
.st-footer
Structure＝全部のページで使えるんだな

この色はこういう時に使いますとか
フォントサイズは14px16pxで、15pxが出てきたときに
どういう使い分けをしているのかとか

メリット
- コードがシンプル
- デザインの変更に対応しやすい
- とか

デメリット
- デザインの共通化が必要になる
- コードをうまく共通化しないと
色んなページでHTMLの変更をしなくちゃいけないとか

コミュニケーションコストの話

エンジニアからデザインカンプの疑問を聞いていく

デザインカンプを作る前にエンジニア側から伝えておく

分業は悪くないけどコミュニケーションをうまく取れないことが多い