CSSフレンズ 第一回「CSS再入門」に参加しました #cssfriends
ブログ書く枠で参加したのでメモをブログで公開します。発表スライドがあがったら追加したりします。
参加者同士の交流を目的とした、初心者向けの勉強会です。
CSSフレンズは、職場でついつい確認しないまま仕事を進めてしまうCSSの基礎をおさらいしながら、同じレベルで学び合える友だちをつくる集まりです。
募集中は2回増席されるぐらい人気だったみたいです。すっごーい！
CSS再入門。CSSはなぜCSSなのか
Cascading とは
- CSSがなかった時代はデザインを変えるために文章構造をいじったりしていた。
- もし Cascading がなかったら、共通部分の使い回しができない
- Cascading で優先順序付けができるようになったので、
.btnをベースに.btn.blueとかができるようになった - 詳しい Cascading の順序はここに書いてあるよ CSS Cascading and Inheritance Level 3
「HTMLだけの世界がかつてありました…100ファイルに一行ずつ修正、みたいなことがあれば100行修正しなきゃいけないわけです」 #cssfriends #cybozutech
— みうら かずひと (@kazuhito_m) 2017年4月16日
「CSSめんどくせ…」ってなってるかもしれないけれど、これが出てきたのは必然で、めちゃ画期的に楽になったんだよ、という経緯の話。 #cssfriends #cybozutech
— みうら かずひと (@kazuhito_m) 2017年4月16日
- 記述順
- 後に書いたスタイルが前に書いたスタイルを上書きする
- 詳細度
- id / class とか使うと優先順位が高くなるよ
- 詳しくはここに Selectors Level 3
- !important
- 強制的に詳細度を底上げしてくれる
- 詳細度の管理ができなくなっていくので、使わないほうがいい。つらい。
- inline
<font>とか書いてた頃と一緒じゃねーか！
!important「使ったら後々後悔するやつ」 #cssfriends #cybozutech
— もりてつ＠低音魂 (@m_n_t_p) 2017年4月16日
チームでCSSを書く時のより良い方法を探そう
- 命名規則には気をつけよう！
- 脱コピペ！
- ファイルの分け方を考えよう！
- …みたいな話を懇親会でやろう！
脱初心者！コピペに頼らないCSS入門
脱初心者！コピペに頼らないCSS入門 | 第一回「CSS再入門」 | CSSフレンズ | シマキョウスケ
Emmetすっごーい！
bgと入力してTaborCtrl+Eを押すとbackgroundと入力されるbgc(background-color) とかm:a(margin: auto) とかたくさんある- Emmet Cheat Sheet を見よう
ul>li*5 これよくやる。 #cssfriends #cybozutech
— やましー (@yamasy1549) 2017年4月16日
CSSアニメーション
CSSでアニメーションをやる
- アニメーションとは時間軸のある変化。CSSの記述に時間軸が加わる
- A→B
- よく疑似要素を使ったりする
:hover: ボタンにカーソル載せたら色変わるとか
- transition を使うよ
- よく疑似要素を使ったりする
- A←→B
- keyframesをつかう
CSSのアニメーションの魅力は軽いこと。JSだと、ブラウザの処理を常に意識しないとブラウザに負担をかけるアニメーションになりがち。#cssfriends #cybozutech
— 榊原昌彦 (@rdlabo) 2017年4月16日
映像について
- 作者: 富野由悠季
- 出版社/メーカー: キネマ旬報社
- 発売日: 2011/08/29
- メディア: 単行本（ソフトカバー）
- 購入: 15人 クリック: 98回
- この商品を含むブログ (72件) を見る
- 「映像の原則」
- 映像作品における視覚的にわかりやすく納得のいくものを制作するための原則的な考え方
- 見ている人を時間で縛ってしまう
- 時間と距離に気をつけよう！
- 遅すぎると見ている人の時間を奪ったり、速すぎるとわからなかったりする
- 動きがあると、動きに無駄があることに気づきやすい
- 止め絵の目安は3秒
- ロード時間はこれを超えると厳しい
- スクロールを始めるまでの時間も3秒
- 上手・下手
- 右はポジティブで大きい、目立つイメージ
- 左はネガティブで小さい、弱いイメージ
- 動き
- 左→右は勢いがある印象
- 右→左は落ち着いた印象
映像の世界にも上手・下手ってあるんだ...#cssfriends #cybozutech
— kazumikuroda (@mizukadaroku) 2017年4月16日
CSSのidとclassの使い分け
結論
- 基本classだけでOK
- 使い回しがしやすい
- id はページで1つしか使えない
わかりやすい名前をつけよう
.box1→.box2が無くなったら死ぬで.topContentHeaderLink→ ちょっと長すぎ。.link-moreとか.header h1より.header .title
エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 https://t.co/KFP2rtFuuG #cssfriends #cybozutech
— やましー (@yamasy1549) 2017年4月16日
セレクタを少なくするには
- 設計を勉強する
- OOCSS, FLOCSS
- Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- Bootstrap を読む
- 命名規則で戦う
- BEM
- idを使うのは、ページ内遷移の目印やJSで動かすときだけに絞ろう
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (4件) を見る
みんなとケンカしないCSS
あなたの身の回りのCSSトラブル
!import地獄- 思ったように動かない
- ページまたぎで同じスタイルがあるのに固有のCSSファイルに書いてる
- ネスト深すぎ（階層が深い）
- デザインリニューアルで変更箇所多すぎて死ぬ
プログラムは思った通りには動かない。書いた通りに動く。 #cssfriends #cybozutech
— もりてつ＠低音魂 (@m_n_t_p) 2017年4月16日
悟りをひらこう
うーん、CSSに関しての「構造化設計」「差異分析」「責務分割」「共通化」の脳みそかな？ #そんな浅い話でもなさそうだけれど #cssfriends #cybozutech
— みうら かずひと (@kazuhito_m) 2017年4月16日
かんそう
書きはじめの頃によく思う「CSSの書きかたは分かった！ でもどんなところに気をつけて書いたらいいの？」に対するヒントがいっぱいありました。CSSの歴史から設計について、それから便利ツールの紹介まで幅広いトピックがあり、自分も書きはじめの頃にこんな話を聞きたかったなぁと思っています。
