SlideShare a Scribd company logo
現場で使える!
CSS3デザインレシピ
Frontrend in Sapporo 7/12/2013

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

原 一成
イントロ

原 一成

Hara Kazunari

Web Developer
CyberAgent, Inc.
イントロ

原 一成

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;
	
  	
  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”>
	
  	
  	
  	
  <p	
  class=”title”></p>
	
  	
  	
  	
  <img	
  class=”thumb”>
	
  	
  </li>
</ul>

.list	
  .item	
  .thumb	
  {}	
  /*	
  深い	
  
*/
.thumb	
  {}	
  /*	
  スコープ広い	
  */
「適切な分離」セレクタは短く
<ul	
  class=”list”>
	
  	
  <li	
  class=”item”>
	
  	
  	
  	
  <p	
  class=”title”></p>
	
  	
  	
  	
  <img	
  class=”thumb”>
	
  	
  </li>
</ul>

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

<ul	
  class=”list”>
	
  	
  <li	
  class=”list-­‐item”>
	
  	
  	
  	
  <p	
  class=”list-­‐title”></p>
	
  	
  	
  	
  <img	
  class=”list-­‐thumb”>
	
  	
  </li>
</ul>

.list-­‐thumb	
  {}
「デザイン」デザインを表現する
CSS3 デザインレシピ

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

80

50

40

50

25

50
50

20

border-­‐radius:
	
  	
  80px	
  50px	
  20px	
  50px/
	
  	
  40px	
  50px	
  50px	
  25px;
よく使うプロパティ「border-radius」
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;
よく使うプロパティ「border-radius」
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;
よく使うプロパティ「border-radius」
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;
よく使うプロパティ「border-radius」
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;
よく使うプロパティ「border-radius」
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;
よく使うプロパティ「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
background-­‐image:
	
  	
  -­‐webkit-­‐radial-­‐gradient(
	
  	
  	
  	
  rgba(102,204,255,.6),
	
  	
  	
  	
  rgba(51,102,255,0.8)
	
  	
  );
よく使うプロパティ「gradient」

Repeat

1em

background-­‐color:	
  #6cf;
background-­‐image:
	
  	
  linear-­‐gradient(
	
  	
  	
  	
  to	
  right,
	
  	
  	
  	
  #ff9	
  50%,
	
  	
  	
  	
  transparent	
  50%
	
  	
  );
