Movatterモバイル変換


[0]ホーム

URL:


Masunaga Ray, profile picture
Uploaded byMasunaga Ray
590 views

CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに

CSS Nite in OSAKA, Vol.32 でやったやつです。

Embed presentation

Downloaded 15 times
CSS は、もっと楽になるLESS を活用してコーディング作業をシンプルに                   増永 玲
・増永 玲(マスナガ ¦ msng)といいます。・ウェブのサービスを作って運営するなどしています。・Twitter の bot を作ってます。・『頭ん中』というブログを書いています。 http://www.msng.info/・       / msng
嫌いなもの• 渋滞• ホシブドウ• 単純作業
本日のおはなし•   CSS のここがめんどくさい•   そこで LESS ですよ•   LESS で何か書いてみよう•   Bootstrap が便利•   Bootstrap も LESS でできている•   まとめ
CSS 書くの面倒くさくないですか?
#header {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}#nav {  -webkit-border-radius: 10px;  -moz-border-radius: 10px;  border-radius: 10px;}.post-title {  -webkit-border-radius: 8px;  -moz-border-radius: 8px;  border-radius: 8px;}
何回書けば・・・
#content {  float: left;}#content .post {  margin-bottom: 20px;}#content .post .post-header {  overflow: hidden;}#content .post .post-header .post-title {  border-bottom: 1px solid #999;}#content .post .post-header .post-title p {  font-size: 1.5em;}
どこまで伸びるの
#content a {  color: #33F;}#content a:hover {  color: #FFF;  background-color: #33F;}#sidebar .nav-list a {  color: #33F;}#sidebar .nav-list a:hover {  color: #FFF;  background-color: #33F;}
   やっぱ「あ、  リンク色変更で」
面倒くさくないですか?
いきなりですが解決方法
解決方法1. 書く手間を減らす   書く2. そもそも書かない
書く手間を減らすstyle.less   style.css   魔法の小箱 LESS
書く手間を減らす • LESS ←今日はこれ • Sass • Stylus
LESSのいいところ• Sass は• Stylus 黒い画面でコマンドを・・・!
LESSのいいところLESS はJavaScript を読み込むだけ
LESSでできること            変数が使える@nice-blue: #5B83AD;#header { color: @nice-blue; }#nav { color: @nice-blue; }#header { color: #5B83AD; }#nav { color: #5B83AD; }
LESSでできること@nice-blue: #5B83AD;@light-blue: @nice-blue + #111;#header { color: @light-blue; }#header { color: #6C94BE; }
LESSでできること         ミックスイン .round {   -webkit-border-radius: 10px;   -moz-border-radius: 10px;   border-radius: 10px; } #header { .round; } #nav { .round; }
LESSでできること #header {   -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px; } #nav {   -webkit-border-radius: 10px;    -moz-border-radius: 10px;    border-radius: 10px; }
実際にご覧ください (後記:ここで実演しました)
解決方法1. 書く手間を減らす    2. そもそも書かない    
そもそも書かないTwitter Bootstrap
実際にご覧ください (後記:ここで実演しました)
本日のまとめ• 単純作業は機械に任せて• クリエイティブな活動に専念しよう
ありがとうございました。参考資料 http://bit.ly/cno32

Recommended

KEY
compassで簡単! CSS3を手軽に利用する
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
WordPressでCSSプリプロセッサ入門
PDF
WordPress でプロフィールサイトをつくってみた
PDF
LESS楽しいれす(^q^)
PDF
Sassを使ってみよう
PDF
Webページで学ぶJavaScript2013 第4回
KEY
春のJavaScript祭り
PDF
Css benkyou
PDF
Cssアニメーションとその制御
PDF
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
PDF
恋に落ちるRuby
PDF
設計から実装まで、今すぐ始める高速化
PPTX
Azure ml発表資料
PDF
速くなければスマフォじゃない
KEY
a-blog cms初心者が テンプレート作るまで
PDF
SassだけじゃなくてLESSの事も見てください
PDF
I want Make full svg website
PPTX
JSつまみぐい
PDF
CSSコーディングを効率よくするおすすめプラグイン
PPTX
2013年のWordBench神戸
 
