CSS3 Design Recipe

現場で使える！
CSS3デザインレシピ
Frontrend in Sapporo 7/12/2013

株式会社サイバーエージェント

原一成

イントロ

原一成

Hara Kazunari

Web Developer
CyberAgent, Inc.

CSS3 逆引きデザインレシピ

近年の役割の変化
マークアップ、CSS、JavaScriptなど

デザイナーディベロッパー

デザイン、レイアウト、マークアップ、
CSS

エンジニア

サーバサイドプログラミン
グ、DBなど

近年の役割の変化
マークアップ、インタラクション、
ハイパフォーマンス

デザイナー

ディベロッパーエンジニア

デザイン、ユーザー体験デザイン、
高度なイラストレーション

サーバサイドプログラミン
グ、API作成、データスト
ア

フロントエンドの役割が増加
HTML/CSS/JavaScriptを理解し、
使える

HTML/CSSでユー
ザーインターフェー
スを作成できる

それらの役割分担を適切におこなえる

ディベロッパー

サイトパフォーマンスを意識できる

適切で効果的なインタ
ラクションを作れる

サーバサイドとの通信方法や役割分担
を考えられる

CSSの立ち位置

「技術」と「デザイン」の間

「技術」コードを書く

「わかりやすい」コードを

「わかりやすい」

「わかりやすい」コードを

「わかりやすい」
↓
「一貫性」と「適切な分離」

「一貫性」

命名規則
コメント・改行・インデント
プロパティ順

「一貫性」命名規則
途中で変えない

プロジェクトに合わせる

.text
.text-‐warning
.txt-‐link
.button-‐primary
.button.primary
.button_info
.buttonWarning

「一貫性」コメント・改行・インデント

コメント

改行・インデント

/*
left
menu
*/
#menu
{}

#main
{
__background:
#f8f8f8;
↵
__width:
90%;
}

/*
right
contents
*/
#contents
{}
/*
button
module
*/
.button
{}

.quote::before,↵
.quote::after
{
__content:
“”;
}

「一貫性」プロパティ順
アルファベット順
animation
-‐webkit-‐appearance
プリフィックスは無視
appearance
background
border
color
display
float
…
Google HTML/CSS Style Guide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

「適切な分離」

プロパティは最小限で
セレクタは短く

「適切な分離」プロパティは最小限で
/*
button
common
*/
.button
{

appearance:
none;

background:
#34b5d3;

border:

solid
1px
#999;

border-‐radius:
2px;

color:
#fff;

cursor:
pointer;

padding:
8px
16px;
}

/*
primary
button
*/
.button-‐primary
{

background:
#34b5d3;

border:
solid
1px
#178ca8;

color:
#eee;
}
/*
warning
button
*/
.button-‐warning
{

background:
#ff5d3c;

border:
solid
1px
#cf3c20;

color:
#ccc;
}

「適切な分離」プロパティは最小限で
/*
button
common
*/
.button
{

appearance:
none;

border-‐radius:
2px;

cursor:
pointer;

padding:
8px
16px;
}

/*
normal
button
*/
.button-‐normal
{

background:
#34b5d3;

border:
solid
1px
#999;

color:
#fff;
}
/*
primary
button
*/
.button-‐primary
{

background:
#34b5d3;

border:
solid
1px
#178ca8;

color:
#eee;
}

「適切な分離」セレクタは短く
<ul
class=”list”>

<li
class=”item”>



<img
class=”thumb”>

</li>
</ul>

.list
.item
.thumb
{}
/*
深い

*/
.thumb
{}
/*
スコープ広い
*/

「適切な分離」セレクタは短く
<ul
class=”list”>

<li
class=”item”>



<img
class=”thumb”>

</li>
</ul>

.list
.item
.thumb
{}
/*
深い

*/
.thumb
{}
/*
スコープ広い
*/

<ul
class=”list”>

<li
class=”list-‐item”>



<img
class=”list-‐thumb”>

</li>
</ul>

.list-‐thumb
{}

「デザイン」デザインを表現する

CSS3 デザインレシピ

よく使うプロパティ

よく使うプロパティ「border-radius」


80

50

40

50

25

50
50

20

border-‐radius:

80px
50px
20px
50px/

40px
50px
50px
25px;

border-‐radius:

80px
50px
20px
50px/

40px
50px
50px
25px;
border-‐radius:
4px;
border-‐radius:
50%;
border-‐radius:
50px
50px
0
0;
border-‐radius:
100%
0
0
0;

よく使うプロパティ「shadow」

box-‐shadow:

0
1px
10px
rgba(0,0,0,0.2);
x

y

blur

color:
#f3c;
text-‐shadow:

3px
3px
0
#ff3,

6px
6px
0
#3f3,

9px
9px
0
#39f;

よく使うプロパティ「gradient」

background-‐image:

