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

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だけで実現するグラフィック表現

Technology

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