PDF
2013年3月16日のWordBench大阪
PPTX
てんとーる
PDF
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
PDF
20130202 ドメイン駆動設計読書会at名古屋のお誘い
PDF
WordPressで電子書籍
PDF
WordBench京都9月号
PDF
個人名刺を作ろう
PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
PDF
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ

More Related Content

KEY
compassで簡単! CSS3を手軽に利用する
PDF
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
PDF
WordPressでCSSプリプロセッサ入門
PDF
WordPress でプロフィールサイトをつくってみた
PDF
LESS楽しいれす(^q^)
PDF
Sassを使ってみよう
PDF
Webページで学ぶJavaScript2013 第4回
KEY
春のJavaScript祭り
compassで簡単! CSS3を手軽に利用する
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
WordPressでCSSプリプロセッサ入門
WordPress でプロフィールサイトをつくってみた
LESS楽しいれす(^q^)
Sassを使ってみよう
Webページで学ぶJavaScript2013 第4回
春のJavaScript祭り

What's hot

PDF
Css benkyou
PDF
Cssアニメーションとその制御
PDF
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
PDF
恋に落ちるRuby
PDF
設計から実装まで、今すぐ始める高速化
PPTX
Azure ml発表資料
PDF
速くなければスマフォじゃない
KEY
a-blog cms初心者が テンプレート作るまで
PDF
SassだけじゃなくてLESSの事も見てください
PDF
I want Make full svg website
PPTX
JSつまみぐい
PDF
CSSコーディングを効率よくするおすすめプラグイン
PPTX
2013年のWordBench神戸
 
PDF
2013年3月16日のWordBench大阪
PPTX
てんとーる
PDF
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
PDF
20130202 ドメイン駆動設計読書会at名古屋のお誘い
PDF
WordPressで電子書籍
PDF
WordBench京都9月号
PDF
個人名刺を作ろう
Css benkyou
Cssアニメーションとその制御
ズルいLT 〜はじめてのライトニングトーク〜 / WP-D Week
恋に落ちるRuby
設計から実装まで、今すぐ始める高速化
Azure ml発表資料
速くなければスマフォじゃない
a-blog cms初心者が テンプレート作るまで
SassだけじゃなくてLESSの事も見てください
I want Make full svg website
JSつまみぐい
CSSコーディングを効率よくするおすすめプラグイン
2013年のWordBench神戸
 
2013年3月16日のWordBench大阪
てんとーる
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
20130202 ドメイン駆動設計読書会at名古屋のお誘い
WordPressで電子書籍
WordBench京都9月号
個人名刺を作ろう

Similar to CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに

PDF
HTML/CSSを効率的にする メタ言語とツールのアレコレ
PDF
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
PDF
Sass(SCSS)について
PDF
Css拡張言語のコトハジメ
PDF
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
PDF
Less - first step
PPTX
{LESS}をちょっと拡張してみた
PDF
CSSの光と闇
PDF
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
PDF
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
ZIP
実践Sass 前編
PDF
CSS Design and Programming
PPTX
LESSについて
PDF
Sass introduction (jscafe 10)
PDF
「LESS」ことはじめ
ODP
Less
PDF
マークアップ講座 02 CSS
PDF
Basic CSS Introduction
PDF
ネストを覚えた人のためのSassの便利な使い方
PDF
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する
HTML/CSSを効率的にする メタ言語とツールのアレコレ
デザイナーのためのラクして作る神速WEBサイト〜Bootstrap編〜 先生:イシジマ ミキ
Sass(SCSS)について
Css拡張言語のコトハジメ
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Less - first step
{LESS}をちょっと拡張してみた
CSSの光と闇
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
コーディングがラクになる!? “自分仕様”のさくさくコーディング法
実践Sass 前編
CSS Design and Programming
LESSについて
Sass introduction (jscafe 10)
「LESS」ことはじめ
Less
マークアップ講座 02 CSS
Basic CSS Introduction
ネストを覚えた人のためのSassの便利な使い方
メディア芸術基礎 Ⅰ 第4回:CSS入門 情報の形を視覚化する

CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに


[8]ページ先頭

©2009-2025 Movatter.jp