HTML5勉強会 名古屋 #3

「HTML5とか新しいこといろいろ」あるけど、 「前からある考え方、手法も大事」なので、 「どっちもバランス良く、出来るところから少しずつやりましょう!」というHTML5関連(&それ以外)の勉強会です。 今回のテーマは「CSS」です!
0
girigiribauer @girigiribauer

入門のプレゼンなのに、今回は質問が深めですねw #html5nagoya

2013-04-19 19:52:16
girigiribauer @girigiribauer

次は 「CSS の設計について」の発表です #html5nagoya

2013-04-19 19:54:58
スノトラ@握力… @sunotora

結構みんな行ってるのね。 #html5nagoya 私の遠い後輩も行っておるのでこわい人たちよろしくお願いします。

2013-04-19 19:55:22
元木一喜 | MOTOKI Kazuyoshi @diveormosh

LEGOだらけのプレゼン、素敵です。内容は「CSSの設計について」 #html5nagoya

2013-04-19 19:56:00
girigiribauer @girigiribauer

3つのポイントに気をつけるべき、1つ目は「カテゴリ化」、2つ目は「名付け」、3つ目は「詳細度(粒度)」 #html5nagoya

2013-04-19 19:56:34
ノリノリたかのり @nori2takanori

CSSの設計について。意識すべきポイント①カテゴリ化②名付け③詳細度 #html5nagoya

2013-04-19 19:56:39
girigiribauer @girigiribauer

カテゴリ化、baseとしてデフォルトのスタイルを用意する、リセットとか、layoutとして大枠部分のスタイルを用意、moduleとしてナビとかドロップダウンのメニューとかの単位でモジュールかを進める、stateとして状態を表すスタイルを用意 #html5nagoya

2013-04-19 19:58:44
girigiribauer @girigiribauer

名付け、レイアウトならlayoutなど、接頭詞で分かるようにする、ただモジュールはmoduleとつけなくても分かるのでつけない #html5nagoya

2013-04-19 20:00:58
girigiribauer @girigiribauer

最後に詳細度(粒度)、なるべくidを使わない、依存関係が強くなり、他に移動させるのが難しくなる、クラス単体で使うようにする、子孫セレクタなるべく使わない、以下すべてにスタイルが適用されてしまう #html5nagoya

2013-04-19 20:02:52
girigiribauer @girigiribauer

子孫セレクタ a b の代わりに 子セレクタ a > b を使おう #html5nagoya

2013-04-19 20:03:16
ノリノリたかのり @nori2takanori

「分ける」ことは「わかる」こと。名言 #html5nagoya

2013-04-19 20:06:38
girigiribauer @girigiribauer

「分ける」ことは「わかる」こと #html5nagoya

2013-04-19 20:06:39
元木一喜 | MOTOKI Kazuyoshi @diveormosh

「CSSの設計について」ポイントは3つ。1つ目は「カテゴリ化」2つ目は「名付け」3つ目は「詳細度」参考サイト→http://t.co/eO1th7SXeB ソース→https://t.co/DUfHyIucDZ #html5nagoya

2013-04-19 20:07:08
きょん@アジャイルコーチ、システムアーキテクト @kyon_mm

なんかGroovyFXを見ている気分 #html5nagoya [うさみみ*´×`*エンジニア]

2013-04-19 20:31:59
Tatsuya Ito @eiji_sm

Webページ上のアニメーションで、CSSとJavaScriptどちらを使えばいいのかの切り分け方について #html5nagoya

2013-04-19 20:32:49
ノリノリたかのり @nori2takanori

動きを「制御」と「装飾」に切り分ける #html5nagoya

2013-04-19 20:35:00
Tatsuya Ito @eiji_sm

『制御』をJavaScript、『装飾』をCSSで #html5nagoya

2013-04-19 20:39:00
ノリノリたかのり @nori2takanori

途中の動きは「装飾」、今の位置から次の位置への移動は「制御」。 「装飾」はCSS、「制御」はJavascript #html5nagoya

2013-04-19 20:39:23