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

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

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

design programming event

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

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

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

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

みんなとケンカしないCSS

GOUTEN

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

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

悟りをひらこう

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

かんそう

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

cssfriends.connpass.com

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

マネーフォワードさんでお世話になりました

intern

この春休み3月いっぱい、田町にある マネーフォワード さんでお世話になりました。

マネーフォワードさんについて

オレンジ : toC の

moneyforward.com

とか

青 : toB の

biz.moneyforward.com

とか（青は 6 種類ぐらいある）を運営しているところです。

社員さんの数は数えられなかったんですが 200 人は超えてると聞いた気がします、今まででお世話になったところではダントツに多いです。私の居た 1 ヶ月の間にもどんどん人が増えていました。

高専OBの方もちらほらいて、Slackに #kosen チャンネルが立っていました。学閥だ…

どんなことをしたの

今までだいたいバックエンドで Rails を書くインターンをしていて、もうちょっとフロント側もやってみたいな〜と思ったので、フロント側をやっていました。 React でした。

biz.moneyforward.com

biz.moneyforward.com

最初にテストを書きたいと希望を出していたのでテストをよく書きました。青いシリーズの「MFクラウド 経費」と「MFクラウド ファイナンス」を触っていました。前者ではUIに関する機能追加をしたりテストを書いたり、後者でもテストを書いてカバレッジをちょっとだけ上げました。

勉強したこと

  • 普段ひとりで書いていると設計に 自信がないまま/適当なまま 突き進んでしまって後でつらみを見たりすることが(私は)よくあるのですが、業務だとそんな怖いことできないのでこまめに聞きながら進めることができた
  • テスト書くのに慣れてきた
  • テストだいじ
  • 人数が増えて物理的な距離が離れると軽いやりとりに抵抗が生まれやすい(気がする)
    • オフィスの端と端とか、別の階とか、あるいは別の建物とか
    • 「わざわざ話すことでもないかな？」とか思っちゃう(かもしれない)
  • 慣れない、会計用語
  • デザイナーさんがフロントのコードを触れたらすごい助かるけど実際そう簡単にはいかない話とか

終わってみて

フロント中心のインターンは初めてだったのもあって全体的に動きが遅かった気がします…後から振り返るともっとスピード感持ってできたんじゃないのかなーとか、変なところで悩みすぎてたなーとか。後半は慣れてきてスピード上げてできたので良かったです。

あとこれはインターン期間が 1 ヶ月しかないのが + インターンという立場が原因の一つなんですが、どんなユーザーさんがどんな風にこの機能を使っているかとかサービスのことをもっと詳しく知ったりできたら「コードを書いている」から「サービスを作っている」って気持ちになりやすいのかなぁ、と（日本語がない）（その点デザイナーさんは強そう）（期間短いしある程度仕方ない感じする）

作法を分かってなくて滅茶苦茶書いたりしましたが丁寧に教えてくださった社員のみなさん、ありがとうございました :pray:

これから

8月半ばから9月末まで夏休みなのですが、ひとつ気になっている企業さんがあるのでその夏インターンの様子を窺いながら、それを差し引いた残りの夏休みをどう過ごそうか考えています。このままいくとあと 2 年で高専を卒業してしまうので、それまでにどこかでデザイナーインターンをしてみたいなとぼんやり思っています。

スキルを落ち着けろという話もあって、 Rails も React も趣味レベルでなんとか書けても胸を張って書けるとは言い切れないところがあるので、もうちょっと踏ん張るという選択肢もあります。

春休みの間に 1 回インタビューを受けたのですが（そのうち記事が出ると思う）、将来何がやりたいのという問いにやっぱり「その時やりたいことができれば…いいかなぁ…」とぼんやりした答えしか出せませんでした。これが自分でも悔しかったので、ほんとにその時やりたいことができるだけの幅広い基礎力をまずつけるか、何かひとつ自信持ってできることをつくるか、どっちかやっていきます。

おまけ

recruit.moneyforward.com

採用ページめっちゃかっこよくないですか

休学の予定と春休みの予定

休学

トビタテ！留学JAPAN という文科省のプロジェクトの6期メンバーに採用されました。うちの学校からは初めてなんですよ。どやぁ。

www.tobitate.mext.go.jp

ただビザや受け入れ先候補企業さんの関係で本当に行けるかはちょっとまだ未定です。一次審査、二次審査の話は長くなるのでまとめて別の記事にします。

もし行けることになったら6月から翌年3月までアメリカにいる、ということで先に休学届を出してきました。後輩の皆さん再来年度からよろしくね。行けんかったら…どうするんやろなぁ。

https://twitter.com/yamasy1549/status/834603233163124737

春休み

電磁気という超絶苦手な科目も追試を回避し、このまま事故らなければ4年生に進級できます :tada:

3月末まで東京にいます。今日も米の上に魚が乗ってる神の食べ物を食べさせてもらいました。めっちゃうれしい。

さて今日から家計簿サービスやってはるオレンジの会社で、オレンジじゃない方のコードを書くインターンをさせてもらってます。マンスリーマンションを提供してもらってるのですが（手厚い）、調理器具とかは揃ってなかったです。お料理したいなぁ。お料理したいなぁ…

卵焼き器とかもらえるとめっちゃよろこびます。

www.amazon.co.jp