background-­‐size:	
  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);
}
ボタンを量産する
/*	
  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	
  {
	
  	
  left:	
  -­‐0.2em;
	
  	
  top:	
  0;
}
.mark03::after	
  {
	
  	
  bottom:	
  0;
	
  	
  box-­‐shadow:	
  -­‐2px	
  0	
  0	
  #f9c;
}

.mark03::before,
.mark03::after	
  {
	
  	
  background-­‐color:	
  #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%;
	
  	
  -­‐webkit-­‐transform:	
  rotate(45deg);
	
  	
  width:	
  8px;
}
ランキングの順位をつける

body	
  {
	
  	
  counter-­‐reset:	
  num;
}
.item	
  {
	
  	
  counter-­‐increment:	
  num;
	
  	
  …
}
.item::after	
  {
	
  	
  background:	
  #fc3;
	
  	
  content:	
  counter(num);
	
  	
  …
}
ランキングの順位をつける

body	
  {
	
  	
  counter-­‐reset:	
  num;
}
.item	
  {
	
  	
  counter-­‐increment:	
  num;
	
  	
  …
}
.item::after	
  {
	
  	
  background:	
  #fc3;
	
  	
  content:	
  counter(num);
	
  	
  …
}
ランキングの順位をつける

body	
  {
	
  	
  counter-­‐reset:	
  num;
}
.item	
  {
	
  	
  counter-­‐increment:	
  num;
	
  	
  …
}
.item::after	
  {
	
  	
  background:	
  #fc3;
	
  	
  content:	
  counter(num);
	
  	
  …
}
ランキングの順位をつける

body	
  {
	
  	
  counter-­‐reset:	
  num;
}
.item	
  {
	
  	
  counter-­‐increment:	
  num;
	
  	
  …
}
.item::after	
  {
	
  	
  background:	
  #fc3;
	
  	
  content:	
  counter(num);
	
  	
  …
}
ランキングの順位をつける

body	
  {
	
  	
  counter-­‐reset:	
  num;
}
.item	
  {
	
  	
  counter-­‐increment:	
  num;
	
  	
  …
}
.item::after	
  {
	
  	
  background:	
  #fc3;
	
  	
  content:	
  counter(num);
	
  	
  …
}
ランキングの順位をつける

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項目のサンプル集

More Related Content

Viewers also liked

俺はMETAだ!
俺はMETAだ!俺はMETAだ!
俺はMETAだ!
Kazunari Hara
 
JSON Schema in Web Frontend #insideFE
JSON Schema in Web Frontend #insideFEJSON Schema in Web Frontend #insideFE
JSON Schema in Web Frontend #insideFE
Hiroyuki Anai
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
Takuya Hattori
 
WAI-ARIA珍プレー好プレー
WAI-ARIA珍プレー好プレーWAI-ARIA珍プレー好プレー
WAI-ARIA珍プレー好プレー
Mitsue-Links Co.,Ltd. Accessibility Department
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
Amazon Web Services Japan
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
Manabu Yasuda
 

Viewers also liked (6)

俺はMETAだ!
俺はMETAだ!俺はMETAだ!
俺はMETAだ!
 
JSON Schema in Web Frontend #insideFE
JSON Schema in Web Frontend #insideFEJSON Schema in Web Frontend #insideFE
JSON Schema in Web Frontend #insideFE
 
アメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpringアメブロの大規模システム刷新と それを支えるSpring
アメブロの大規模システム刷新と それを支えるSpring
 
WAI-ARIA珍プレー好プレー
WAI-ARIA珍プレー好プレーWAI-ARIA珍プレー好プレー
WAI-ARIA珍プレー好プレー
 
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
[AWSマイスターシリーズ] AWS CLI / AWS Tools for Windows PowerShell
 
エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離エンジニアとデザイナーとの距離
エンジニアとデザイナーとの距離
 

Similar to CSS3 Design Recipe

㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
Nishida Kansuke
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
littlebustersreply
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and ProgrammingTaku AMANO
 
First sass
First sassFirst sass
First sass
Toshiaki Sasaki
 
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
Horiguchi Seito
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようHiroaki Wakamatsu
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたShinichi Sato
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
Hayato Mizuno
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
 
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
silvers ofsilvers
 
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Chihiro Tomita
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
Hayato Mizuno
 
Hello css animation_public
Hello css animation_publicHello css animation_public
Hello css animation_public
Shinichiro Kumeuchi
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
Naoki Matsuda
 
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズ
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズMovable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズ
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズKunihiko Miyanaga
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
Naoki Matsuda
 

Similar to CSS3 Design Recipe (20)

㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき㉗HTML5+jQueryでお絵かき
㉗HTML5+jQueryでお絵かき
 
What's Sketch.app
What's Sketch.appWhat's Sketch.app
What's Sketch.app
 
CSS Design and Programming
CSS Design and ProgrammingCSS Design and Programming
CSS Design and Programming
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
Aaなゲームをjsで
AaなゲームをjsでAaなゲームをjsで
Aaなゲームをjsで
 
First sass
First sassFirst sass
First sass
 
Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>Sassをはじめからていねいに<概要−基礎編>
Sassをはじめからていねいに<概要−基礎編>
 
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみようJavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
 
Css3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみたCss3でキャラクターアニメーションに挑戦してみた
Css3でキャラクターアニメーションに挑戦してみた
 
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考えるReact で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
 
Sass(SCSS)について
Sass(SCSS)についてSass(SCSS)について
Sass(SCSS)について
 
なんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうんなんでCSSすぐ死んでしまうん
なんでCSSすぐ死んでしまうん
 
壊れやすいCSS
壊れやすいCSS壊れやすいCSS
壊れやすいCSS
 
ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方ロールオーバーのいろいろなやり方
ロールオーバーのいろいろなやり方
 
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
 
jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -jQuery Performance Tips – jQueryにおける高速化 -
jQuery Performance Tips – jQueryにおける高速化 -
 
Hello css animation_public
Hello css animation_publicHello css animation_public
Hello css animation_public
 
SVG MANIAX Ver.2 - Mars vanilla
SVG MANIAX Ver.2 -  Mars vanillaSVG MANIAX Ver.2 -  Mars vanilla
SVG MANIAX Ver.2 - Mars vanilla
 
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズ
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズMovable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズ
Movable Typeセミナー2011年4月20日 in 名古屋 アイデアマンズ
 
SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7SVG MANIAX - CSS Nite After dark7
SVG MANIAX - CSS Nite After dark7
 

More from Kazunari Hara

アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみアメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
 
俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法
Kazunari Hara
 
Watch the Time
Watch the TimeWatch the Time
Watch the Time
Kazunari Hara
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたKazunari Hara
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
Kazunari Hara
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
Kazunari Hara
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-Kazunari Hara
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
Kazunari Hara
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
Kazunari Hara
 
Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめ
Kazunari Hara
 

More from Kazunari Hara (11)

アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみアメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
 
俺の、プレゼン構築法
俺の、プレゼン構築法俺の、プレゼン構築法
俺の、プレゼン構築法
 
Watch the Time
Watch the TimeWatch the Time
Watch the Time
 
CA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかたCA流 フロントエンドエンジニアの働きかた
CA流 フロントエンドエンジニアの働きかた
 
Amebaプラットフォームの作りかた
Amebaプラットフォームの作りかたAmebaプラットフォームの作りかた
Amebaプラットフォームの作りかた
 
スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2スマートフォン時代のWeb制作術 Vol.2
スマートフォン時代のWeb制作術 Vol.2
 
スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1スマートフォン時代のWeb制作術 Vol.1
スマートフォン時代のWeb制作術 Vol.1
 
速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-速くなければスマフォじゃない - インターンバージョン-
速くなければスマフォじゃない - インターンバージョン-
 
Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~Native x Webでいいとこどり開発 ~ピグトーク~
Native x Webでいいとこどり開発 ~ピグトーク~
 
速くなければスマフォじゃない
速くなければスマフォじゃない速くなければスマフォじゃない
速くなければスマフォじゃない
 
Hybrid appのすすめ
Hybrid appのすすめHybrid appのすすめ
Hybrid appのすすめ
 

Recently uploaded

20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
Seiya Shimabukuro
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
ssuserfcafd1
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
Takuya Minagawa
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
Osaka University
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
Shinichi Hirauchi
 
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
iPride Co., Ltd.
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
kitamisetagayaxxx
 

Recently uploaded (14)

20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
20240621_AI事業者ガイドライン_セキュリティパートの紹介_SeiyaShimabukuro
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDDなぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
なぜそのDDDは効果が薄いのか?名ばかりDX案件での経験を踏まえて培った他の思考を交えた現代風?のDDD
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT  vol112 発表資料)
ろくに電子工作もしたことない人間がIoT用ミドルウェアを作った話(IoTLT vol112 発表資料)
 
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
生成AIの実利用に必要なこと-Practical Requirements for the Deployment of Generative AI
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
気ままなLLMをAgents for Amazon Bedrockでちょっとだけ飼いならす
 
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
Microsoft Azureで生成AIを使ってみた話 2024/6/14の勉強会で発表されたものです。
 
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
 

CSS3 Design Recipe