1 of 23

CSS3 を使ったウェブ表現の新しいカタチ

Google Developer Advocate

Eiji Kitamura

Google Confidential and Proprietary

2 of 23

Introduction

Eiji Kitamura

Google Developer Advocate

​

Google+: Eiji Kitamura

Twitter: @agektmr

Google Confidential and Proprietary

3 of 23

Reviewing existing CSS3 features

  • new selectors
  • border-radius
  • box-shadow, text-shadow
  • text-overflow
  • text-stroke
  • gradation
  • opacity
  • WebFonts

Google Confidential and Proprietary

4 of 23

new selectors

  • E:visited < 訪問済みのリンク要素
  • E:hover < ホバーされている要素

​

  • E[type="text"] < 属性で指定可能に
  • E:not(s) < sに当てはまらない要素
  • E:nth-child(n) < n番目の子要素
  • E:nth-of-type(n) < n番目のE要素
  • E:checked < チェックされているE要素

​

  • E::before < 要素の前に表示するcontentを指定できる
  • E::after < 要素の後に表示するcontentを指定できる

​

サンプル

Google Confidential and Proprietary

5 of 23

角丸

  • 角丸の実現方法例

Google Confidential and Proprietary

6 of 23

border-radius

  • border-radius: 10px;
  • サンプル

Google Confidential and Proprietary

7 of 23

box-shadow, text-shadow

  • box-shadow: 10px 10px 10px gray;
  • サンプル

Google Confidential and Proprietary

8 of 23

text-overflow

  • text-overflow: ellipsis

Google Confidential and Proprietary

9 of 23

gradient

  • background: linear-gradient(top, #990, #066);

Google Confidential and Proprietary

10 of 23

opacity

  • opacity: 0.8;
  • background: rgba(0, 0, 255, 0.43);

Google Confidential and Proprietary

11 of 23

WebFonts

Google Confidential and Proprietary

12 of 23

text-stroke

div {

text-fill-color: black;

text-stroke-color: red;

text-stroke-width: 4.25px;

}

  • サンプル

Google Confidential and Proprietary

13 of 23

Transform, Transition, Animation

SliceBox

Zoetrope

スライド

Google Confidential and Proprietary

14 of 23

Filter

  • blur
  • saturate
  • hue-rotate
  • etc.

​

サンプル

Google Confidential and Proprietary

15 of 23

Multi-column

#mystory {

column-count: 2;

column-gap: 80px;

column-width: 200px;

column-rule: 1px solid black;

}

Google Confidential and Proprietary

16 of 23

Regions

#book-content {

+flow-into: book-text-flow;

}

.book-pages {

+flow-from: book-text-flow;

}

サンプル

Google Confidential and Proprietary

17 of 23

Flexbox

箱の中でオブジェクトを横に分散配置

Google Confidential and Proprietary

18 of 23

Flexbox

箱のなかでオブジェクトを縦に分散配置

Google Confidential and Proprietary

19 of 23

Flexbox

表示順序をセマンティクスを変えずに変更

Google Confidential and Proprietary

20 of 23

Flexbox

#box {

display: flex;

justify-content: center;

align-items: center;

}

.a { order: 2; }

.b { order: 1; }

.c { order: 3; }

<div id="box">

<div class="a">A</div>

<div class="b">B</div>

<div class="c">C</div>

</div>

Google Confidential and Proprietary

21 of 23

Flexbox でこんなことも

Google Confidential and Proprietary

22 of 23

Flexbox でこんなことも

div {

display: flex;

width: calc(100% - 4em);

height:calc(100% - 4em);

border: 1em solid blue;

border-radius:50%;

margin: auto;

}

div#demo {

width:9em;

height:9em;

}

<div id="demo">

<div>

<div></div>

</div>

</div>

​

Google Confidential and Proprietary

23 of 23

How to work with DevTools

  • DOM エレメントの選択
  • CSS スタイルの確認
  • CSS プロパティの微調整
  • ローカルでの変更履歴確認
  • 変更内容の保存

Google Confidential and Proprietary