Submit Search
Upload
HTML/CSSを効率的にする メタ言語とツールのアレコレ
•
1 like
•
2,314 views
知己 久保
Follow
2014/09/17に話した内容のスライド。 Google Slideから移動
Read less
Read more
Technology
Report
Share
Report
Share
1 of 59
Download now
Download to read offline
Recommended
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Recommended
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
イマドキの「タグ=HTML」とスタイルシート=CSS」を知ろう
Mori Kazue
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
E2E CSS Testing at HTML5 Conference 2016
E2E CSS Testing at HTML5 Conference 2016
Takeharu Igari
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
ヒューマンリーダブルな CSS 記述法(異次元編):2016年5月13日 CodeGrid 四周年記念パーティー
Yoshiki Hayama
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
Emmet入門
Emmet入門
Kota Furusawa
Emmetの使い方
Emmetの使い方
Yossy Taka
More Related Content
What's hot
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
Kenya Kodaira
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
コーディングが上達するコツ
コーディングが上達するコツ
evol-ni
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
foom_in
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
Sou Lab
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
Mayu Kimura
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
井上 誠
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Yoshinori Kobayashi
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
Mignon Style
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
rie05
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
WordBench 東京 とは
WordBench 東京 とは
Mignon Style
What's hot
(20)
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
2016年版 フロントエンド開発フォーマット
2016年版 フロントエンド開発フォーマット
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
コーディングが上達するコツ
コーディングが上達するコツ
第3回WordPress Cafe プラグイン紹介
第3回WordPress Cafe プラグイン紹介
WordPressでCSSプリプロセッサ入門
WordPressでCSSプリプロセッサ入門
今必要なCSSアーキテクチャ
今必要なCSSアーキテクチャ
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
大規模サイトにおける本当は怖いCSSの話
大規模サイトにおける本当は怖いCSSの話
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
更新作業で消耗しない!Web製作者のためのWordPress公式ディレクトリ活用術
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
CSS Nite in OSAKA, Vol.32:デザイナーのためのWordPressカスタマイズ
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
WordBench 東京 とは
WordBench 東京 とは
Viewers also liked
Emmet入門
Emmet入門
Kota Furusawa
Emmetの使い方
Emmetの使い方
Yossy Taka
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
Sass超入門
Sass超入門
Mizuno Renya
金融業界でよく使う統計学
金融業界でよく使う統計学
Nagi Teramo
Node.js入門
Node.js入門
俊夫 森
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Hayashi Yuichi
Viewers also liked
(10)
Emmet入門
Emmet入門
Emmetの使い方
Emmetの使い方
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Sass超入門
Sass超入門
金融業界でよく使う統計学
金融業界でよく使う統計学
Node.js入門
Node.js入門
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Gulp入門 - コーディングを10倍速くする
Gulp入門 - コーディングを10倍速くする
Similar to HTML/CSSを効率的にする メタ言語とツールのアレコレ
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sass/Compass講習会
Sass/Compass講習会
Beeworks
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Ryuma Tsukano
Sassをはじめよう!
Sassをはじめよう!
Yoshiya OKI
CSS Design and Programming
CSS Design and Programming
Taku AMANO
First sass
First sass
Toshiaki Sasaki
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
schoowebcampus
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
Koji Ishimoto
WordBenchTokyo-20111126
WordBenchTokyo-20111126
webourgeon
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Chieko Aihara
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
Less - first step
Less - first step
Kohki Nakashima
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Yasuhito Yabe
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
Takashi Uemura
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
Similar to HTML/CSSを効率的にする メタ言語とツールのアレコレ
(20)
Css preprocessorの始めかた
Css preprocessorの始めかた
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Sass/Compass講習会
Sass/Compass講習会
Sass introduction (jscafe 10)
Sass introduction (jscafe 10)
Sassをはじめよう!
Sassをはじめよう!
CSS Design and Programming
CSS Design and Programming
First sass
First sass
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
WordBenchTokyo-20111126
WordBenchTokyo-20111126
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
Sass(SCSS)について
Sass(SCSS)について
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
Less - first step
Less - first step
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
「html5 boilerplate」から考える、これからのマークアップ
「html5 boilerplate」から考える、これからのマークアップ
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
More from 知己 久保
L
L
知己 久保
ラクするCSSツール
ラクするCSSツール
知己 久保
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
知己 久保
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
知己 久保
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
知己 久保
自動化のことはじめ - 第12回HTML5ビギナーズ
自動化のことはじめ - 第12回HTML5ビギナーズ
知己 久保
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
知己 久保
More from 知己 久保
(7)
L
L
ラクするCSSツール
ラクするCSSツール
すべての人に知っておいてほしい VoiceOverの基本原則
すべての人に知っておいてほしい VoiceOverの基本原則
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
Styleguide Driven Development x CMS - MTDDC Tokyo 2015
UAスタイルシートと リセットCSS
UAスタイルシートと リセットCSS
自動化のことはじめ - 第12回HTML5ビギナーズ
自動化のことはじめ - 第12回HTML5ビギナーズ
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
今、話題のビルドツール gulp/Gruntを徹底解剖! ~ハンズオンで基礎から学ぶ、Web制作の味方 ビルドツール~
Recently uploaded
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
Recently uploaded
(11)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
HTML/CSSを効率的にする メタ言語とツールのアレコレ
1.
HTML/CSSを効率的にする メタ言語とツールのアレコレ クリ☆ステ vol.14
2.
自己紹介 久保知己 1985年生まれ。 HTML/CSSからCMSの 構築まで、様々なサイトの制作に携わり、 2014年にまぼろしに入社。 「Web Design
KOJIKA17」を運営中
3.
めんどうくさい 効率化のキーワード
4.
「めんどうくさい」と思うこと ● 画像100枚をリサイズする ● コーディングの確認時に、更新ボタンを押す ●
同じようなコードを、ひたすらコピペ
5.
「めんどうくさい」と思うことは、 反復や繰り返し作業が多い。
6.
HTMLの「めんどうくさい」
7.
閉じタグ <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <div
class="body"><p></p></div> <div class="body"><p></p></div> </div> </div>
8.
閉じタグのコメント <div class="a"> <h1>Title</h1> <div class="b"> <h2>Subtitle</h2> <div
class="body"><p></p></div><!-- /.body --> <div class="body"><p></p></div><!-- /.body --> </div><!-- /.b --> </div><!-- /.a -->
9.
リストの作成 <ul class="nav"> <li><a href="/">Home</a></li> <li><a
href="about.html">About</a></li> <li><a href="concept.html">Concept</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> </ul>
10.
CSSの「めんどうくさい」
11.
セレクタ .header {} .header .logo
{} .main h2 {} .main .body {} .main .body a {} .footer .nav {} .footer .copyright {}
12.
プロパティや値が長い display: inline-block; display: table-cell; background-color:
#fff; text-decoration: underline; letter-spacing: 0.1em; line-height: 1.4;
13.
ベンダープリフィックス -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius:
4px; -o-border-radius: 4px; border-radius: 4px;
14.
グラデーションの構文 や Flexible
Box background: gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #fff)); background: linear-gradient(top, #000, #fff); background: linear-gradient(to bottom, #000, #fff); display: box; display: flexbox; display: flex;
15.
Emmet
16.
Emmet ● Zen-codingの後継 ● HTML/CSSを強力にサポート ●
エディタの拡張機能
17.
Emmetの対応エディタ ● Sublime Text ●
Atom ● Coda ● Komodo Edit ● Notepad++ ● Brackets ● Adobe Dreamweaver ● Vim ● WebStorm ● PhpStorm ● Emacs
18.
Emmet デモ ● 略語の展開(Expand
Abbreviation) ● フィルター(|c) ● 略語の包括処理(Wrap with Abbreviation) ● 四則演算(Evaluate Math Expression) ● 要素の削除(Remove Tag) ● 属性などの選択(Select Item)
19.
Emmetのその他の機能 ● 画像サイズの取得 (エディタによる) ●
文字列の結合 ● 空の要素や属性に、カーソル移動 ● 選択範囲の拡張 ● HTML/CSSの主要なメタ言語に対応
20.
HTML/CSSメタ言語 HTML/CSS Pre-processors
21.
メタ言語の種類 ● HTML ○ Haml ○
Jade ○ Slim ● CSS ○ Sass ○ Less ○ Stylus
22.
メタ言語とは メタ言語(メタげんご、英 Metalanguage)とはある言語について何らかの記述を するための言語である。それだけでは具体的な利用に関する目的をもっておら ず、特定のルールを加えることで具体的な応用として利用可能となる。 メタ言語 -
Wikipedia
23.
CUI(Character User Interface)
24.
Task Runner -
CUI Grunt gulp
25.
GUI(Graphical User Interface) CodeKit(Macのみ)
Prepros App
26.
コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros CUI Grunt gulp
27.
コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros Codekit Prepros Grunt gulp CUI
28.
コンパイル メタ言語 Pre-processors HTML CSS GUI Codekit Prepros CUI Grunt gulp
29.
画像と似てる AI PSD PNG JPEG PNG GIF SVGCodekit Prepros illustrator Photoshop Fireworks
30.
HTMLメタ言語 HTML Pre-processors
31.
基本的なHTMLメタ言語の特徴 ● インデントによる階層表現 ● HTMLパーツや外部データの読み込み ●
変数やif文などの利用
32.
Syntax - Jade #wrap .main h1
タイトル p | Lorem ipsum dolor sit amet. br | Deleniti veniam cupiditate numquam pariatur. .side ul.nav li a(href="/") home
33.
CSSメタ言語 CSS Pre-processors
34.
主要なCSSメタ言語 ● Sass (2007年) ●
Less (2009年) ● Stylus (2011年)
35.
Sassの記述 ● Sass記法 ●
SCSS記法 (2010年) .foo { color: #f00; .demo { color: #fff; } } .foo color: #f00 .demo color: #fff
36.
Sassの特徴 ● 変数 ● 入れ子 ●
Mixins / Include ● Extend ● 制御構文(if, for, while) ● Function
37.
変数 - Sassの特徴 $color:
#f00; $bg: #fff; .foo { color: $color; background: $bg; } .foo { color: #f00; background: #fff; } CSS
38.
入れ子 - Sassの特徴 .foo
{ color: #000; .demo { color: #f00; } } .foo { color: #000; } .foo .demo { color: #f00; } CSS
39.
Mixins / Include
- Sassの特徴 @mixin box($params) { -moz-box-sizing: $params; box-sizing: $params; } .foo { @include box(border-box); color: #000; } .foo { -moz-box-sizing: border-box; box-sizing: border-box; color: #000; } CSS
40.
Extend - Sassの特徴 %btn
{ border-radius: 4px; color: #fff; } .btn-a { @extend %btn; background: #f00; } .btn-b { @extend %btn; background: #ff0; } .btn-a, .btn-b { border-radius: 4px; color: #fff; } .btn-a { background: #f00; } .btn-b { background: #ff0; } CSS
41.
制御構文(if, for, while)
- Sassの特徴 $class-margin: true; @if($class-margin) { @for $i from 1 through 5 { $n: $i * 8px; .m-#{$n} { margin: $n; } } } .m-8 { margin: 8px; } .m-16 { margin: 16px; } .m-24 { margin: 24px; } .m-32 { margin: 32px; } .m-40 { margin: 40px; } CSS
42.
Function - Sassの特徴 .foo
{ color: rgba(#f00, 0.4); color: lighten(#f00, 0.4); color: lighten(#f00, 10); color: darken(#f00, 10); } .foo { color: rgba(255, 0, 0, 0.4); color: #ff0202; color: #ff3333; color: #cc0000; } CSS
43.
CSSメタ言語を使って効率化するなら まずは「変数」を覚えよう
44.
変数 - Sass $color:
#f00; .foo { color: $color; } 値変数
45.
変数を使った応用 ● 一括で色の変更 ● 色彩を操作する関数 ●
Mixins
46.
変数やMixinsの使い方を覚えたら、 ライブラリを使ってみよう
47.
Sass Framework &
Mixin Library Compass Refills(Bourbon)
48.
Compassの機能 ● リセットCSS @include global-reset(); ●
ブラウザのサポート $graceful-usage-threshold: 0.1; ● CSSスプライトの生成...など
49.
Compassの利用方法 @import 'compass'; .foo { @include
border-radius(4px); }
50.
@include を付けるのが ちょっとめんどうくさい
51.
普通のCSS3を書くだけで、 ベンダープリフィックスを 付けれたらいいのに。
52.
autoprefixer
53.
autoprefixer Pre-processors Sass (Compass) Less Stylus CSS Post-processors cssmin autoprefixer csso bless Pleeease
54.
autoprefixer デモ
55.
おさらい
56.
今回紹介したツール ● Emmet ● コンパイラ(CodeKit,
Prepros...) ● HTMLメタ言語(Haml, Jade, Slim) ● CSSメタ言語(Sass, Less, Stylus) ● autoprefixer
57.
Pre-processors Haml, Jade Slim Sass, Less Stylus HTML CSS Post-processors autoprefixer Pleeease Emmet Task
Runner Grunt gulp GUI CodeKit Prepros
58.
Pleeease デモ
59.
ありがとうございました
Download now