Skip to content

2016.01.09 CSS study for Rubyists

Jump to bottom Edit New page
Aki edited this page Jan 19, 2016 · 36 revisions

概要

サンプルプロジェクト

スライド（公開版）

資料等

Togetter

写真

参加レポートを書く際に利用してください。

Ruby Quiz大会

順位

各自の感想など

荻

今日の勉強会で新しく学んだこと

  • app/stylesheetsで階層化してファイルを管理すること
  • reset.css/normalize.css/sanitize.cssでブラウザや機種依存のスタイルを消せること
  • BEMの概要を理解できたこと（本を読んだときは頭に入っていなかった）
  • display:table,display:table-cellでテーブルを作れること
  • position:fixedでスクロールしても表示位置を固定できること
  • position:absoluteとposition:relativeの関係（absoluteの基準をrelativeで決める）
  • z-indexで重なったオブジェクトの表示順を制御できること
  • emとremの基準となるfont
  • display:flexのメリット
  • line-heightを使うと簡単に上下中央に表示できること
  • left:0px,right:0pxで左右の領域を親の領域に広げられること(top,bottomは上下）
  • borderをつかって三角形を作る方法
  • sassの良さを知ったこと（予習の分）
  • box-sizing:border-boxでpaddingとborderを幅と高さに含める
  • 擬似要素の意味（::before/::after）

良かった点、面白かった点

  • 全体的に知らないことが多く、吸収することが多くあったこと
  • 町田さんの説明がとてもわかりやすかったこと
  • 4拠点でのコラボの実現
  • デザイナーさんの考え方/意識に触れることができたこと
  • デザイナーさんとつながりが持てたこと
  • Nilquebeさんの広々とした環境のおかげで勉強会に集中できたこと

不満だった点、改善できそうな点

  • 全く知識のない課題をこなすときより、tipsの説明を受けて、そのtipsを使って自分で作業する流れの方が理解しやすかったと思います。 　（キーワードを探すところから始まるので時間がかかってしまいました）
  • Toyama.rbの人たちがその日どんなことをやっていたのか少し紹介してもらえると良かったと思います。
  • 夕方にかけて暗くなると、スクリーンの字が見難くなったので、各テーブルで1台モニターに繋いでも良かったかもしれません。

その他感想等

  • 勉強会が終わって、以前購入していた書籍「CSSスタンダード・デザインガイド」を見てみると、理解しやすくなっていました。もう一度読みなおして理解を定着させたいと思います。

machida

今日の勉強会で新しく学んだこと

  • リモートで発表をする際に発生する問題
  • flexboxを使うと、今まで溜め込んできたバッドノウハウがゴミになってしまう
  • コンポーネントベースでデザインを考えるためにエンジニアがデザインにどうやって説明したらいいかの方法
  • マークアップのルールとか、考え方を説明するのって難しい
  • やっぱり人に説明すると、自分の中で曖昧だったことが明確になる

良かった点、面白かった点

  • 皆さんが僕の拙い説明にちゃんと付き合ってくれた
  • 割と新しさより、リアルで実用的な課題に絞ったんだけど、それはそれでよかった
  • 西脇.rb & 神戸.rb の皆さんと関わりが持てた
  • 途中の Toyama.rb とリモートToyama.rb と繋いだの楽しかったです。他の勉強会とリモートで繋ぐのがもっと流行るといいなーと思いました。

不満だった点、改善できそうな点

  • flexboxの説明を思いっきり省いたので、それを入れたほうがよかったかも
  • 自分の中でも曖昧なものが結構あった（なので説明がグダグダになってしまった）
  • 自分のRuby力不足（Ruby Quiz大会 最下位）
  • 何回か接続が切れた（フィヨルドオフィスの回線に問題あり？）

その他感想等

  • 皆さん意欲的で、学ぶこと自体を楽しんでいて、とてもいい雰囲気のあるコミュニティだと思いました。西脇.rb & 神戸.rb の皆さんと関わりが持ててとても嬉しいです。また機会がありましたら是非呼んでください！

参加レポート

  • 書かなくては！

原

今日の勉強会で新しく学んだこと

  • コンポーネントと言う考え方
  • htmlを書く時にブロックをどう作るか悩んでいたが、そうした指針となる考え方
  • 遠隔ミーティングでの記念撮影方法
  • エンジニアがコーダーにする質問のテンプレートは似ていると言うこと

良かった点、面白かった点

  • 課題が明確だったのでハンズオンが非常にやりやすかった。
  • 課題後のライブコーディングでなるほどと言う事が多く、課題解決の助けになる情報が多かった。
  • flexboxfroggyなど参考になる情報を多く聞くことが出来た。

不満だった点、改善できそうな点

  • 特になし

その他感想等

  • 非常に役に立ちましたありがとうございます。 構成も分かりやすく、特に考え方を丁寧に説明して頂けたので勉強する足がかりになりました。 僕のクライアントの環境がIE8がまだしばらく生き続けるそうなので"can i use"を利用させていただこうと思います。 今回の講義からは外れますがそうしたクロスブラウザ対応などについても、機会があれば教えて頂けれありがたいです。

たかえすゆうじ

今日の勉強会で新しく学んだこと

  • Atomic Design の考え方
  • display: table と display: flex
  • CSSでのコンポーネント思考な考え方

良かった点、面白かった点

  • Railsを利用した手法だったので入りやすかった。
  • 意図を持ったディレクトリ構成にしている部分がプログラムの設計と似ていて納得できる部分が多かった。
  • コンポーネント単位で設計するというのがオブジェクト指向っぽい。
  • BEMという概念だけは聞いていたが実際に実践してみると、CSSのセレクタ名を見るだけである程度コンポーネントが予測できるので分かりやすいと思った。
  • 途中のRubyクイズも息抜きになって、良かった。

不満だった点、改善できそうな点

  • ビルドシステムなどはnodeを使ったものが現在は主流ということだったので次のステップとしてその点をベースにしたものがあってもいいと思った。
  • 今のところどうしようも余り無いと思いますが、画面をリロードするときのsporocketsでのビルドに時間がかかっている場合があった。

その他感想、町田さんやニルキューブさんへのフィードバック等

  • 改めてHTMLとCSSの設計は難しいと感じた。Webアプリを作るときの片手間では限界があるので今回のような学習が出来るととても有用だと感じた。
  • 本を学習するだけだと理解しずらい設計する際の考え方や意図が聞けたのはよかった。

伊藤淳一

今日の勉強会で新しく学んだこと

  • flexbox、reset.css系のあれこれ、table/table-cell、line-heightで中央寄せ、CSSで吹き出し、他たくさん！！

良かった点、面白かった点

  • 実践的な内容だった。（確かによく遭遇するパターンがほとんどだった）
  • 町田さんがCSSを編集しながら教えてくれるのでCSSの役割が理解しやすかった。
  • リモートでもなんとかなった。
  • Rubyクイズ大会もいい感じに盛り上がった（優勝しちゃったけど）。
  • やましーさんの実況ツイートがいい議事録代わりになった。（Thanks, やましー!）

不満だった点、改善できそうな点

  • まあまあうまくいったとはいえど、リモート勉強会はまだまだ改善の余地がありそう。
  • 司会者だったので、リアルタイムに課題が解けなかった。（でもそれほど気にしてないし、帰ってから自分で解いたので問題ない）
  • 西脇.rb＆神戸.rb初の無断欠席者が発生した。（でもある程度予想が付いていて、前日に定員を増やしたので結果的には問題なし）
  • いつも以上にキャンセル待ちが多くて、ちょっと申し訳ない気持ちになった。
  • レスポンシブ対応の基礎、みたいな課題もあると、より役立つかもしれない。

その他感想等

  • まさかこんなにハイクオリティな講義をやってもらえるとは思わなかった。準備にもかなり時間がかかってそう。町田さんに感謝です！！
  • ニルキューブさんもいつもお弁当買ってきてもらったりして、大変助かってます。今の勉強会の規模だと会場としてピッタリです。
  • リモート勉強会の個人的なふりかえりはこちらにまとめました => リモート勉強会ふりかえり

参加レポート

田中義人

今日の勉強会で新しく学んだこと

  • ブラウザの差異をなくすためにresetというものがある
  • マークアップにもいろんな考え方があること
  • レールがまだ確立されていない
  • xray-railsというgemを知った
  • flexboxというのを初めて知りました。
  • stylesheetフォルダの中に階層を作るということ
  • 他の人の作ったCSSを解読する方法
    • chromeを使って要素を消してみてどう変わるかを見てみるなど。
  • デザインを作る上での考え方
    • 極端な例をいくつか作ってみて考えるなど

良かった点、面白かった点

  • デザインをする上でどういう思考が行われているかが聞けたのがものすごく参考になりました。
  • あとで復習もできるようになっていて、コンテンツとして素晴らしいと思います。

不満だった点、改善できそうな点

  • ハンズオン課題にあたって、経験が全くない状態の人だととっかかりにくいかもしれません。
    • 事前課題として例えば「positon: absolutとrelativeの違いを調べておいてください」 というの出すとかはどうでしょうか(課題で使いそうな項目を予め頭にいれておいてもらうのが目的です)
  • Rubyクイズにあんまりついていけなかった。(体調不良だったからと思いたい) Rubyの知識をもっと増やしたいと思った。

その他感想等

  • 町田さん、ありがとうございました。 この話を聞きたい人はたくさんいると思います。
  • 伊藤さん、Akiさん、山本さん、準備運営ありがとうございます。
  • CSSは奥が深い、と感じました。
  • 一台のマシンでリモート接続する時は、USBカメラ、会議用スピーカー、マイクがあるほうがいいかも。(持っている人がいればですが)
  • 体調良くなかったけど頑張って参加してよかったです。(他の人にうつしていないか心配)

参加レポート

あとで書くつもりです。

なかにしゆう

今日の勉強会で新しく学んだこと

  • position プロパティの使い方
  • overflow: hidden で子に float の指定のある親を下までおろせるということ
  • display: table, display: flex の存在とそれを使った段組レイアウトの手法
  • HAMLでは改行が入り不要なスペースができるので、 font-size: 0 で回避する or <> をつけるHack
    • Slimではデフォルトで詰められるのでこういうのは起こらない

良かった点、面白かった点

  • 明日からすぐ使える知識が詰まった実践的カリキュラムだったこと
  • BEM などの命名規則はざっくりした概念の説明を読んだことはあったが、実際のサンプルコードを見てどう使われているのかが学べたこと
  • 「まずおおまかにこう書いてみて、調整していく」といった、デザイナーさんが実際にコーディングするときの流れが見れたこと

不満だった点、改善できそうな点

  • 接続トラブル、画面や音の調整などで合計30分くらいかかっていたように思えるので改善の余地がありそう

その他感想等

今まで参加した勉強会の中で最も有意義でした。有料でもよいぐらいだと思いました。講師、運営陣の方ありがとうございました。ぼくもコミュニティに恩返しできるよう尽力します。

たいら

今日の勉強会で新しく学んだこと

  • flexboxすごい
  • 縦の中央揃えの方法
  • Can I use便利そう
  • 領域を広げる方法と、大きい領域を被せる方法がある
  • ネガティブマージン

良かった点、面白かった点

  • 実際に手を動かしてみるのは楽しい
  • 4拠点つないでの勉強会すごい！
  • 吹き出しの作り方の強引さｗ

不満だった点、改善できそうな点

  • 自分がCSS書いていない時は気にならなかったけど、実際自分でCSS書くとsporocketsでコンパイルしている時間が少しストレスになるということがわかった。
  • ちょっと寒かった…

その他感想等

  • 町田さんありがとうございました！
  • 伊藤さん、Akiさんもいつもありがとうございます。

村瀬

今日の勉強会で新しく学んだこと

  • デザイナーの人たちがどのような思考を経てCSSを組んでいるか
  • たくさんのCSSの仕様（positionとかdisplay: flexとか）
  • CSSを組むときもプログラムと同じように構造化して書いていくことの重要性
  • BEMを始めとするマークアップという概念そのもの

良かった点、面白かった点

  • 町田さんの講義が非常に充実していて、座学とハンズオンで全体像と実践的な内容とバランスよく学べた
  • 実際に町田さんがCSSを編集しながらどのように表示が変わっていくかを見せていただいた点が非常にわかりやすかったです
  • Railsを利用していた点。gulpがどうのこうのという話になってくると、その時点でつまづいてしまうので
  • 西脇＆神戸.rbで初めての試みとしてリモート勉強会によって他の地域の勉強会ともつながることができた
  • Rubyクイズは良い息抜きになった

不満だった点、改善できそうな点

  • リモートについて
    • リモートで勉強会を行うためのツールは揃ってきているとはいえ、接続しづらかったり画面が表示しづらかったりまだ改善の余地が残っていると感じました
      • 現状のIT技術ではどうしても妥協するしかないのかもしれませんが、テレビ会議用のスピーカーとかがあるとよかったかもしれません。
    • Remottyの使い方に関して、個別のチャットルームを作るよりも共有したチャットルームが一つある方が良いと思いました。
      • 仕事とは違い全員が同じことをしているので、slackのように全員で一つのチャットルームを共有する方が自然かなと思いました。
  • ハンズオンについて
    • （上の田中さんの発言と同じです）受講者の経験値によっては「CSSのこの仕様について調べておいてください」という事前課題やヒントを出したりしていただくと良いかもしれません。実際に講習でヒントを出していただいたので途方にくれなくてすみました。

その他感想等

  • 非常に満足度の高い勉強会でした！講師の町田さん、準備をしていただいた伊藤さん、Akiさんありがとうございました。
  • 私は普段デザイナーさんと接する事がないので、デザイナーさんの考え方はとても新鮮でした。

弘野

今日の勉強会で新しく学んだこと

  • flexbox万歳!

良かった点、面白かった点

  • 本職デザイナーさんの管理や実装の考え方を知ることが出来て非常に参考になった。
  • 特に実装の各段階で考えることとその結果を見せていただけて非常に良かった。
  • Remotty/Appear.inを使った多拠点の勉強会も楽しかった。

不満だった点、改善できそうな点

  • 問題を見てfloatでは問題があるのが分かったのでぶっつけでflexboxを使ってみたけどやっぱり上手く扱えなかった。いい加減扱えるようにしておかないといけないかな。
  • 終盤VMの調子が悪く実装結果の確認が滞ることがあったので事前の確認をもう少ししておくべきだった。
  • 参加人数が1テーブルに収まらないとWebカメラでのリモート会議は辛かった。

その他感想等

  • 具体的な事例で手を動かしたあとに詳細な説明がされたので、分かりやすく非常に勉強になりました。講師の町田さんどうもありがとうございました。
  • 今回はCSSの実装がほとんどの作業になっていたけれど、HTMLのタグ付けやクラス付けの演習があっても良いと思いました。
  • 伊藤さんAkiさん、色々と初の試みの勉強会の準備をありがとうございました。

長谷川淳

今日の勉強会で新しく学んだこと

  • CSSの構造化と考え方
  • ブラウザの違いを吸収するresetがある
  • Atomic Designの考え方と取り入れ方

良かった点、面白かった点

  • 課題の解答説明が一つづつ考え方と対応方法，さらに実際の描画とセットになっていて，とてもわかりやすかった．

不満だった点、改善できそうな点

  • 参加できるのが決まったのが前日とはいえ，全く予習なく，しかもMac OSのアップデートの影響で,gemのインストールがうまくいかず，危うくハンズオンに参加できないところだった．．

その他感想等

  • 4拠点接続は新鮮だった．息抜きにもなったし，コミュニティ間の連携もいろいろ刺激になると思うので，とてもいい取り組みだと思いました．
  • ライブコーディングということで，yaslabさんがRailsチュートリアルで使われているScreenX TVが見やすいのではないかと思いました．
  • 課題の時間は知識不足で全然足りませんでしたが，町田さんの説明も早すぎず，ちょうどよくわかりやすかったです．
  • 繰り上がりで参加できて本当に良かったです．

Aki

今日の勉強会で新しく学んだこと

  • 知覚明度知らなかった !!
  • よく使うデフォルト設定は settings の中にまとめたりしているとか @@machida さんの実際のやり方とか聞けたので勉強になった
  • BEM
  • SMACSS
  • frexbox の使い方
  • Atomic Design http://bradfrost.com/blog/post/atomic-web-design/ - http://cssreset.com/ - http://flexboxfroggy.com/ で勉強する
  • reset系 の cssに normarize とか sanitize とか 種類があるとは知らなかった ! しかもそれぞれの思想を説明していただけてすごくわかりやすかった。

良かった点、面白かった点

  • @machida さんがすごく時間とパワーを使って準備をしてくれていたので、かなりわかりやすいワークショップになっていた。本当にありがとうございます !!

  • やましーがログ代わりにtweetしてくれてたので当日の状況がよくわかる。やましー thanks ! http://togetter.com/li/923416 にまとめておきました。

  • 第一線で活躍するデザイナーである町田さんに初歩的な事から教えていただけたのは貴重な経験だった。

  • 富山、東京、町田(さんw)、神戸と3 (4?) 拠点を繋げて同時になにかできたのは面白かった。.rb 増えてるねーっていうのと、勉強会への参加の仕方が変わりつつあって面白いですね。

  • メールでしかやり取りしたことない麦島さんのお顔を拝見できたw (去年の合宿行けなかったので…)

  • やっぱり Nilqueb はちょうどいいサイズだし綺麗で便利。お弁当の買い出しも手伝っていただいているので本当に感謝しております !!!

不満だった点、改善できそうな点

  • リモートで会話する時にはもうちょっといいやり方がありそうなのでなんか考える
  • @machida さんに会場の様子やリアクションが伝わりやすいように、会場を写すようのカメラを用意すればよかった
  • 不満とまではいかないけど、当日は運営に手一杯でみんなと一緒にワークする事はできなかった。後から追いつく !

その他感想等

  • 富山拠点を繋いだのはいいけど、なにやってるかよくわからなかったので、色々お話聞けばよかった。
  • 今度は町田さんと直接お会いしたいなーと思いました。次に会えるのは RubyKaigi 2016 かなー。

やましー

今日の勉強会で新しく学んだこと

  • flexboxを初めて使った。つよい！！
  • 「知覚明度」という言葉を初めて知った
  • reset系CSS3種類の違いについて
    • sanitize.css よさそう
  • Atomic Design について
    • 今までなんとなく無意識に「Atomsっぽいもの」「Organismsっぽいもの」を作ってはいたけれど、段階をふむということをハッキリ意識していたわけではなかった
    • 色々なところで使い回しが効きそうでとてもよい 😄
  • floatとpositionをちゃんとわかってないことがわかった
  • flexのwrapとかもろもろわかってないことがわかった

良かった点、面白かった点

  • reset系CSS3種類の違いの説明（一旦顔のパーツを外す など）がとてもわかりやすかったです 👍
  • 町田さん風のBEMの書きかたを知れて参考になった
  • 画像で完成形が与えられて、それをSassだけで書く…というのは実際のフローに似ている感じがして良いと思った
  • ハンズオンの内容がどれもよく使いそうなものに絞られていてためになった！
  • コードがGitHubにあげられているので、いつでも復習できるのがすごくうれしいです 😍

不満だった点、改善できそうな点

  • 王道的なやり方を知らないと時間内に解くのは難しそう
    • たとえば position, flex について予習しておくといいですよーみたいなことがあればもうちょっとスムーズにいくかもしれない
    • そうすれば「この使い方どうだったっけ？」となったときも比較的速く調べられるかなぁと思った
  • スクリーンが少し見にくいときがあった（ライブコーディングの時など）。手元でも見たい
  • sprockets のコンパイル時間がちょっと気になった。livereloadもしたい

その他感想等

  • 町田さん、ありがとうございました！ぜひたくさんのエンジニアの人にこのお話を聞いてもらいたいです。
  • 準備をしていただいた伊藤さん、Akiさん、Nilquebeの山本さん、ありがとうございました！Nilquebeいつもきれい ✨

参加レポート

↓以下テンプレ（コピーして使って下さい）

名前

今日の勉強会で新しく学んだこと

  • 何か書く

良かった点、面白かった点

  • 何か書く

不満だった点、改善できそうな点

  • 何か書く（イベントに対して、または自分に対して）

その他感想等

  • (町田さんやニルキューブさんへのフィードバック、リモート勉強会について、などなど、思ったことを何でも)

参加レポート

  • (ブログなどのurl)
Add a custom footer
Add a custom sidebar
Clone this wiki locally