# CSSフレンズ（メモ）

###### tags: `CSS`

### 開場＆受付 14:45 - 15:00
inサイボウズ大阪オフィス
yamasyがいる　わらう

### 会場説明＆CSSフレンズとは 15:00 - 15:15
目的はCSSやってる人たちの友達作り
来年も再入門からやり直すので、このコミュニティは成長しないらしい

#### 10分でわかるサイボウズ
開発しているサービス
スマホアプリcybozu Live
kintone
Googleフォーム＋スプレッドシートのすごいやつ
動画きた
ワークスタイルが話題らしい
開発チームが場所に左右されない
テレビ会議できるよ
オフィスがきれいだなぁ

### CSS再入門。CSSはなぜCSSなのか 15:15 - 15:45
発表者：榊原昌彦

仕事で「必要」っていわれて何となく書いてるけど、CSSってそもそもどういうものだっけという方向けの再入門セミナー。CSSがなぜ生まれたのか、から、CSSはなぜ辛くなるのか、というところまで丁寧に抑えます。

スマホアプリ作る人
CSS誕生話
すべてHTMLで書く時代
1行100ファイル～間違い探し
「CSS楽な技術だ！」

カスケーディング　優先順序をつけて
スタイル　styleを指定する言語である
シート

記述順
- 後に書いたら前のスタイルを上書きするよ。
詳細度
- 詳しく書いた方（後に書いたとしても、クラス名をより詳しく書いたほう）がスタイルが優先される。
!important
- これを使うとなにがなんでも上書きされない
- 使ったら後々後悔するやつ
結果、いろいろ

inline
-html内に書いたらそっちが優先される。

カスケーディングを覚えると意外と便利
共通する部分だけ大きなクラスで当てておいて
異なる部分だけをほかのクラスで当てる

でも、書きにくいCSS

CSSのより良い書き方探し
チームでのCSSの書き方

- コピペだとコピペもとによってCSSの命名規則が違う
- 脱コピペ
- どうやってid/class名をつける（命名規則）
- CSSのファイルはどうやって管理する？
- みんなどうやってCSS書いてるの？

### 脱初心者！コピペに頼らないCSS入門 15:45 - 16:00
発表者：シマキョウスケ

CSS のプロパティを簡単に記述できる Emmet の簡単な使い方を紹介します。これを業務で使えるようになると、今の仕事が倍速で終わるかも！

デザイン制作会社のひと

CSSのプロパティ数
はっきりわかんなかった

覚えられる気がしない

プロパティ名の入力を補助しタイピング数をすくなくする
Emmet

もともとはZen-Coding

bg
bgc
bg+
m10-20
p
po
w
h

Emmet CSS チートシート
エディタにプラグイン入れような

はやーいすごーい

### 休憩 16:00 - 16:15

### 公募登壇枠 16:15 - 16:30
つらい

### CSSのidとclassの使い分け 16:30 - 16:45
発表者：Daisuke KONISHI

HTML/CSSを書く時にidとclassのどちらを書く使うのが良いのか話します。

javascriptはidでやろう

### みんなとケンカしないCSS 16:45 - 17:00
発表者：GOUTEN

CSSに関する言い合いになったことはありますか？
このセッションではCSSで実際に論争になった事例を踏まえてお話しする予定です。
人員構成に沿ったCSSの書き方や構成 について話せたらいいのに。

設計思想の話

ページまたぎで同じスタイルがあるのに
固有のCSSファイルに書いている

一部を変更したいのに、ネストが深いので変更が手間
ネストが深い（階層が深い）
大幅なデザイン変更で変更箇所多すぎ問題

設計8割
実装2割

CSS設計のための教科書

設計しやすい
再利用しやすい
わかりやすい

階層が深いのではなく、こういうの↓

.btn {
}
.btn_submit {
}

### おやつ交流会 17:00 - 17:30