css3 design recipe

現場で使える！CSS3デザインレシピ

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

Frontrend in Sapporo 7/12/2013

イントロ

原一成 Hara KazunariWeb DeveloperCyberAgent, Inc.

CSS3 逆引きデザインレシピ

http://books.shoeisha.co.jp/book/b109516.html



近年の役割の変化

デザイナー

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

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

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

マークアップ、CSS、JavaScriptなど

近年の役割の変化

デザイナー

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

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

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

マークアップ、インタラクション、ハイパフォーマンス

フロントエンドの役割が増加

ディベロッパー

HTML/CSS/JavaScriptを理解し、使えるそれらの役割分担を適切におこなえる

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

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

サイトパフォーマンスを意識できるサーバサイドとの通信方法や役割分担を考えられる

CSSの立ち位置

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

「技術」コードを書く

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

「わかりやすい」

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

「わかりやすい」↓

「一貫性」と「適切な分離」

「一貫性」

コメント・改行・インデント

命名規則

プロパティ順

「一貫性」命名規則

text

途中で変えないプロジェクトに合わせる

.text

.text-‐warning

.txt-‐link

.button-‐primary

.button.primary

.button_info

.buttonWarning

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

/* left menu */#menu {}

/* right contents */#contents {}

/* button module */.button {}

コメント#main {__background: #f8f8f8; ↵__width: 90%;}

.quote::before,↵

.quote::after {__content: “”;}

改行・インデント

「一貫性」プロパティ順

Google HTML/CSS Style Guide http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

animation-‐webkit-‐appearanceappearancebackgroundbordercolordisplayfloat…

プリフィックスは無視

アルファベット順

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

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;}

/* primary button */.button-‐primary { background: #34b5d3; border: solid 1px #178ca8; color: #eee;}

/* normal button */.button-‐normal { background: #34b5d3; border: solid 1px #999; color: #fff;}

「適切な分離」セレクタは短く

<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」


border-‐radius: 80px 50px 20px 50px/ 40px 50px 50px 25px;

40 50

5025

80 50

2050


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);

color: #f3c;text-‐shadow: 3px 3px 0 #ff3, 6px 6px 0 #3f3, 9px 9px 0 #39f;

x y blur

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

background-‐image: linear-‐gradient( #6cf, rgba(51,102,255,0.8) );

background-‐image: -‐webkit-‐radial-‐gradient( rgba(102,204,255,.6), rgba(51,102,255,0.8) );

start end

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

background-‐color: #6cf;background-‐image: linear-‐gradient( to right, #ff9 50%, transparent 50% );background-‐size: 1em;

Repeat

1em

よく使うプロパティ「gradient」background-‐color: #6cf;background-‐image: 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 { background-‐image: linear-‐gradient(#34b5d3,#14a2c0); border: solid 1px rgba(51,51,51,0.1); color: #fff;}

ボタンを量産する/* primary */.button-‐primary { background-‐image: linear-‐gradient(#55c40d,#4dac26); border: solid 1px rgba(51,51,51,0.1); color: #fff;}/* warning */.button-‐warning { background-‐image: linear-‐gradient(#ff5d3c,#ff3400); border: solid 1px rgba(51,51,51,0.1); color: #fff;}/* still */.button-‐still { background-‐image: linear-‐gradient(#fff,#f8f8f8); border: solid 1px rgba(51,51,51,0.1); color: #666;}


/* info */.button-‐info { background-‐image: 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 { background-‐color: #006; backgroun-‐image: -‐webkit-‐radial-‐gradient( 50% 40%, rgba(255,255,255,0.3) 0, rgba(0,0,0,0.5) 100% );}


.box { background-‐color: #c90099; backgroun-‐image: -‐webkit-‐radial-‐gradient( 50% 40%, transparent 20%, #c09 100% ), -‐webkit-‐linear-‐gradient( left, #f9f 50%, #fff 50% ); background-‐size: 30px,100%;}


.box { background-‐color: #c90099; backgroun-‐image: -‐webkit-‐radial-‐gradient( 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; background-‐color: #ff0; background-‐image: 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でノートをつくる

CSSでノートをつくる

.note { background-‐color: #ffc; background-‐image: 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 { background-‐image: linear-‐gradient( transparent 31%, #ff3 31%, #ff3 61%, transparent 61% );}

.mark02 { border-‐bottom: 2px solid #f90; border-‐top: 2px solid #f90;}


.mark03 { background-‐color: #f9c; position: relative;}

.mark03::before,

.mark03::after { background-‐color: #f9c; content: ''; height: 1.1em; position: absolute; -‐webkit-‐transform: skew(10deg); width: 1em; z-‐index: -‐1;}

.mark03::before { left: -‐0.2em; top: 0;}

.mark03::after { bottom: 0; box-‐shadow: -‐2px 0 0 #f9c;}

吹き出しをつくる

.balloon::after { border-‐left: solid 7px transparent; border-‐right: solid 7px transparent; border-‐top: solid 10px #efefef; bottom: -‐10px; content: ""; height: 0; left: 50%; margin-‐left: -‐7px; position: absolute; width: 0;}

10

7 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%; -‐webkit-‐transform: 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; background-‐color: #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; …}

@-‐webkit-‐keyframes rotate-‐r { 0% { -‐webkit-‐transform: rotate(0); }

100% { -‐webkit-‐transform: rotate(360deg); }}

カウントダウンする

カウントダウンする

<li class="count-‐item">1</li><li class="count-‐item">2</li><li class="count-‐item">3</li><li class="count-‐item">4</li><li class="count-‐item">5</li><li class="count-‐item">6</li><li class="count-‐item">7</li><li class="count-‐item">8</li><li class="count-‐item">9</li><li class="count-‐item">10</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 */@-‐webkit-‐keyframes disappear { 0%, 50% { opacity: 1; } 100% { opacity: 0; }}

CSS3 逆引きデザインレシピ好評発売中！

セレクタ flexboxリストタグ・パンくず図形フォーム・表・グラフ設計パフォーマンスプリプロセッサスタイルガイドなど全81項目のサンプル集




css3 design recipe

Technology