CSSだけで実現するグラフィック表現

Advanced Tech Night No.07
CSSだけで実現する
グラフィック表現
2013/08/30
Acroquest Technology
村田賢一郎(@muraken720)
Visualization JavaScript ～データ可視化のためのJavaScript～

目次
1. はじめに
2. CSS3/Sass/SCSS/Compass
3. CSS Tube Map is awesome.
4. CSS Tube Map を解剖してみる
5. CSS Position Editor を勢いで作ってみた
6. CSS Toyoko Map を作ってみよう！
7. CSS3 animations を使ってアラーム状態を表現する
8. A light, semantic, responsive, CSS framework “Jeet2”
9. Jeet2 を使って Chassis View を表現する
10.まとめ
Copyright © Acroquest Technology Co., Ltd. All rights reserved.
2

1. はじめに
自己紹介 =
氏名: ‘村田賢一郎’
twitter: ‘@muraken720’
所属: ‘Acroquest Technology Co.,Ltd.’
仕事:
‘ライフライン系ネットワーク集中監視システム開発’
‘フレームワーク開発’
言語: ‘Java & JavaScript & CSS3 & HTML5’
興味:
‘Backbone.js/AngularJS’
‘Vert.x’
‘Jeet2’
3
‘機関車トーマス！’

1. はじめに
今回のATNのテーマは
「Visualization JavaScript ～データ可視化のためのJavaScript～」
ですが、本発表では、JavaScriptは主題ではありません（＾＾；
可視化、グラフィカルな表現の手段として、直ぐに「JavaScriptで」と言
わずに、モダンなCSSだとどこまでできるのか？を調べてみました。
問題領域は監視系のアプリケーションの中では比較的毎回開発する
Map ViewとChassis Viewを対象としています♪
4

2. CSS3/Sass/SCSS/Compass（1/2）
 CSS3
1. 現在策定中のCSSの規格
2. 機能毎にモジュール分割されている
3. 角丸、影、グラデーション、Webフォント、アニメーション、トラ
ンスフォームなど
 Sass/SCSS
1. Sass(Syntactically Awesome Stylesheets)
Sass is an extension of CSS3
2. SCSS(Sassy CSS)
Sass’s another syntax(a superset of CSS3’s syntax).
5
http://sass-lang.com

2. CSS3/Sass/SCSS/Compass（2/2）
 Compass
1. Compass is an open-source CSS Authoring Framework.
2. Compass uses Sass.
3. Compassのmixinを使うと・・・
① ベンダプレフィックスやクロスブラウザ対応コードを自動生成
② CSSスプライト自動生成
6
CSSの常識が変わる！「Compass」、基礎から応用まで！
http://liginc.co.jp/designer/archives/11623

3. CSS Tube Map is awesome.
7
http://www.csstubemap.co.uk/

4. CSS Tube Map を解剖してみる（1/4）
8
.route {
height: 10px;
width: 10px;
z-index: 15;
}
<ul id="toyoko" class="line">
<li id="ty01" class="route"></li>
<li id="ty02" class="route rot45"></li>
<li id="ty03" class="route"></li>
<li id="ty04" class="route rot45"></li>
【HTML】
.route {
height: 10px;
width: 10px;
z-index: 15;
}
.rot45 {
@include rotate(45deg);
}
#ty01 { width: 50px; }
#ty02 { width: 50px; }
#ty03 { height: 50px; }
#ty04 { height: 50px; }

9
bend45 bend90
<li id="ty05" class="route bend45deg rot180"></li>
<li id="ty06" class="route bend45deg flipped"></li>
<li id="ty07" class="route bend45deg rot180 flipped"></li>
<li id="ty08" class="route bend45deg"></li>
<li id="ty16" class="route bend90deg"></li>

