性別のもやもや
リアルで初めて会う人に「ずっと男性だと思ってました！」とか、知ってる人でも「なんで一人称ぼくになったりするん？」とか、時々聞かれるのでいまの考えをメモ。
女の子が苦手だった
女の子のひとがいたらごめんなさい…今はわりとマシです。
幼稚園ぐらいからちょっと苦手だった。陰口や悪口をよく言う人がダメなんだけど、そういう人がたまたま女の子に多かったので、自然と女の子を避けるようになった。
小学生ぐらいになると知能がついてくるのでもっとダメになって、比較的さばさばした女の子と仲良くするか、男の子とつるんでいた。 ほんとうは性別なんて関係ないんだけど当時は「女の子は陰口や悪口をよく言うからダメ」と信じ込んでいて、坊主憎けりゃ袈裟まで憎いでピンク色とかひらひらした服とかを嫌っていた。同時になんで自分は女に生まれたんだろう、ともやもやしていた。
仲良くなるには流される
中学に上がってからは基本的に男の子とつるんでいた。髪の毛長いし見た目が女っぽいので、なんで女の子と群れないのかって最初はびっくりされたけど、口調や態度を彼らに合わせていたら自然と仲良くなれた(ほんまか)。具体的には、声を低くして動作を少し雑にして猫背になって一人称をおれやぼくにしていた。
その延長でいまも一人称は基本的にぼく、「なんでぼくなん？」ってざわざわされそうなときはわたし、と使い分けることにしている。
されたことのある質問
ところで女の子なんですか、男の子なんですか
身体は女っぽいけどこころがそれを許したくないタイプです
自分が女だと思いたくないんですが、女の裏は男ではないので男でもありません。聞かれた時はどっちかわかんないなぁと答えています
見た目を男っぽくしようとは思わなかったんですか
身長が足りないからなにやっても無駄と思って諦めた
トイレ入るとき迷うことはあるの
ゆっくり考えてると洪水警報なので思考停止で女子トイレ
他、アンケートとかで性別が 2 択のときは悩み始めると終わらないので思考停止で女
好きになるのは女の子？ 男の子？
どっちも
生きづらくない？
「ｴｪｯ! ｵﾝﾅﾉｺｼﾞｬﾅｲﾉ!? ﾅﾝﾃﾞ!?」「ボクっ子なん…」とか言われたときは生きづらいけど基本的に生きづらくはない、生きづらくならないように一人称は使い分けてる
自分は女の子じゃないなぁと思った時に行き先が男の子しかなかったので、今のぼくみたいなどっちかわかんないひとがもうちょっと増えたらラクかなぁと思っています。
あと、性別関係なく生きたいなぁと思ってる自分が性別に縛られた考えをしている気がしてそれももやもやします。
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の歴史から設計について、それから便利ツールの紹介まで幅広いトピックがあり、自分も書きはじめの頃にこんな話を聞きたかったなぁと思っています。
マネーフォワードさんでお世話になりました
この春休み3月いっぱい、田町にある マネーフォワード さんでお世話になりました。
マネーフォワードさんについて
オレンジ : toC の
とか
青 : toB の
とか（青は 6 種類ぐらいある）を運営しているところです。
社員さんの数は数えられなかったんですが 200 人は超えてると聞いた気がします、今まででお世話になったところではダントツに多いです。私の居た 1 ヶ月の間にもどんどん人が増えていました。
高専OBの方もちらほらいて、Slackに #kosen チャンネルが立っていました。学閥だ…
どんなことをしたの
今までだいたいバックエンドで Rails を書くインターンをしていて、もうちょっとフロント側もやってみたいな〜と思ったので、フロント側をやっていました。 React でした。
最初にテストを書きたいと希望を出していたのでテストをよく書きました。青いシリーズの「MFクラウド 経費」と「MFクラウド ファイナンス」を触っていました。前者ではUIに関する機能追加をしたりテストを書いたり、後者でもテストを書いてカバレッジをちょっとだけ上げました。
勉強したこと
- 普段ひとりで書いていると設計に 自信がないまま/適当なまま 突き進んでしまって後でつらみを見たりすることが(私は)よくあるのですが、業務だとそんな怖いことできないのでこまめに聞きながら進めることができた
- テスト書くのに慣れてきた
- テストだいじ
- 人数が増えて物理的な距離が離れると軽いやりとりに抵抗が生まれやすい(気がする)
- オフィスの端と端とか、別の階とか、あるいは別の建物とか
- 「わざわざ話すことでもないかな？」とか思っちゃう(かもしれない)
- 慣れない、会計用語
- デザイナーさんがフロントのコードを触れたらすごい助かるけど実際そう簡単にはいかない話とか
終わってみて
フロント中心のインターンは初めてだったのもあって全体的に動きが遅かった気がします…後から振り返るともっとスピード感持ってできたんじゃないのかなーとか、変なところで悩みすぎてたなーとか。後半は慣れてきてスピード上げてできたので良かったです。
あとこれはインターン期間が 1 ヶ月しかないのが + インターンという立場が原因の一つなんですが、どんなユーザーさんがどんな風にこの機能を使っているかとかサービスのことをもっと詳しく知ったりできたら「コードを書いている」から「サービスを作っている」って気持ちになりやすいのかなぁ、と（日本語がない）（その点デザイナーさんは強そう）（期間短いしある程度仕方ない感じする）
作法を分かってなくて滅茶苦茶書いたりしましたが丁寧に教えてくださった社員のみなさん、ありがとうございました :pray:
これから
8月半ばから9月末まで夏休みなのですが、ひとつ気になっている企業さんがあるのでその夏インターンの様子を窺いながら、それを差し引いた残りの夏休みをどう過ごそうか考えています。このままいくとあと 2 年で高専を卒業してしまうので、それまでにどこかでデザイナーインターンをしてみたいなとぼんやり思っています。
スキルを落ち着けろという話もあって、 Rails も React も趣味レベルでなんとか書けても胸を張って書けるとは言い切れないところがあるので、もうちょっと踏ん張るという選択肢もあります。
春休みの間に 1 回インタビューを受けたのですが（そのうち記事が出ると思う）、将来何がやりたいのという問いにやっぱり「その時やりたいことができれば…いいかなぁ…」とぼんやりした答えしか出せませんでした。これが自分でも悔しかったので、ほんとにその時やりたいことができるだけの幅広い基礎力をまずつけるか、何かひとつ自信持ってできることをつくるか、どっちかやっていきます。
おまけ
採用ページめっちゃかっこよくないですか
