今更ながらCSS3を試してみた

今更ながらCSS3を試してみた
住友孝郎
@cattaka_net

自己紹介
● 住友孝郎(すみともたかお)
● 株式会社ブリリアントサービス所属
● 業務系Webアプリ開発
● Androidアプリケーション開発
● 研究開発とか
– ロボット的な何か
– 画像認識的な何か
– Tizen IVI的な何か
住友孝郎
@cattaka_net

トピック
● CSS3とWeb標準
● CSSの基本
● HTMLとCSSの関係
● CSSの表記法
● CSS3の新要素

Web標準
Mozilla Japan 浅井智也氏の資料より

CSSとは
● Cascading Style Sheetsの略
● W3Cで標準化されている
● HTMLにスタイル(見栄え)を追加する
● 仕様全ての完全な実装は事実上無い

HTMLとCSSの関係
● HTMLで文章の論理構造を記述する
● CSSでスタイルを記述する
● ２つを繋ぐのはセレクタ
● タグ
● ID
● クラス
● 階層構造

CSSの表記法
● セレクタ
● 宣言ブロック
● 宣言
– プロパティ
– 値
p#id {
color : #ff3300;
width : 30%;
height : 20%;
}

セレクタの例
● タグ
– セレクタにタグ名をそのまま書く
button { ... }
● ID
– セレクタに”#”＋IDを書く
#myButton { ... }
● クラス
– セレクタに”.”＋クラス名を書く
.buttonClass { ... }
● 階層構造
– セレクタをスペースで区切ると子孫要素が対象となる
#myButton .buttonClass { ... }
– “>”で区切ると子要素が対象となる
#myButton > .buttonClass { ... }

#myGroup1 > .itemClass { color: #FF0000; }
#myGroup2 > .itemClass { color: #0000FF; }
HTMLとCSSの関係
<div id=”myGroup1” class=”groupClass”>
<div id=”myItem1” class=”itemClass”>
あいうえお
</div>
</div>
<div id=”myGroup2” class=”groupClass”>
<div id=”myItem2” class=”itemClass”>
かきくけこ
</div>
</div>
あいうえお
あいうえお
HTML
CSS

CSS3の新要素
● Layout : box
● FlexBox
● MediaQueries
● Regions
● Transform
● Animations サンプルコード
http://goo.gl/6Pt5FS
ZIP版
http://goo.gl/LtmYBT
※ブラウザによって対応状況がことなるの
でいくつかのブラウザで試してください

Layout : box
● ブロック要素に並べて詰め込むことができる
● 順番の入れ替えが可能
● 空き領域に合わせて引き伸ばすことができる
● 何が嬉しいか？
● 従来は同じ事をするのにJavaScriptをゴリゴリ書かなけ
ればならなかった
● これならCSSのみで対応できる

Layout : box
<div id="divBox">
<div class="item-block first">1st</div>
<div class="item-block second">2nd</div>
<div class="item-block third">3rd</div>
</div>
#divBox {
display: box;
box-sizing: border-box;
box-pack: center;
box-orient: horizontal;
border: 1px solid #ff00ff;
}
#divBox .item-block {
border: 1px solid #ff007f;
margin: 1em;
}
CSSHTML
サンプルコード
http://goo.gl/6Pt5FS ※ブラウザによって対応状況がことなるの

Layout : box
<h2>Liquid</h2>
<div id="divLiquid">
<div class="item-block first">1st</div>
<div class="item-block second">2nd</div>
<div class="item-block third">3rd</div>
</div>
#divLiquid {
display: box;
box-pack: center;
}
#divLiquid .item-block {
margin: 1em;
}
#divLiquid .first {
box-ordinal-group: 3;
box-flex: 0.0;
}
#divLiquid .second {
box-flex: 1.0;
}
#divLiquid .third {
box-flex: 2.0;
}
CSSHTML

FlexBox
● 様々な画面サイズにフレキシブルに配置される
● 画面がコンテンツよりも大きい時は伸びたり、
小さい場合は改行または縮ませることができる
● 従来はパーセント指定で行うしか無く、
そのためにJavaScriptでゴリゴリするしかなかった
● これならCSSのみで対応できる

FlexBox
<div class="divFlexBox">
<div class="item-block">1st</div>
<div class="item-block">2nd</div>
<div class="item-block">3rd</div>
<div class="item-block">4th</div>
</div>
div.divFlexBox {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: flex-start;
align-content: flex-start;
}
div.divFlexBox .item-block {
display: inline-block;
width: 5em;
flex-flow: column wrap;
flex-grow: 1;
}
CSSHTML

FlexBox
● 他にできること
● 要素の順番の入れ替え
– order 属性で指定する
– HTMLの変更が不要
● 収まらない場合の改行の指定
– 応用するとレイアウトの切り替えもできる
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Flexible_boxes より

