SlideShare a Scribd company logo

Css preprocessorの始めかた

前知識がない人のためのSassの始めかたです。

1 of 124
Download to read offline
CSSの未来を先取り!

CSS Preprocessorの
始めかた
                @adactio (CC BY2.0)
CSS
Preprocessor
CSS
Preprocessor
#main {
  float: right;
}
#main p {
  margin-bottom: 1em;
}
#main {
  float: right;
}
#main p {
  margin-bottom: 1em;
}
#main {                 #main {
  float: right;             float: right;
}                           p {
#main p {                       margin-bottom: 1em;
  margin-bottom: 1em;       }
}                       }

Recommended

ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方ネストを覚えた人のためのSassの便利な使い方
ネストを覚えた人のためのSassの便利な使い方Hiroki Shibata
 
実践Sass 後編
実践Sass 後編実践Sass 後編
実践Sass 後編kosei27
 
WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司WebデザイナーのためのSass/Compass入門 先生:石本 光司
WebデザイナーのためのSass/Compass入門 先生:石本 光司schoowebcampus
 
Sass/Compass講習会
Sass/Compass講習会Sass/Compass講習会
Sass/Compass講習会Beeworks
 
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Horiguchi Seito
 

More Related Content

What's hot

background-(image|size) の深みへようこそ
background-(image|size) の深みへようこそbackground-(image|size) の深みへようこそ
background-(image|size) の深みへようこそShota Kubota
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSSeiji sekiya
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126webourgeon
 
Sassを使った共同作業について
Sassを使った共同作業についてSassを使った共同作業について
Sassを使った共同作業についてKanako Urabe
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメregret raym
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_QueryHidekazu Ishikawa
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩Chieko Aihara
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでTakashi Uemura
 

What's hot (9)

Sass 超入門
Sass 超入門Sass 超入門
Sass 超入門
 
background-(image|size) の深みへようこそ
background-(image|size) の深みへようこそbackground-(image|size) の深みへようこそ
background-(image|size) の深みへようこそ
 
マークアップ講座 02 CSS
マークアップ講座 02 CSSマークアップ講座 02 CSS
マークアップ講座 02 CSS
 
WordBenchTokyo-20111126
WordBenchTokyo-20111126WordBenchTokyo-20111126
WordBenchTokyo-20111126
 
Sassを使った共同作業について
Sassを使った共同作業についてSassを使った共同作業について
Sassを使った共同作業について
 
Css拡張言語のコトハジメ
Css拡張言語のコトハジメCss拡張言語のコトハジメ
Css拡張言語のコトハジメ
 
脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query脱コピペ!デザイナーにもわかるPHPとWP_Query
脱コピペ!デザイナーにもわかるPHPとWP_Query
 
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
CSSだけでもけっこうイケルTwenty Tenのカスタマイズとそこから踏み出す第一歩
 
WordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまでWordPress実践 導入からカスタマイズまで
WordPress実践 導入からカスタマイズまで
 

Similar to Css preprocessorの始めかた

compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用するKazuya Hiruma
 
Sass
SassSass
SassSu Ga
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!Yoshiya OKI
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ知己 久保
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門Koji Ishimoto
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かきNishida Kansuke
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
Web制作のアレコレ
Web制作のアレコレWeb制作のアレコレ
Web制作のアレコレregret raym
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるYutaro Miyazaki
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会Yuji Nojima
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』Naoki Matsuda
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんHayato Mizuno
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編Toshimichi Suekane
 

Similar to Css preprocessorの始めかた (20)

Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
compassで簡単! CSS3を手軽に利用する
compassで簡単!  CSS3を手軽に利用するcompassで簡単!  CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
 
Less - first step
Less - first stepLess - first step
Less - first step
 
Sass
SassSass
Sass
 
CSSの光と闇
CSSの光と闇CSSの光と闇
CSSの光と闇
 
Sassをはじめよう!
Sassをはじめよう!Sassをはじめよう!
Sassをはじめよう!
 
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレHTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
 
WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門WebデザイナーのためのSass/Compass入門
WebデザイナーのためのSass/Compass入門
 
㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Web制作のアレコレ
Web制作のアレコレWeb制作のアレコレ
Web制作のアレコレ
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
 
CSS勉強会
CSS勉強会CSS勉強会
CSS勉強会
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
 
CSS Preprocessor Hands-on
CSS Preprocessor Hands-onCSS Preprocessor Hands-on
CSS Preprocessor Hands-on
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
 

Recently uploaded

COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)NTT DATA Technology & Innovation
 
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介FumieNakayama
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227ssuserf8ea02
 
20240227_IoTLT_vol108____kitazaki_v1.pdf
20240227_IoTLT_vol108____kitazaki_v1.pdf20240227_IoTLT_vol108____kitazaki_v1.pdf
20240227_IoTLT_vol108____kitazaki_v1.pdfAyachika Kitazaki
 
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -yuutahatano
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishinMakoto Mori
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんtoshinori622
 

Recently uploaded (7)

COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
COPY FROMで異常データをスキップできるようになった話(第45回 PostgreSQLアンカンファレンス@オンライン 発表資料)
 
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介
Kubernetes環境のアプリケーションバックアップソフトウェアKasten K10ご紹介
 
00001_test_automation_portfolio_20240227
00001_test_automation_portfolio_2024022700001_test_automation_portfolio_20240227
00001_test_automation_portfolio_20240227
 
20240227_IoTLT_vol108____kitazaki_v1.pdf
20240227_IoTLT_vol108____kitazaki_v1.pdf20240227_IoTLT_vol108____kitazaki_v1.pdf
20240227_IoTLT_vol108____kitazaki_v1.pdf
 
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -
BusTimeTable by Edge Runtime - 公共交通オープンデータ最前線2024 -
 
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
 
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみんscikit-learn以外の分類器でpipelineを作ってみた! いずみん
scikit-learn以外の分類器でpipelineを作ってみた! いずみん
 

Css preprocessorの始めかた