linear-‐gradient(

#6cf,
rgba(51,102,255,0.8)
end

); start

-‐webkit-‐radial-‐gradient(

rgba(102,204,255,.6),

rgba(51,102,255,0.8)

);


Repeat

1em

background-‐color:
#6cf;

linear-‐gradient(

to
right,

#ff9
50%,

transparent
50%

);
background-‐size:
1em;

#6cf;

linear-‐gradient(

rgba(255,255,51,0.4),

rgba(255,51,204,0.4),

rgba(255,153,255,0.4),

rgba(102,204,255,0.4)

),

linear-‐gradient(to
left,

rgba(255,255,51,0.4),

rgba(255,51,204,0.4),

rgba(255,153,255,0.4),

rgba(102,204,255,0.4)

),

linear-‐gradient(to
right,

rgba(255,255,51,0.4),

rgba(255,51,204,0.4),

rgba(255,153,255,0.4),

rgba(102,204,255,0.4)

);

よく使うプロパティ「opacity」

.photo-‐item
{

opacity:
0.6;

transition:
opacity
0.2s;
}
.photo:hover
{

opacity:
1;
}

よく使う擬似要素「before/after」

.quote::before,
.quote::after
{

background:
#ccc;

border-‐radius:
50%;

color:
#666;

position:
absolute;

…
}

.quote::before
{

content:
“201C”;

left:
0;

top:
0;
}
.quote::after
{

bottom:
0;

content:
“201D”;

right:
0;
}

よく使う擬似要素「before/after」

よく使う値「rgba」

.header::before
{

border-‐radius:
50%;

box-‐shadow:

10px
-‐105px
0
rgba(204,0,204,0.2),

30px
-‐200px
0
rgba(204,102,204,0.1),

-‐30px
-‐290px
0
rgba(204,102,204,0.1),

190px
-‐250px
0
rgba(204,102,204,0.1),

270px
-‐320px
0
rgba(204,0,204,0.2),

450px
-‐100px
0
rgba(204,0,204,0.2);

content:
‘’;

height:
100px;

width:
100px;

…
}

CSS3 デザインレシピ

デザインサンプル

