読者です 読者をやめる 読者になる 読者になる

ようじょのおえかきちょう

ふぇぇ お医者さんにペン持ったらダメっていわれた〜〜

CSSフレンズ 第一回「CSS再入門」に参加しました #cssfriends

ブログ書く枠で参加したのでメモをブログで公開します。発表スライドがあがったら追加したりします。

cssfriends.connpass.com

参加者同士の交流を目的とした、初心者向けの勉強会です。

CSSフレンズは、職場でついつい確認しないまま仕事を進めてしまうCSSの基礎をおさらいしながら、同じレベルで学び合える友だちをつくる集まりです。

募集中は2回増席されるぐらい人気だったみたいです。すっごーい!

CSS再入門。CSSはなぜCSSなのか

榊原昌彦

Cascading とは

  • CSSがなかった時代はデザインを変えるために文章構造をいじったりしていた。
  • もし Cascading がなかったら、共通部分の使い回しができない
  • Cascading で優先順序付けができるようになったので、 .btn をベースに .btn.blue とかができるようになった
  • 詳しい Cascading の順序はここに書いてあるよ CSS Cascading and Inheritance Level 3

  1. 記述順
    • 後に書いたスタイルが前に書いたスタイルを上書きする
  2. 詳細度
    • id / class とか使うと優先順位が高くなるよ
    • 詳しくはここに Selectors Level 3
  3. !important
    • 強制的に詳細度を底上げしてくれる
    • 詳細度の管理ができなくなっていくので、使わないほうがいい。つらい。
  4. inline
    • <font> とか書いてた頃と一緒じゃねーか!

チームでCSSを書く時のより良い方法を探そう

  • 命名規則には気をつけよう!
  • 脱コピペ!
  • ファイルの分け方を考えよう!
  • …みたいな話を懇親会でやろう!

脱初心者!コピペに頼らないCSS入門

シマキョウスケ

脱初心者!コピペに頼らないCSS入門 | 第一回「CSS再入門」 | CSSフレンズ | シマキョウスケ

Emmetすっごーい!

  • bg と入力して Tab or Ctrl+E を押すと background と入力される
  • bgc (background-color) とか m:a (margin: auto) とかたくさんある
  • Emmet Cheat Sheet を見よう

CSSアニメーション

ちげ

docs.com

CSSでアニメーションをやる

  • アニメーションとは時間軸のある変化。CSSの記述に時間軸が加わる
  • A→B
    • よく疑似要素を使ったりする
      • :hover : ボタンにカーソル載せたら色変わるとか
    • transition を使うよ
  • A←→B
    • keyframesをつかう

映像について

映像の原則 改訂版 (キネマ旬報ムック)

映像の原則 改訂版 (キネマ旬報ムック)

  • 「映像の原則」
    • 映像作品における視覚的にわかりやすく納得のいくものを制作するための原則的な考え方
  • 見ている人を時間で縛ってしまう
  • 時間と距離に気をつけよう!
    • 遅すぎると見ている人の時間を奪ったり、速すぎるとわからなかったりする
    • 動きがあると、動きに無駄があることに気づきやすい
  • 止め絵の目安は3秒
    • ロード時間はこれを超えると厳しい
    • スクロールを始めるまでの時間も3秒
  • 上手・下手
    • 右はポジティブで大きい、目立つイメージ
    • 左はネガティブで小さい、弱いイメージ
  • 動き
    • 左→右は勢いがある印象
    • 右→左は落ち着いた印象

CSSのidとclassの使い分け

Daisuke KONISHI

speakerdeck.com

結論

  • 基本classだけでOK
    • 使い回しがしやすい
    • id はページで1つしか使えない

わかりやすい名前をつけよう

  • .box1.box2 が無くなったら死ぬで
  • .topContentHeaderLink → ちょっと長すぎ。 .link-more とか
  • .header h1 より .header .title

セレクタを少なくするには

みんなとケンカしないCSS

GOUTEN

あなたの身の回りのCSSトラブル

  • !import 地獄
  • 思ったように動かない
  • ページまたぎで同じスタイルがあるのに固有のCSSファイルに書いてる
  • ネスト深すぎ(階層が深い)
  • デザインリニューアルで変更箇所多すぎて死ぬ

悟りをひらこう

  • けんかさせないCSSを書こう
  • CSSは設計8割、実装2割
  • 役割を持つCSSを書く
  • やさしいせかい
  • つづきは涅槃(こんしんかい)へ


かんそう

書きはじめの頃によく思う「CSSの書きかたは分かった! でもどんなところに気をつけて書いたらいいの?」に対するヒントがいっぱいありました。CSSの歴史から設計について、それから便利ツールの紹介まで幅広いトピックがあり、自分も書きはじめの頃にこんな話を聞きたかったなぁと思っています。

cssfriends.connpass.com

CSSつらいってよく聞くんですが、今度は「つらくならないCSS」をテーマにお話が聞けるみたいです。