Submit Search
Upload
Css benkyou
•
0 likes
•
621 views
大樹 小倉
Follow
CSSについての勉強会で作ったスライド
Read less
Read more
Design
Report
Share
Report
Share
1 of 32
Download now
Download to read offline
Recommended
Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!
webcampusschoo
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Sass超入門
Sass超入門
Mizuno Renya
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
20130202 ドメイン駆動設計読書会at名古屋のお誘い
20130202 ドメイン駆動設計読書会at名古屋のお誘い
Ryo RKTM
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
Recommended
Webサイトのライブデザイン&コーディング実演授業!
Webサイトのライブデザイン&コーディング実演授業!
webcampusschoo
プログラマがデザインをがんばってみた
プログラマがデザインをがんばってみた
だいすけ ふるかわ
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Sass超入門
Sass超入門
Mizuno Renya
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
20130202 ドメイン駆動設計読書会at名古屋のお誘い
20130202 ドメイン駆動設計読書会at名古屋のお誘い
Ryo RKTM
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
WordCamp Kansai 2015 デザイン初心者向けワークショップ〜 ブログデザインを実際に作ってみよう〜
Ayaka Sumida
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
JavaScript基礎勉強会
JavaScript基礎勉強会
大樹 小倉
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
JS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりました
Miki Yokouchi
Let's Lean and Implement flux
Let's Lean and Implement flux
大樹 小倉
モテる JavaScript
モテる JavaScript
Osamu Monoe
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Enduring CSS
Enduring CSS
Takazudo
Csspage1 2014-06-22
Csspage1 2014-06-22
Keiichiro Shikano
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
真乙 九龍
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
OrenoHP
OrenoHP
Yuko Taniguchi
ABC 第2回スライド
ABC 第2回スライド
Sawada Makoto
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
odakeiji
More Related Content
Viewers also liked
JavaScript MVC入門
JavaScript MVC入門
大樹 小倉
JavaScript基礎勉強会
JavaScript基礎勉強会
大樹 小倉
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
大樹 小倉
JS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりました
Miki Yokouchi
Let's Lean and Implement flux
Let's Lean and Implement flux
大樹 小倉
モテる JavaScript
モテる JavaScript
Osamu Monoe
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
schoowebcampus
Pythonによる黒魔術入門
Pythonによる黒魔術入門
大樹 小倉
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
Viewers also liked
(9)
JavaScript MVC入門
JavaScript MVC入門
JavaScript基礎勉強会
JavaScript基礎勉強会
モダンJavaScript環境構築一歩目
モダンJavaScript環境構築一歩目
JS初心者だけど3ヶ月でこんだけ書けるようになりました
JS初心者だけど3ヶ月でこんだけ書けるようになりました
Let's Lean and Implement flux
Let's Lean and Implement flux
モテる JavaScript
モテる JavaScript
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
ノンプログラマーでも明日から使えるJavaScript簡単プログラム 先生:柳井 政和
Pythonによる黒魔術入門
Pythonによる黒魔術入門
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Similar to Css benkyou
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Enduring CSS
Enduring CSS
Takazudo
Csspage1 2014-06-22
Csspage1 2014-06-22
Keiichiro Shikano
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
真乙 九龍
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
schoowebcampus
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
schoowebcampus
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
takumaro web
OrenoHP
OrenoHP
Yuko Taniguchi
ABC 第2回スライド
ABC 第2回スライド
Sawada Makoto
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
Web nist
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
Nozomi Sawada
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
odakeiji
Similar to Css benkyou
(13)
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Enduring CSS
Enduring CSS
Csspage1 2014-06-22
Csspage1 2014-06-22
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
2012.11.03 #odstudy Excel方眼紙に魂を削られない為のoffice講座
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
プロデザイナーが実践するHTML&CSSスキル向上トレーニング〜Wikipedia編 先生:笠井 枝理依
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
GW講習3日目!プロデザイナーが実践するHTML&CSSスキル向上トレーニング
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
第10回勉強会 CSS設計について
第10回勉強会 CSS設計について
OrenoHP
OrenoHP
ABC 第2回スライド
ABC 第2回スライド
WordPress アジュール部 テーマ制作について考えること
WordPress アジュール部 テーマ制作について考えること
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
オマケ会 D2Dアクセシビリティ勉強会資料「アクセシブルなCSSをつくろう」
パネルディスカッション資料(公開版)
パネルディスカッション資料(公開版)
Css benkyou
1.
やばいCSS 楽しく学ぼう 小倉 大樹
2.
CSSが苦手? 結構、ではますます嫌いになりますよ。
3.
CSSのどこが難しいのか • デザインそのものが難しい &
知らない • GUI構築そのものが複雑で難しい行為 • CSSの言語仕様の貧弱さ • CSSの機能が多すぎるので覚えきれない とか、主にそういった理由ではなかろうか。
4.
そもそもデザインって 難しいよ
5.
Bootstrapはデザインの問題を解決しないよ。 コンポーネント作成とか、 基本的なレイアウトに必要な汎用クラスを用意する手間を減らして くれるだけだよ。 とはいえ便利だよ。
6.
今回、デザインそのものについては扱い(え)ません。 PDFなどにおこされた絵を、 そのままHTMLとCSSで仕上げる技術についてのみ言及します。
7.
とはいえ、 フロントエンドを実装するにあたって、 デザインのコンテクストを理解できるように なるためにも基礎的事項は押さえておくほうが 望ましいです。 最初の基礎の基礎的な入門にはノンデザイナーズデザインブックがおすすめ!
8.
デザイナーに頼れない場合は? 弊社あるあるの事象
9.
とりあえず レイアウトだけでも 基本を守ってきっちり作ろう! それだけでかなり使いやすいUIになるはず。
10.
色増やしたり、あちこちにシャドウを入れたり、画像を入れたボタンを作ったり…… グラデーションさせたり、アニメーションさせたり…… 素人が付け焼刃の『デザイン』をしても逆効果にしかならないよ! フラットデザインの流れは「簡単」ではないけど、 エンジニアでもとっつきやすいものなのでどんどん取り入れていきましょう。
11.
GUI構築の複雑さ
12.
そもそもUIの構築って難しい…… そして、HTMLやCSSは そもそもGUIを構築するために 生まれたものではない
13.
おさえるべきポイント • UIそのものに対する「気持ち」 • GUI構築の基本的なパターン •
Webという環境の向き、不向き • GUI環境として日々進歩しているWeb界隈の情報収集
14.
WebUIに求められる知見 • HTMLのセマンティクス • CSSの仕様 •
欲しいレイアウトを組むためのノウハウ • etc…… 上記の内容を駆使しつつ、JavaScriptによる インタラクションを視野に入れて設計しないといけない。
15.
対策 • HTML、CSSの『仕様』を読む • JavaScriptも頑張る •
『何が出来るか』の知見を集める • 試行錯誤して経験を積む 身も蓋もないけど、これしかない。 適当にググって、その場しのぎのCSSスニペットを コピペしたところで永遠に何も身に付かない……。
16.
言語としての CSSが しんどい件について
17.
meta CSS or cssnext
18.
メタCSSか次世代CSSを使う • CSSに対する不満点の7割はそれで解消する • 変数、四則演算、mixin、関数…… •
コンパイルの手間とかはかかるけど、ペイする いい加減、生のCSSはありえない!! やめよう!
19.
残った3割の不満は? • 全てがグローバルなのつらい • スタイルの再利用性とか幻想じゃないですか •
BEMとかの運用努力にも限界が…… 耐えましょう。
20.
もしかしたら 救ってくれるかも しれない技術
21.
ReactStyle • ほぼSPA前提 • HTML(構造)、CSS(スタイル)、 JavaScript(ロジック)に分裂した世界を統合する 技術 •
スコープの概念がCSSにも! • でもそこまでReactに依存していいの……という不安
22.
Polymer(Web Components) • スコープ、パーツの再利用性に重きを置いている? •
WebUIの世界にModuleの概念が! • JavaScriptも含めた包括的なスコープを作る • まだまだ仕様が不安定っぽい雰囲気をかんじる あんまよくわかってないですごめんなさい……
23.
がんばろう! 未来は明るい。
24.
CSSの機能がおおすぎる
25.
作りまくるしかない。 CSSのノウハウ系の知識は、書籍にしろネットにしろいい加減なものが多いし……
26.
がむしゃら前の頑張りポイント 1. まず綺麗なHTMLありき! 2. 次にCSSの基本仕様! 3.
BEMとかそこらへんの知見をおさえる 4. 色々なウェブサービスのUIを日頃から意識する 5. CSSの引き際を覚える(複雑なことはJS) 6. 新しいCSSの仕様をチェックする
27.
フックポイント • ボックスモデル • display •
float(overflow) • position ここら辺をおさえておけば、 基本的なレイアウトはサッと作れるようになる(はず)。
28.
中級フック • 擬似要素、擬似クラス • box-sizing •
flexbox • transform ここら辺をおさえるとちょっと複雑なデザインもがんばれる(かも)。
29.
まとめ
30.
• まずはHTML • 逆引きテクニックの前に仕様 •
何かしらのメタCSSは必須 • BEMで命名する • 思い通りのレイアウトを作れるようになったら、 変更に強いコーディングをできるマンになろう • クラスの再利用性は割り切る • あんまり複雑なものは諦めてJSを使う
31.
fin
32.
DEMO (いまつくってるやつ)
Download now