Submit Search
Upload
ゆるふわCSS3
•
7 likes
•
1,607 views
Mitsuru Ogawa
Follow
2013/7/3の社内
Read less
Read more
Technology
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 21
Download now
Download to read offline
Recommended
Seasar conference 2015 sa-compojure
Seasar conference 2015 sa-compojure
Yoshitaka Kawashima
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
Sass less
Sass less
Net Kanayan
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
fujita_ryo
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
Tomohiko Himura
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
schoowebcampus
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
Satoshi Ebisawa
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
Recommended
Seasar conference 2015 sa-compojure
Seasar conference 2015 sa-compojure
Yoshitaka Kawashima
今さら聞けないXSS
今さら聞けないXSS
Sota Sugiura
Sass less
Sass less
Net Kanayan
WEBデザイナー3年目を終えて
WEBデザイナー3年目を終えて
fujita_ryo
軽量マークアップ言語で気楽にマークアップ
軽量マークアップ言語で気楽にマークアップ
Tomohiko Himura
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
WEBデザイナーのためのエディタ入門 先生:金澤 直毅
schoowebcampus
WebデザイナーのためのGit勉強会 ~準備編~
WebデザイナーのためのGit勉強会 ~準備編~
Satoshi Ebisawa
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
Miho Ishida
エコなWebデザイナーになろう
エコなWebデザイナーになろう
Yasuhisa Hasegawa
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
Tomoyuki Arasuna
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
Deloitte United States
CSP Lv.2の話
CSP Lv.2の話
Yu Yagihashi
Css3
Css3
Goro Ide
Asynchronous Messaging入門
Asynchronous Messaging入門
Tatsuaki Sakai
クラウドデザインパターンのススメ
クラウドデザインパターンのススメ
貴志 上坂
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
CSS3がやってきた
CSS3がやってきた
kousuke inamoto
SMACSS入門
SMACSS入門
iPride Co., Ltd.
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Mitsuru Ogawa
More Related Content
Viewers also liked
エコなWebデザイナーになろう
エコなWebデザイナーになろう
Yasuhisa Hasegawa
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
Masaya Ando
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
Satoshi Kikuchi
CSS設計のお勉強
CSS設計のお勉強
MarlboroLand
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
拓樹 谷
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
Yuji Nojima
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
Tomoyuki Arasuna
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Hiroyuki Makishita
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
Toshiaki Sasaki
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
Deloitte United States
Viewers also liked
(14)
エコなWebデザイナーになろう
エコなWebデザイナーになろう
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
UXデザインの上流工程の考え方とプロセス ~リサーチからアイデア発想そしてUIデザインへ
サルでもできるWebデザイン:SwapSkills
サルでもできるWebデザイン:SwapSkills
CSS設計のお勉強
CSS設計のお勉強
CSS の歩き方
CSS の歩き方
モダンなCSS設計パターンを考える
モダンなCSS設計パターンを考える
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
最強オブジェクト指向言語 JavaScript 再入門!
最強オブジェクト指向言語 JavaScript 再入門!
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
制作会社の視点で見る デザイナーのキャリアパスとスキル
制作会社の視点で見る デザイナーのキャリアパスとスキル
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
Webデザインのセオリーを学ぼう
Webデザインのセオリーを学ぼう
2017 holiday survey: An annual analysis of the peak shopping season
2017 holiday survey: An annual analysis of the peak shopping season
Similar to ゆるふわCSS3
CSP Lv.2の話
CSP Lv.2の話
Yu Yagihashi
Css3
Css3
Goro Ide
Asynchronous Messaging入門
Asynchronous Messaging入門
Tatsuaki Sakai
クラウドデザインパターンのススメ
クラウドデザインパターンのススメ
貴志 上坂
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
Haraguchi Go
CSS3がやってきた
CSS3がやってきた
kousuke inamoto
SMACSS入門
SMACSS入門
iPride Co., Ltd.
Similar to ゆるふわCSS3
(7)
CSP Lv.2の話
CSP Lv.2の話
Css3
Css3
Asynchronous Messaging入門
Asynchronous Messaging入門
クラウドデザインパターンのススメ
クラウドデザインパターンのススメ
Gumi study#15 Sass構造化
Gumi study#15 Sass構造化
CSS3がやってきた
CSS3がやってきた
SMACSS入門
SMACSS入門
More from Mitsuru Ogawa
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Mitsuru Ogawa
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overview
Mitsuru Ogawa
Webアプリケーションセキュリティ ディスカッション資料
Webアプリケーションセキュリティ ディスカッション資料
Mitsuru Ogawa
Lightningコンポーネント事始め
Lightningコンポーネント事始め
Mitsuru Ogawa
ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記
Mitsuru Ogawa
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
Mitsuru Ogawa
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
Mitsuru Ogawa
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
Mitsuru Ogawa
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
Mitsuru Ogawa
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
Mitsuru Ogawa
賢くツールを使って脱人海戦術駆動テスト
賢くツールを使って脱人海戦術駆動テスト
Mitsuru Ogawa
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
Mitsuru Ogawa
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
Mitsuru Ogawa
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
Mitsuru Ogawa
オフラインWeb 今どきのデータ永続化事情
オフラインWeb 今どきのデータ永続化事情
Mitsuru Ogawa
Enja OSSやってます
Enja OSSやってます
Mitsuru Ogawa
More from Mitsuru Ogawa
(18)
React+TypeScriptもいいぞ
React+TypeScriptもいいぞ
Angular2 rc.1 unit testing overview
Angular2 rc.1 unit testing overview
Webアプリケーションセキュリティ ディスカッション資料
Webアプリケーションセキュリティ ディスカッション資料
Lightningコンポーネント事始め
Lightningコンポーネント事始め
ゆるふわWoT&firefoxOS体験記
ゆるふわWoT&firefoxOS体験記
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangularJSにしました
今後のWeb開発の未来を考えてangularJSにしました
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライヤーのためのWeb Componentsハンズオン
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
エンタープライズとHTML5〜エンタープライズでHTML5って本当に必要なのか?〜
国内初事例に学ぶSAPUI5
国内初事例に学ぶSAPUI5
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
35歳無名のシステムエンジニアが1年半でフロントエンジニアになるために行った3つの成長戦略
賢くツールを使って脱人海戦術駆動テスト
賢くツールを使って脱人海戦術駆動テスト
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
HTML5とOSSで作るブラウザで簡単顔認識
HTML5とOSSで作るブラウザで簡単顔認識
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
オフラインWeb 今どきのデータ永続化事情
オフラインWeb 今どきのデータ永続化事情
Enja OSSやってます
Enja OSSやってます
Recently uploaded
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Recently uploaded
(7)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
ゆるふわCSS3
1.
ゆるふわCSS3 2013/07/03 社内フロント技術勉強会#01 LT 小川
充@mitsuruog 1
2.
偏り注意 ! 偏り注意 10分という短い時間で 基本から最先端まで一気にいきます。 また、個人的に趣向により、かなり内容に偏りがございます。 ご了承ください。
3.
目次 1. 基本を行く 1.1. よく使うCSS3 1.2.今後、お世話になりそうなCSS3 2.
先端を行く 2.1.CSSプリプロセッサ 2.2.Grunt 3. 最先端を行く 3.1.OOCSS 3.2.モジュール化と命名規約 3.3.shame.css(おまけ)
4.
1. 基本を行く
5.
よく使うCSS3 角丸 透明度1.0 • 角丸 • • 透明度0.3 透明度 • • border-radius opacity 影 • text-shadow text-shadow、box-shadow box-shadow
6.
よく使うCSS3 • 属性セレクタ • • UI擬似クラス • • [attr^="hoge"]、[attr$="hoge"]、[attr*="hoge"] jQueryでおなじみのやつです。 :enabled、:disabled、:checked 構造擬似クラス • :first-child(最初の要素) :last-child(最後の要素) • :nth-child(n)(n番目の要素)
7.
今後お世話になりそうなCSS3 • floatの代わり ボックスレイアウト • display:box/inline-box ! http://www.css-lecture.com/log/css3/css3-layout-box.html ! • マルチカラムレイアウト • columns: 段の横幅 段の数 ! divの中で段組 http://thinkit.co.jp/story/2012/04/12/3515?page=0,2
8.
今後お世話になりそうなCSS3 • ターゲット擬似クラス • :target(リンク先のターゲットを指定) <a href= #hoge">aaaa</a> <div
id= hoge ></div> a:targetで指定→#hoge tabなどで使います。
9.
今後お世話になりそうなCSS3 • グラデーション • linear-grandient、radial-grandient かっこよく使うのが難しい。 http://www.colorzilla.com/gradient-editor/
10.
今後お世話になりそうなCSS3 • アニメーション • tranform(2D、3D変形) • transsition(:hover時のアニメーション) • @keyframes animation CSS Only
Macbook Air CSSアニメーションの表現力は豊か 今後アニメーション表現の主力となる だろう。 http://cssdeck.com/labs/css-only-macbook-air
11.
2. 先端を行く
12.
CSSプリプロセッサ • CSSのよくある問題点 Webページが複雑になればなるほどCSSのコード量が増える。 CSSには他のプログラミング言語にあるモジュール化と再利用と いう概念がない。 CSSのコード量が増えるに従い、冗長なものが増えメンテナンス 困難になる 。 CSSの弱点をツールにて補完 CSSプリプロセッサとは CSSにプログラミング言語的な機能を付け加えるもの。 CSSプリプロセッサ 形式で記述 ビルド CSS
13.
代表的なCSSプリプロセッサ less Sass stylus http://lesscss.org/ http://sass-lang.com/ http://learnboost.github.io/stylus/ 実は、ドキュメントの日本語訳すべてenja-ossメンバーにて行いました。 less http://less-ja.studiomohawk.com/ Sass https://github.com/enja-oss/Sass/tree/master/docs stylus https://github.com/enja-oss/stylus/tree/master/docs
14.
Grunt • Grunt(http://gruntjs.com/) • 大規模でCSSを記述する場合はビルドプロセスが必須 • CSSプリプロセッサ • 静的構文チェック • 最適化(ミニファイ、結合)
15.
Grunt • 良く使うタスク • CSSプリプロセッサビルド系 • https://npmjs.org/package/grunt-contrib-compass(Sassビルド) • https://npmjs.org/package/grunt-contrib-less(Lessビルド) • • 静的構文チェック系 • • https://npmjs.org/package/grunt-contrib-stylus(Stylusビルド) https://npmjs.org/package/grunt-contrib-csslint(構文チェック) 最適化系 • https://npmjs.org/package/grunt-contrib-cssmin(CSSミニファイ) • https://npmjs.org/package/grunt-csso(CSSミニファイ)
16.
3. 最先端を行く
17.
OOCSS • OOCSS • オブジェクト思考CSS Nicole Sullivan http://www.slideshare.net/stubbornella/object-oriented-css
18.
モジュール化と命名規約 • CSSのモジュール化と命名規約は本当に大事。 (大規模Web開発やっみると良く分かる話。) ちゃんとCSSを書くために - CSS/Sass設計の話 日本語で書かれた素晴らしい スライドです。 http://www.slideshare.net/hiloki/a-good-css-and-sass-architecture
19.
SMACSS • SMACSS • Scalable and Modular
Architecture for CSS CSS設計の 鉄板です http://smacss.com/ http://smacss.com/ja 先日、和訳されました。 (enja-oss監訳者の斉藤さん)
20.
shame.css(おまけ) • フロントエンドの歴史はブラウザとの し合いの歴 史。 フロントエンジニアとしての苦渋の決断であ る、CSSハック達をshame.cssとしてまとめよう という話。 (shameとは「恥」という意味) CSSハックは静的構文チェックでエラー になったり、Typoだと思われて修正さ れたりと、あまりいい思いでがない。 http://csswizardry.com/2013/04/shame-css/
21.
ご静聴ありがとうございました。 え!?ゆるふあじゃなかったって?
Download now