Submit Search
Upload
ゆるふわCSS3
•
7 likes
•
1,606 views
Mitsuru Ogawa
Follow
2013/7/3の社内
Read less
Read more
Technology
Report
Share
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
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
Hiroshi Tomioka
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
Recently uploaded
(9)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版) 2024年4月作成
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
ゆるふわ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