見つけた！ モダンなトラフィック可視化 BoF · モダンなossによるトラフィック可視化 • 従来 • 現在 • ほぼ同等のことが、各機能を持つossの組み合わせで実現でき
モダンでオサレなwebサイト
43
モモモモモモモモ web モモモ @clicktx 2012.3.3 Gunma.web #8
-
Upload
munenori-sugimura -
Category
Technology
-
view
2.963 -
download
2
description
webサービスのデザインをbootstrapを使って楽しようというお話です。
Transcript of モダンでオサレなwebサイト
モダンでオサレな web サイト
@clicktx
2012.3.3 Gunma.web #8
Profilo
• Nome ：すぎむら むねのり• Twitter: @clicktx
• Lingua: Perl
• Laboro: 普段は鉄を売ってます
Webサイトのデザイン
今回のテーマ
デザイナーの仕事だな ( ﾟ Д ﾟ )y-~~
Web サービス
一人で全部作る
苦労すること
• レイアウトがうまくいかない• 統一感がない• ボタンとかの画像作るのめんどい• IE めェ…• etc…
楽したい
なんかいい方法ない？
BootstrapBootstrapブートストラップ
Web アプリケーション開発のための CSS フレームワーク
Bootstrap, from TwitterBootstrap, from Twitter
• もともとは社内利用を目的に開発していたもの• 2011 年 8 月に OSS として公開• 2012 年 1 月 2.0 にメジャーバージョンアップ• 現在のバージョンは 2.0.1• スマートフォン・タブレット対応• github で開発• ライセンスは Apache License 2.0
知ったキッカケ• Amon2 という Perl の WAF で使われていた。• デモの Hello World がインパクト大きかった
肉食系WAFです
使い方
CSS を読み込む
<head> 内にスタイルシートのパスを書くだけ
<link href="./css/bootstrap.css" rel="stylesheet"><link href="./css/bootstrap-responsive.css" rel="stylesheet">
主な機能
ナビゲーション
ボタン
グリッドシステム
グリッドシステム• 余白とか• 幅とか• バランスとか
気にしないでレイアウト出来るよ！
グリッドシステムこんな感じ
まじ感謝
他にもかゆいところに手が届くものがたくさん！
Pagination
AlertsForms
and mode…
デフォルトの CSS だけでもいい感じに仕上がります。
パッとしないデザイン → おしゃれに
Before → After
参考： http://blog.esuteru.com/archives/5677048.html
リッチな UI
JavaScript for BootstrapJavaScript for Bootstrap
• カスタム jQuery plugin のコンポーネントが豊富に用意されています。
• クローズできるアラート、ツールチップ、スライドショー等リッチな UI を作りたい時に便利。
モダンな CSS
LESS with BootstrapLESS with Bootstrap
• JS で書かれた CSS メタ言語「 LESS 」を使うことができます。
• CSS で変数、ミックスイン、入れ子ルール、名前空間、四則演算と関数などが使えるようになります。
http://lesscss.org/
LESS LESS The dynamic stylesheet language
欠点
似通ったデザインになってしまう
でもいろいろなサービスあるよ
様々なテーマ
カラースキーム
Bootstrap on Rails
Twitter Bootstarp Rails
http://ppworks.hatenablog.jp/entry/2012/02/19/033644
注目！
職が見つかったり、彼女ができたり、背が伸びたり！！
すごい効果
就活・婚活に
Bootstrap from Twitter を
使ってみて下さい！！
まとめ• 簡単。 CSS 読み込むだけ。• グリッドシステム画期的。• デザイン諸々一通り揃ってる。• ドキュメント充実。• jQuery でよりリッチに。• LESS でよりモダンに。• リア充になれる。
ご清聴ありがとうございました
