# 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