MediaQueries
● メディア特性の式により、使用されるCSSを切り替え
ることができる
● 何が嬉しいか
● 従来はonLoad()内でJavaScriptで画面の幅からゴリゴ
リやる必要があった

MediaQueries
<div id="divFlexBox">
<div id="item-1st" class="item-block">1st</div>
<div id="item-2nd" class="item-block">2nd</div>
<div id="item-3rd" class="item-block">3rd</div>
<div id="item-4th" class="item-block">4th</div>
<div id="item-5th" class="item-block">5th</div>
</div>
/* 画面が広いとき */
@media (min-width: 400px) {
#item-1st {
width: 100%;
}
#item-2nd { }
#item-3rd {
width: 50%;
flex-grow: 1;
}
#item-4th { }
#item-5th {
width: 100%;
}
}
/* 画面が狭い時 */
@media (max-width: 400px) {
div#divFlexBox .item-block {
width: 100%;
}
}
CSSHTML

Regions
● 一続きの文章を複数の領域に分割して表示できる
● 領域の形を自由に指定できる
● 今までは文字列の分割をJavaScriptで行わなければならなかっ
た。それは激しく泥臭かった。
1
2
3
4

Regions
<div id="source">
<p>Androidの1.6、2.0、3.0、4.0は
目に見えた変更が多く、発表の度にワクワク
（または大きな仕様変更に唖然と）したものだが、
4.0以降はそれが薄くなった気がする。
しかし同時期を境にiOSからその雰囲気を感じるように
なったので今こそiPhoneを買うべきなのかもしれない。
</p>
</div>
<div class="item-region">1st</div>
<div class="item-region">2nd</div>
</div>
<div class="item-region">3rd</div>
</div>
#source {
-webkit-flow-into: main-thread;
-moz-flow-into: main-thread;
flow-into: main-thread;
}
div.divFlexBox .item-region {
-webkit-flow-from: main-thread;
-moz-flow-from: main-thread;
flow-from: main-thread;
}
CSSHTML

Transform
● 要素の移動、回転、スケーリング、傾斜ができる
● 何が嬉しいか
● 昔はJavaScriptを用いても困難だった
● Canvasに文字を描画して変形しなければならなかった
● それはパフォーマンス的にも遅かった

Transform
<div id="outerblock">
<div id="mytext">
<p>Androidの1.6、2.0、3.0、4.0は目に見えた変更が多く、
発表の度にワクワク（または大きな仕様変更に唖然と）したものだが、
4.0以降はそれが薄くなった気がする。
しかし同時期を境にiOSからその雰囲気を感じるようになったので
今こそiPhoneを買うべきなのかもしれない。</p>
</div>
</div>
#mytext {
width: 10em;
transform:
translate(150px,-10px)
rotate(20deg)
skewX(-20deg);
}
CSSHTML

Animations
● Transition
● 状態遷移時の変化のアニメーションが行える
– 例）マウスカーソルを当てた時や押した時
● Animation
● 繰り返しや複数回のアニメーションが行える

Animation : transition
<div id="resizeBlock" class="outerBox">
<div class="animBox">Animation</div>
</div>
#resizeBlock .animBox {
width: 10em;
height: 2em;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 0s;
}
#resizeBlock .animBox:hover {
width: 20em;
height: 4em;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 0s;
}
CSSHTML

Animation: animation
<div id="resizingBlock" class="outerBox">
</div>
<div id="movingBlock" class="outerBox">
</div>
#resizingBlock .animBox {
animation-name: resizingKfs;
animation-duration: 1s;
animation-play-state: running;
animation-iteration-count: infinite;
}
@keyframes resizingKfs {
from { width: 10em; }
50% { width: 20em; }
to { width: 10em; }
}
#movingBlock .animBox {
animation-name: movingKfs;
animation-duration: 1s;
animation-play-state: running;
animation-iteration-count: infinite;
}
@keyframes movingKfs {
from { margin-left: 0em; margin-top: 0em; }
25% { margin-left: 15em; margin-top: 10em; }
75% { margin-left: 5em; margin-top: 10em; }
to { margin-left: 20em; margin-top: 0em; }
}
CSSHTML

まとめ
● レイアウトについて
● Media QueriesやFlex、Regionsを使えば、JavaScript
を使わずにスマートに書ける
● アニメーションについて
● transitionやanimationを使えば、JavaScriptを使わず
にスマートに書ける
● JavaScriptを使わずにスマートに書ける

ご清聴ありがとうございました
住友孝郎
@cattaka_net

今更ながらCSS3を試してみた

More Related Content

What's hot

Similar to 今更ながらCSS3を試してみた

More from Takao Sumitomo

今更ながらCSS3を試してみた

Editor's Notes