SlideShare uma empresa Scribd logo
1 de 9
LESSとBootstrap

ローカル環境の整備
http://incident57.com/less/
Bootstrap の LESS




https://github.com/twitter/bootstrap
開発環境へ
基本的な使い方
<!DOCTYPE html>
<html>
<head>
  <link href="css/bootstrap.min.css"
rel="stylesheet">
</head>
 <body>
  <h1>Hello, world!</h1>
</body>
 </html>
ボタン
<!DOCTYPE html>
<html>
<head>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <h1>Hello, world!</h1>
  <a class="btn btn-success btn-large" href="#">
  <i class="icon-white icon-ok"></i>
  実行する
  </a>
</body>
</html>
LESS
twitter Bootstrap はLESSというCSSメタ言語
(プリプロセッサ)で記述されている。メ
タ言語とは一定の記述で複数箇所に記述さ
れたパーツを解りやすい単語に置き換えた
ものである。例えばRGBカラーの#0000FFを
@blueと命名するという感じだ。カラース
キームを調整する場合、従来ならばCSSのカ
ラー値を逐一編集する必要があった。twitter
Bootstrap ではLESSというCSSメタ言語(プリ
プロセッサ)で記述されているため、一括
で変更することができる。
字ばかりですいません。
http://winless.org/

Mais conteúdo relacionado

Semelhante a XOOPS and Twitter Bootstrap

芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使うAtsushi Tadokoro
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Sosuke Kimura
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolistShinichiro Kumeuchi
 
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.matsuohideaki
 
Mustache入門
Mustache入門Mustache入門
Mustache入門ina job
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)Horiguchi Seito
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial IntroductionTakeshi AKIMA
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様株式会社GreenHack
 
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るBootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るYoshinori Kobayashi
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るTakashi Uemura
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!Takashi Uemura
 
0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座TK-LiT
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_Kelly Holonic
 

Semelhante a XOOPS and Twitter Bootstrap (20)

芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う芸術情報演習デザイン(Web)  第8回: CSSフレームワークを使う
芸術情報演習デザイン(Web) 第8回: CSSフレームワークを使う
 
Twitterbootstrapでモック開発
Twitterbootstrapでモック開発Twitterbootstrapでモック開発
Twitterbootstrapでモック開発
 
WordPress と Bootstrap
WordPress と BootstrapWordPress と Bootstrap
WordPress と Bootstrap
 
Webapp startup example_to_dolist
Webapp startup example_to_dolistWebapp startup example_to_dolist
Webapp startup example_to_dolist
 
Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.Let's make quickly mock up by bootstrap.
Let's make quickly mock up by bootstrap.
 
Css2
Css2Css2
Css2
 
Mustache入門
Mustache入門Mustache入門
Mustache入門
 
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
悩まないコーディングをしよう! OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計(Sass対応)
 
Oktopartial Introduction
Oktopartial IntroductionOktopartial Introduction
Oktopartial Introduction
 
HTML/CSS
HTML/CSSHTML/CSS
HTML/CSS
 
Html:css
Html:cssHtml:css
Html:css
 
WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様WEB開発はじめの一歩 講師:村井亮介様
WEB開発はじめの一歩 講師:村井亮介様
 
Module02
Module02Module02
Module02
 
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作るBootstrapを使って効率よくWordPressオリジナルテーマを作る
Bootstrapを使って効率よくWordPressオリジナルテーマを作る
 
Wordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作るWordpressで自分好みのテーマを作る
Wordpressで自分好みのテーマを作る
 
Css
CssCss
Css
 
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
WordPressの常識をくつがえす超簡単テーマ"doshirouto"を作ったのでこれでテーマを理解しよう!
 
0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座0614_LiTLeaders_CSS講座
0614_LiTLeaders_CSS講座
 
_HTML5で組んでみた_
_HTML5で組んでみた__HTML5で組んでみた_
_HTML5で組んでみた_
 
Web 02
Web 02Web 02
Web 02
 

Mais de Yoshi Sakai

いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成Yoshi Sakai
 
Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定Yoshi Sakai
 
Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )Yoshi Sakai
 
Rhodes mobile Framework
Rhodes mobile FrameworkRhodes mobile Framework
Rhodes mobile FrameworkYoshi Sakai
 
Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)Yoshi Sakai
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareYoshi Sakai
 
XOOPS EC Distribution
XOOPS EC DistributionXOOPS EC Distribution
XOOPS EC DistributionYoshi Sakai
 
XOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deploymentXOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deploymentYoshi Sakai
 
Weeklycms20120218
Weeklycms20120218Weeklycms20120218
Weeklycms20120218Yoshi Sakai
 
XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011Yoshi Sakai
 
XOOPS Securilty flow
XOOPS Securilty flowXOOPS Securilty flow
XOOPS Securilty flowYoshi Sakai
 
Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25Yoshi Sakai
 

Mais de Yoshi Sakai (18)

いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成いきなりAi tensor flow gpuによる画像分類と生成
いきなりAi tensor flow gpuによる画像分類と生成
 
Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定Access で Excel ファイルの操作を行う為のライブラリ設定
Access で Excel ファイルの操作を行う為のライブラリ設定
 
Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )Paypal REST api ( Japanese version )
Paypal REST api ( Japanese version )
 
Rhodes mobile Framework
Rhodes mobile FrameworkRhodes mobile Framework
Rhodes mobile Framework
 
Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)Rhodes mobile Framework (Japanese)
Rhodes mobile Framework (Japanese)
 
Xoopsec
XoopsecXoopsec
Xoopsec
 
Osc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupwareOsc2009tokyofall xoops groupware
Osc2009tokyofall xoops groupware
 
XOOPS EC Distribution
XOOPS EC DistributionXOOPS EC Distribution
XOOPS EC Distribution
 
XOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deploymentXOOPS EC on C4SA Paas deployment
XOOPS EC on C4SA Paas deployment
 
Xcc2012
Xcc2012Xcc2012
Xcc2012
 
Xoops x
Xoops xXoops x
Xoops x
 
Oss活動指針
Oss活動指針Oss活動指針
Oss活動指針
 
Weeklycms20120218
Weeklycms20120218Weeklycms20120218
Weeklycms20120218
 
XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011XOOPS Cube 2.2 Pack 2011
XOOPS Cube 2.2 Pack 2011
 
XOOPS Securilty flow
XOOPS Securilty flowXOOPS Securilty flow
XOOPS Securilty flow
 
Seminer20110119
Seminer20110119Seminer20110119
Seminer20110119
 
Satlab20101127
Satlab20101127Satlab20101127
Satlab20101127
 
Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25Xoops Cube Saturday Lab. 2010/09/25
Xoops Cube Saturday Lab. 2010/09/25
 

Último

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        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論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Gamesatsushi061452
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...Toru Tamaki
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルCRI Japan, Inc.
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsWSO2
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video UnderstandingToru Tamaki
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。iPride Co., Ltd.
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptxsn679259
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Hiroshi Tomioka
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイスCRI Japan, Inc.
 

Último (11)

新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        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論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
 
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native IntegrationsUtilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
 
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 

XOOPS and Twitter Bootstrap