10
.bend45deg {
height: 23px;
width: 31px;
z-index: 9;
@include border-radius(0 23px 0 0);
&:after {
height: 60px;
width: 60px;
content: '';
background-color: #fff;
position: absolute;
top: 10px;
left: -29px;
@include border-radius(95px);
z-index: 11;
}
}
.bend90deg {
height: 31px;
width: 31px;
z-index: 9 !important;
@include border-radius(0 31px 0 0);
&:after {
height: 40px;
width: 40px;
content: '';
background-color: #fff;
position: absolute;
top: 10px;
left: -19px;
z-index: 11;
}
}
.flipped {
@include border-radius(0 0 23px 0);
&:after {
bottom: 10px;
top: auto;
}
}

11
<li id="ty20" class="roundel station">
<strong class="above">菊名</strong></li>
<strong class="below">横浜</strong></li>
<strong class="right">武蔵小杉</strong></li>
<strong class="left">中目黒</strong></li>
.station {
height: 22px;
width: 22px;
display: block;
background: #fff;
border: 6px solid #000;
line-height: 22px;
}
.roundel {
z-index: 100 !important;

5. CSS Position Editor を勢いで作ってみた
12
Backbone.js & jQuery UI Draggable

6. CSS Toyoko Map を作ってみよう！
13
Demo

 CSS3 animationsとは？
1. ある CSS のスタイル設定を別の設定へ遷移させることを可
能にする
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_
animations
2. でも、ベンダプレフィックスとかめんどくさい・・・
7. CSS3 animations を使ってアラーム状態を表現する
14
css3 animation plugin for compass
https://github.com/ericam/compass-animation

8. A light, semantic, responsive, CSS framework “Jeet2”
15
http://jeetframework.com/

9. Jeet2 を使って Chassis View を表現する（1/3）
16
 Jeet2を使う
1. （Install Ruby）
2. Install Compass
3. （Install Node）
4. Install LiveReload Browser Extension
5. npm install -g jeet
6. jeet create Jeet2Project
7. cd Jeet2Project
8. jeet watch
9. Edit either css/scss/style_scss.scss or
css/styl/style_styl.styl
https://github.com/CorySimmons/jeet#quick-start
SCSSとStylusの使い分け
 SCSS
Compassを使った仕込み系
のCSSを定義
 Stylus
レイアウトやデザインを定義

17
<div class="container">
<h3>Chassis View</h1>
<div class="rack">
<div class="server state-normal"></div>
<div class="server state-normal"></div>
<div class="server"></div>
</div>
<div class="rack">
<div class="router">
<div class="port state-alarm"></div>
<div class="port state-normal"></div>
<div class="port state-normal"></div>
<div class="port"></div>
<div class="port"></div>
U=20px
.container
center(800px)
.rack
background #000
col(1,1)
.server
height U*10
background #ccc
col(1,8)
.router
background #ccc
col(1,1)
.port
height U
background #555
col(1,12)
【stylus】

18
.server { @include border-radius(5px); }
.router { @include border-radius(10px); }
.port { @include border-radius(20px); }
@include keyframes(alarm-animation) {
0%, 100% { background-color: #98005d; }
50% { background-color: #ff0000; }
}
.state-alarm {
@include animation(alarm-animation 2s infinite);
}
.state-normal {
background-color: green !important;
}
【scss】

10. まとめ
1. CSS3だけでもかなりのことができる。
2. CSS3使うなら、Sass/SCSSを使おう！
3. Sass使うなら、Compassを使おう！
4. CSS Tube MapからCSSで実現できることの可能性を
知った！
5. CSS framework を使おう！
6. 特に、自分でCSSをデザインしたければ、Jeet
frameworkは面白い！
7. CSSで表現できることはCSSに任せよう。
19

20
CSSによるグラフィック表現を
一緒に楽しみませんか？
Infrastructures Evolution

CSSだけで実現するグラフィック表現

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Viewers also liked

Viewers also liked (9)

Similar to CSSだけで実現するグラフィック表現

Similar to CSSだけで実現するグラフィック表現 (20)

More from AdvancedTechNight

More from AdvancedTechNight (19)

Recently uploaded

Recently uploaded (14)

CSSだけで実現するグラフィック表現