ボタンを量産する
.button
{

-‐webkit-‐appearance:
none;

border-‐radius:
2px;

cursor:
pointer;

padding:
8px
16px;
}
/*
info
*/
.button-‐info
{


linear-‐gradient(#34b5d3,#14a2c0);

border:
solid
1px
rgba(51,51,51,0.1);

color:
#fff;
}

/*
primary
*/
.button-‐primary
{


linear-‐gradient(#55c40d,#4dac26);

border:
solid
1px
rgba(51,51,51,0.1);

color:
#fff;
}
/*
warning
*/
.button-‐warning
{


linear-‐gradient(#ff5d3c,#ff3400);

border:
solid
1px
rgba(51,51,51,0.1);

color:
#fff;
}
/*
still
*/
.button-‐still
{


linear-‐gradient(#fff,#f8f8f8);

border:
solid
1px
rgba(51,51,51,0.1);

color:
#666;
}

/*
info
*/
.button-‐info
{


linear-‐gradient(#34b5d3,#14a2c0);

border:
solid
1px
rgba(51,51,51,0.1);

color:
#fff;
}
.button-‐info:hover
{

background:
#14a2c0;

color:
rgba(255,255,255,0.7);
}
.button-‐info:disabled
{

background:
#a2dbe7;

color:
rgba(255,255,255,0.4);
}

魅力的な背景をつくる

.box
{

#006;

backgroun-‐image:


50%
40%,

rgba(255,255,255,0.3)
0,

rgba(0,0,0,0.5)
100%

);
}


.box
{

#c90099;

backgroun-‐image:


50%
40%,

transparent
20%,

#c09
100%

),

-‐webkit-‐linear-‐gradient(

left,

#f9f
50%,

#fff
50%

);

background-‐size:
30px,100%;
}


.box
{

#c90099;

backgroun-‐image:


50%
40%,

transparent
20%,

#c09
100%

),

-‐webkit-‐linear-‐gradient(

#f9f
50%,

#fff
50%

);

background-‐size:
100%,30px;
}

いろんなテイストの文字をつくる

.text
{

color:
#242424;

font-‐family:

"league-‐gothic",

sans-‐serif;

text-‐shadow:
0
1px
1px
#4a4a4a;
}


.text
{

color:
#444;

font-‐family:

maven-‐pro,
sans-‐serif;

text-‐shadow:

1px
1px
1px
rgba(0,0,0,0.6),

-‐1px
-‐1px
1px

rgba(255,255,255,0.4);
}


.text
{

color:
#fff;

font-‐family:

'Freckle
Face',
cursive;

text-‐shadow:

0
-‐1px
5px
#fff,

0
-‐5px
10px
#ff0,

0
-‐10px
25px
#f80,

0
-‐20px
50px
#f00;
}


.text
{

color:
#fff;

font-‐family:

pt-‐sans-‐narrow,
sans-‐serif;

text-‐shadow:

0
0
5px
#fff,

0
0
10px
#fff,

0
0
20px
#ff3ba1,

0
0
40px
#ff3ba1,

0
0
50px
#ff3ba1,

0
0
80px
#ff3ba1;
}


.icon-‐star
{

-‐webkit-‐background-‐clip:
text;

#ff0;


linear-‐gradient(transparent,
rgba(255,255,255,0.2)),

linear-‐gradient(transparent
50%,
#adff4f
50%);

background-‐size:
100%,
0.1em;

font-‐family:
"FontAwesome";

-‐webkit-‐text-‐fill-‐color:
transparent;
}

CSSでノートをつくる

.note
{

#ffc;


linear-‐gradient(

#efefef
1px,
transparent
1px

),

linear-‐gradient(

#ffffe6
0,
#ffc
100%

);

background-‐position:
0
-‐1px,
0;

background-‐size:
2em
2em,
100%;

font-‐size:
1em;

padding:
0
2em;

…
}

文字にマーカーをつけて目立たせる

.mark01
{


linear-‐gradient(

transparent
31%,

#ff3
31%,

#ff3
61%,

transparent
61%

);
}
.mark02
{

border-‐bottom:
2px
solid
#f90;

border-‐top:
2px
solid
#f90;
}

.mark03
{

#f9c;

position:
relative;
}

.mark03::before
{

left:
-‐0.2em;

top:
0;
}
.mark03::after
{

bottom:
0;

box-‐shadow:
-‐2px
0
0
#f9c;
}

.mark03::before,
.mark03::after
{

#f9c;

content:
'';

height:
1.1em;

position:
absolute;

-‐webkit-‐transform:
skew(10deg);

width:
1em;

z-‐index:
-‐1;
}

吹き出しをつくる

.balloon::after
{

border-‐left:
solid
7px
transparent;

border-‐right:
solid
7px
transparent;

border-‐top:
solid
10px
#efefef;

bottom:
-‐10px;

content:
"";

height:
0;
10

left:
50%;

margin-‐left:
-‐7px;
7

position:
absolute;

width:
0;
}

7

ディスクロージャをつける

.list::after
{

content:
"";

border-‐right:
2px
solid
#ccc;

border-‐top:
2px
solid
#ccc;

height:
8px;

margin:
-‐4px
0
0;

position:
absolute;

right:
10px;

top:
50%;

rotate(45deg);

width:
8px;
}

ランキングの順位をつける

body
{

counter-‐reset:
num;
}
.item
{

counter-‐increment:
num;

…
}
.item::after
{

background:
#fc3;

content:
counter(num);

…
}

ローディングインジケータをつくる


.loading-‐bar::before
{

-‐webkit-‐animation:
width-‐0to100
1s
infinite
ease-‐out;

#6cf;

…
}
@-‐webkit-‐keyframes
width-‐0to100
{

0%
{

width:
0;

}

100%
{

width:
100%;

}
}


.loading-‐circle
{

-‐webkit-‐animation:
rotate-‐r
0.9s
infinite
linear;

border:
3px
solid
#6cf;

border-‐radius:
50%;

border-‐right-‐color:
transparent;

border-‐right-‐width:
1px;

…
}
rotate-‐r
{

0%
{

rotate(0);

}

100%
{

rotate(360deg);

}
}

カウントダウンする
<li
class="count-‐item">1</li>
<li
<li
<li
<li
<li
<li
<li
<li
<li

.count-‐item
{

opacity:
0;
}

カウントダウンする
/*
set
animation
*/
.count-‐item
{

-‐webkit-‐animation-‐duration:
1s;

-‐webkit-‐animation-‐name:
disappear;

-‐webkit-‐animation-‐timing-‐function:
linear;
}
.count-‐item:nth-‐child(9)
{

-‐webkit-‐animation-‐delay:
1s;
}
.count-‐item:nth-‐child(8)
{

-‐webkit-‐animation-‐delay:
2s;
}
/*
key
frames
*/
disappear
{

0%,
50%
{

opacity:
1;

}

100%
{

opacity:
0;

}
}

CSS3 逆引きデザインレシピ好評発売中！
セレクタ
ﬂexbox
リスト
タグ・パンくず
図形
フォーム・表・グラフ
設計
パフォーマンス
プリプロセッサ
スタイルガイド
など全81項目のサンプル集

CSS3 Design Recipe

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (6)

Similar to CSS3 Design Recipe

Similar to CSS3 Design Recipe (20)

More from Kazunari Hara

More from Kazunari Hara (11)

Recently uploaded

Recently uploaded (8)

CSS3 Design Recipe