SlideShare a Scribd company logo
1 of 125
Download to read offline
第1回 Creators Meetup :



                StartUp Sass+Compass
                               ∼基本と活用∼




                                         大竹孔明

Sunday, 24 February 13
大竹 孔明 こうめ
     コーディングを中心に          Twitter : @Bamboo_C
     Web制作をしています         Facebook : komei.otake




Sunday, 24 February 13
ぴっちぴちの22歳です




Sunday, 24 February 13
Arcted
    arcted.jp




Sunday, 24 February 13
公開


                         NameCard.jp
                         http://name-card.jp




                               製作中


                         擬人化CSS
                         リファレンスサイト
                         http://www.facebook.com/
                              gcss.reference

Sunday, 24 February 13
現在のキャラの半数が




Sunday, 24 February 13
現在のキャラの半数が

                           未亡人




Sunday, 24 February 13
Sunday, 24 February 13
ぴっちぴちの22歳です




Sunday, 24 February 13
ご期待ください!




Sunday, 24 February 13
本日の内容

                 • 基本の記述方法の復習
                 • ファイルの管理と運用の注意点
                 • Compassを使おう


Sunday, 24 February 13
本日の内容

                 • 基本の記述方法の復習
                 • ファイルの管理と運用の注意点
                 • Compassを使おう


Sunday, 24 February 13
本日の内容

                 • 基本の記述方法の復習
                 • ファイルの管理と運用の注意点
                 • Compassを使おう


Sunday, 24 February 13
本日の内容

                 • 基本の記述方法の復習
                 • ファイルの管理と運用の注意点
                 • Compassを使おう


Sunday, 24 February 13
基本の記述方法の復習




Sunday, 24 February 13
DEMO




                                ネスト




Sunday, 24 February 13
CSS
                         .wrap {
                            width: 80px;
                            height: 80px;
                         }
                         .wrap .inner {
                            border: 1px solid #ededed;
                         }




Sunday, 24 February 13
SCSS
                         .wrap {
                            width: 80px;
                            height: 80px;
                            .inner {
                               border: 1px solid #ededed;
                            }
                         }



Sunday, 24 February 13
SCSS
                         .wrap {
                            width: 80px;
                                          入れ子に出来る
                            height: 80px;
                            .inner {
                               border: 1px solid #ededed;
                            }
                         }



Sunday, 24 February 13
SCSS              CSS

        .wrap {                 .wrap {
           width: 80px;            width: 80px;
           height: 80px;           height: 80px;
           .inner {             }
              border: 1px ..    .wrap .inner {
           }                       border: 1px soli..
        }                       }


Sunday, 24 February 13
DEMO




                         @media指定のネスト




Sunday, 24 February 13
CSS
                 .wrap {
                    width: 1000px;
                 }
                 @media screen and (max-width:600px) {
                  .wrap {
                     width: 100%;
                   }
                 }


Sunday, 24 February 13
SCSS

          .wrap {
             width: 1000px;
             @media screen and (max-width:600px) {
                width: 100%;
             }
          }




Sunday, 24 February 13
SCSS
                           入れ子に出来る
          .wrap {
             width: 1000px;
             @media screen and (max-width:600px) {
                width: 100%;
             }
          }




Sunday, 24 February 13
SCSS              CSS

       .wrap {                  .wrap {
          width: 1000px;           width: 1000px;
          @media screen a..     }
             width: 100%;       @media screen and..
          }                      .wrap {
       }                            width: 100%;
                                  }
                                }
Sunday, 24 February 13
DEMO




                            親セレクタの参照




Sunday, 24 February 13
CSS

          a{
             display: block;
          }
          a:hover {
             background: #ededed;
          }




Sunday, 24 February 13
SCSS

          a{
            display: block;
            &:hover {
              background: #ededed;
            }
          }




Sunday, 24 February 13
SCSS
                         入れ子に出来る
          a{
            display: block;
            &:hover {
              background: #ededed;
            }
          }




Sunday, 24 February 13
SCSS               CSS

            a{                    a{
              display: block;        display: block;
              &:hover {           }
                background: ...   a:hover {
              }                      background: # ...
            }                     }




Sunday, 24 February 13
DEMO




                                変数




Sunday, 24 February 13
CSS

          .wrap {
            background: #ededed;
          }
          .wrap a {
            color: green;
          }




Sunday, 24 February 13
SCSS
          $mainColor: #ededed;
          $keyColor: green;


          .wrap {
            background: $mainColor;
            a{
              $keyColor: green;
            }
          }
Sunday, 24 February 13
SCSS
          $mainColor: #ededed;
          $keyColor: green;


          .wrap {                定義した値を
            background: $mainColor;
            a{
              color: $keyColor;
            }
          }
Sunday, 24 February 13
SCSS
          $mainColor: #ededed;
          $keyColor: green;


          .wrap {                   指定できる
            background: $mainColor;
            a{
              color: $keyColor;
            }
          }
Sunday, 24 February 13
SCSS            CSS
     $mainColor: #ede..
     $keyColor: green;          .wrap {
                                  background: #..
     .wrap {                    }
       background: $..          .wrap a {
       a{                         color: green;
         $keyColor: g..         }
       }
     }
Sunday, 24 February 13
DEMO




                                演算




Sunday, 24 February 13
CSS


          .wrap {
            width: 80px;
            padding: 10px;
          }




Sunday, 24 February 13
SCSS
     $widthType1: 100px;


     .wrap {
       $paddingType1: 10px;
       width: $widthType1 - ( $paddingType1 * 2 );
       padding: $paddingType1;
     }


Sunday, 24 February 13
SCSS
         マイナス
     $widthType1: 100px;
                                    乗算
     .wrap {
       $paddingType1: 10px;
       width: $widthType1 - ( $paddingType1 * 2 );
       padding: $paddingType1;
     }


Sunday, 24 February 13
SCSS               CSS
            $widthType1: 100..

                                   .wrap {
            .wrap {
                                     width: 80px;
              $paddingType1 ..
                                     padding: 10px;
              width: $widthTy ..
                                   }
              padding: $padd ..
            }



Sunday, 24 February 13
DEMO




                         Mixin(ミックスイン)




Sunday, 24 February 13
@mixin rounded-top {
           $side: top;                           SCSS
           $radius: 10px;


               border-#{$side}-radius: $radius;
               -moz-border-radius-#{$side}: $radius;
               -webkit-border-#{$side}-radius: $radius;
          }


          #navbar li {
            @include rounded-top;
          }
Sunday, 24 February 13
@mixin rounded-top {
           $side: top;                           SCSS
           $radius: 10px;
                          @mixinで
                               ブロックを括って
               border-#{$side}-radius: $radius;
               -moz-border-radius-#{$side}: $radius;
               -webkit-border-#{$side}-radius: $radius;
          }
                               @includeで
          #navbar li {    呼び出す!
            @include rounded-top;
          }
Sunday, 24 February 13
CSS

          #navbar li {
             border-top-radius: 10px;
            -moz-border-radius-top: 10px;
            -webkit-border-top-radius: 10px;
          }




Sunday, 24 February 13
SCSS                   CSS
    @mixin rounded-top {
        $side: top;
        $radius: 10px;                #navbar li {
                                         border-top-ra ..
        border-#{$side}-radius: ..
                                        -moz-border-r ..
        -moz-border-radius-#{$ ..
        -webkit-border-#{$side} ..      -webkit-border ..
    }                                 }

    #navbar li {
            @include rounded-top ..
    }
Sunday, 24 February 13
DEMO




                         extend(エクステンド)




Sunday, 24 February 13
SCSS
          .button-type1 {
            width: 100px;
            border: 1px solid #5f5f5f;
          }


          .button-type2 {
            @extend .button-type1;
            border-color: #000;
          }


Sunday, 24 February 13
SCSS
          .button-type1 {
            width: 100px;
            border: 1px solid #5f5f5f;
          }

                                     値の継承
          .button-type2 {
            @extend .button-type1;
            border-color: #000;
          }


Sunday, 24 February 13
.button-type1 {                CSS
            width: 100px;
            border: 1px solid #5f5f5f;
          }


          .button-type2 {
            width: 100px;
            border: 1px solid #5f5f5f;
            border-color: #000;
          }

Sunday, 24 February 13
SCSS               CSS
                                .button-type1 {
       .button-type1 {
                                  width: 100px;
         width: 100px;
                                  border: 1px soli ..
         border: 1px soli ..
                                }
       }

                                .button-type2 {
       .button-type2 {
                                  width: 100px;
         @extend .button ..
                                  border: 1px soli ..
         border-color: #0 ..
                                  border-color: # ..
       }
                                }
Sunday, 24 February 13
DEMO




                           ちょっとした注意点




Sunday, 24 February 13
インポレーション




Sunday, 24 February 13
変数はプロパティ名にも使えます




Sunday, 24 February 13
#{} で囲むのを
                         わすれずに!
    $side: top;
    border-#{$side}-radius: $radius;




Sunday, 24 February 13
16進数でカラーを指定




Sunday, 24 February 13
$c1: #fff;


                         Compile
                                   white
Sunday, 24 February 13
!?


Sunday, 24 February 13
Rubyファイルをごにょごにょすれば

                              いけるらしいです

                         www.xenophy.com/sass/4148




Sunday, 24 February 13
#fffffeで逃げるという手m..




Sunday, 24 February 13
ファイルの管理と

                          運用の注意点




Sunday, 24 February 13
DEMO




                                ファイルの管理




Sunday, 24 February 13
先頭にアンダースコア( _ )が付い
                 ているファイルはコンパイルしても
                 CSSに変換されない、インポート専
                 用のファイルです。




Sunday, 24 February 13
これを利用して、用途によって切り
                 分けてみましょう。




Sunday, 24 February 13
ファイル構成

                         style.scss    _mq_tb.scss

                                       _mq_sp.scss

                                       _module.scss




Sunday, 24 February 13
ファイル構成

                         style.scss    _mq_tb.scss

                                       _mq_sp.scss

                                       _module.scss



                     コンパイルしても
                     CSSは書き出されない!
Sunday, 24 February 13
読み込み方法




                         @import “mq_tb”;




Sunday, 24 February 13
拡張子はいらないの?




Sunday, 24 February 13
.scss  .sass
                          両方いけるように
        拡張子は不要な設計となっているようです




Sunday, 24 February 13
DEMO




                                Output Style




Sunday, 24 February 13
Sunday, 24 February 13
NESTED




Sunday, 24 February 13
COMPACT




Sunday, 24 February 13
EXPANDED   いつもの!




Sunday, 24 February 13
COMPRESSED   高圧縮!




Sunday, 24 February 13
開発時     納品時



                               EXPANDED
                  EXPANDED         +
                               COMPRESSED




Sunday, 24 February 13
DEMO




                         コメントでしっかり管理




Sunday, 24 February 13
基本編でやったように、
                         Sassは今までのCSSと
                         少し書き方が違います




Sunday, 24 February 13
演算     extend
                         変数
                                ネスト   関数
                  Mixin
                                 親要素参照
                          if文

Sunday, 24 February 13
無敵だ



Sunday, 24 February 13
でもちょっと待って下さい




Sunday, 24 February 13
オレオレCSSは考えもの




Sunday, 24 February 13
最悪の場合
           他のスタッフはおろか
                          ?
           自分すら解読不可能に..




Sunday, 24 February 13
コメント管理は必須!




Sunday, 24 February 13
Compile




Sunday, 24 February 13
// のコメントは
                         SCSSに関するコメント




       /**/ のコメントは
       CSSに関するコメント


Sunday, 24 February 13
• Sassでの複数ファイルの管理は(_)
                         partials(パーシャル)を使う

                 • 適切なフォーマットでコンパイル
                 • 複雑過ぎる記述は避ける
                 • コメントはしっかり残す
Sunday, 24 February 13
Compassを使おう




Sunday, 24 February 13
DEMO




                          Compassの初期設定




Sunday, 24 February 13
ターミナルで下記のコマンドを入力



                gem update --system
                gem install compass


                         ※環境によって sudo を頭につけて実行しないと
                         出来ない場合もあります

Sunday, 24 February 13
早速使ってみましょう!




Sunday, 24 February 13
@importでCompassの機能を使う

             @import "compass/css3/border-radius";

             @import "compass/css3/";

             @import "compass/utilities"

             @import "compass"

             @import "compass/reset/";


Sunday, 24 February 13
@importでCompassの機能を使う

             @import "compass/css3/border-radius";

             @import "compass/css3/";

             @import "compass/utilities"
          border-radiusのみインポート
             @import "compass"

             @import "compass/reset/";


Sunday, 24 February 13
@importでCompassの機能を使う

             @import "compass/css3/border-radius";

             @import "compass/css3/";

             @import "compass/utilities"
          CSS3に関するミックスインを
             @import "compass"
          すべてインポート
          @import "compass/reset/";


Sunday, 24 February 13
@importでCompassの機能を使う

             @import "compass/css3/border-radius";

             @import "compass/css3/";

             @import "compass/utilities"

             @import "compass"
          clearfixなどのユーティリティ
             @import "compass/reset/";
          系をインポート
Sunday, 24 February 13
@importでCompassの機能を使う

          Compassのすべて機能を
          @import "compass/css3/border-radius";

             @import "compass/css3/";
          インポート
             @import "compass/utilities"

             @import "compass"

             @import "compass/reset/";


Sunday, 24 February 13
@importでCompassの機能を使う

           @import "compass/css3/border-radius";

           @import "compass/css3/";
          リセット用CSSをインポート
           @import "compass/utilities"

           @import "compass"

           @import "compass/reset/";


Sunday, 24 February 13
@compassで全ての機能をイン
                   ポートできますが、リセットのみは
                   個別でやらないとインポートできな
                   いので注意!




Sunday, 24 February 13
DEMO


                                Compass

                          CSS Sprite Tool


Sunday, 24 February 13
っていう位にこの機能が便利




Sunday, 24 February 13
img   sprite




                  イメージフォルダの直下に

                  sprite用のフォルダを作成

Sunday, 24 February 13
img   sprite   a.png

                                    b.png

                                    c.png



                  スプライトにしたい画像を
                  放り込む!

Sunday, 24 February 13
Compile



Sunday, 24 February 13
img   sprite               a.png

                                                b.png

                                                c.png


                                    spritehogehoge.png


          なんか出来てる!

Sunday, 24 February 13
Sunday, 24 February 13
早速使ってみよう!




Sunday, 24 February 13
画像の結合


                 $sprite: sprite-map("hoge/*.png");


                  sprite画像を入れたフォルダ名



Sunday, 24 February 13
画像の出力

   background-image: $sprite;
   background-position:
   sprite-position($sprite, file-name);

                         先程作った変数の名前

Sunday, 24 February 13
画像の出力

   background-image: $sprite;
   background-position:
   sprite-position($sprite, file-name);

                         出力したい画像のファイル名

Sunday, 24 February 13
横幅や縦のサイズを取得

    width: image-width("hoge/file-name.png");
    height: image-height("hoge/file-name.png");




                            画像のパス

Sunday, 24 February 13
他にもいくつか指定を加える


      display: block;
      background-repeat: no-repeat;




Sunday, 24 February 13
DEMO




                            Codekitでの利用




Sunday, 24 February 13
CodeKit




Sunday, 24 February 13
黒い画面、怖いですよね?




Sunday, 24 February 13
CodeKitなら




Sunday, 24 February 13
Sunday, 24 February 13
ドラッグアンドドロップ


                  CodeKit に D&D するだけ




Sunday, 24 February 13
新規にCompassプロジェクトを作成する




Sunday, 24 February 13
既存のプロジェクトでCompassを利用する




Sunday, 24 February 13
Compass をインストールする




Sunday, 24 February 13
Compassを設定する




                                        相対パス
                                         にする




Sunday, 24 February 13
Compassを設定する




                                        相対パス
                                         にする




Sunday, 24 February 13
CodeKitでできること
                 • Sassをはじめとする主要な    
                         CSS Preprocesserのコンパイル

                 • JSのファイルのミニファイ・統合
                 • ブラウザのオートリロード
                 • Compassなどの利用
                                             Etc.

Sunday, 24 February 13
DEMO




                                Bourbon




Sunday, 24 February 13
ありがとうございました!



                               大竹孔明

Sunday, 24 February 13

More Related Content

Viewers also liked

Google devtools活用術
Google devtools活用術Google devtools活用術
Google devtools活用術Yuki Tanaka
 
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え -
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え - ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え -
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え - Reimi Kuramochi Chiba
 
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!Shinsaku Chikura
 
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計マインドマップ発想法×ロジックツリー手法によるコンテンツ設計
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計Reimi Kuramochi Chiba
 
Prototyping by Adobe Illustrator
Prototyping by Adobe IllustratorPrototyping by Adobe Illustrator
Prototyping by Adobe IllustratorNaoki Kanazawa
 
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像Keisuke Imura
 
高速化はじめの一歩
高速化はじめの一歩高速化はじめの一歩
高速化はじめの一歩Yuki Nakane
 
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編regret raym
 
コミュニケーション能力を高めようヒッチハイク旅のススメ
コミュニケーション能力を高めようヒッチハイク旅のススメコミュニケーション能力を高めようヒッチハイク旅のススメ
コミュニケーション能力を高めようヒッチハイク旅のススメSosuke Eguchi
 
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)Seigo Tanaka
 
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれからクラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれからShohei Kobayashi
 
ハタラキカタに選択肢を
ハタラキカタに選択肢をハタラキカタに選択肢を
ハタラキカタに選択肢をKenji Ono
 
20131116 creators meetup
20131116 creators meetup20131116 creators meetup
20131116 creators meetupSeigo Tanaka
 
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話Masahiro Aoki
 
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメもう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ文樹 高橋
 
エビを飼ってABテストした話
エビを飼ってABテストした話エビを飼ってABテストした話
エビを飼ってABテストした話Yuki Kuramochi
 
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれ
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれlittleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれ
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれSeigo Tanaka
 
タスクの分別 フロー&ストック!
タスクの分別 フロー&ストック!タスクの分別 フロー&ストック!
タスクの分別 フロー&ストック!Reimi Kuramochi Chiba
 

Viewers also liked (20)

Creators meetup5
Creators meetup5Creators meetup5
Creators meetup5
 
Google devtools活用術
Google devtools活用術Google devtools活用術
Google devtools活用術
 
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え -
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え - ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え -
ものづくりに行き詰まったSTAR WARSファンへ捧げる - ジェダイマスター12の教え -
 
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!
オンラインタスク管理ツールをWebサービス開発と運用に役立てよう!
 
開発合宿のすゝめ
開発合宿のすゝめ開発合宿のすゝめ
開発合宿のすゝめ
 
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計マインドマップ発想法×ロジックツリー手法によるコンテンツ設計
マインドマップ発想法×ロジックツリー手法によるコンテンツ設計
 
Prototyping by Adobe Illustrator
Prototyping by Adobe IllustratorPrototyping by Adobe Illustrator
Prototyping by Adobe Illustrator
 
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
 
高速化はじめの一歩
高速化はじめの一歩高速化はじめの一歩
高速化はじめの一歩
 
今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編今から始めるPhotoshopによるWeb制作-初期設定編
今から始めるPhotoshopによるWeb制作-初期設定編
 
コミュニケーション能力を高めようヒッチハイク旅のススメ
コミュニケーション能力を高めようヒッチハイク旅のススメコミュニケーション能力を高めようヒッチハイク旅のススメ
コミュニケーション能力を高めようヒッチハイク旅のススメ
 
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)
20151017 Creators Meetup33 私をとりまく、とあるInternet of Thingsの話 (ただしThingsはウォンバット)
 
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれからクラウドコンピューティングでつくるビッグデータ解析のいまとこれから
クラウドコンピューティングでつくるビッグデータ解析のいまとこれから
 
ハタラキカタに選択肢を
ハタラキカタに選択肢をハタラキカタに選択肢を
ハタラキカタに選択肢を
 
20131116 creators meetup
20131116 creators meetup20131116 creators meetup
20131116 creators meetup
 
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話
Creators MeetUp#41 偶然を活かして仕上がってきた自分のキャリア形成のお話
 
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメもう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ
もう自分で考えるのはやめよう! クリエイティブ・アウトソーシングのススメ
 
エビを飼ってABテストした話
エビを飼ってABテストした話エビを飼ってABテストした話
エビを飼ってABテストした話
 
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれ
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれlittleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれ
littleBitsをより楽しく出来る拡張を 作ったり試したりしている話をあれこれ
 
タスクの分別 フロー&ストック!
タスクの分別 フロー&ストック!タスクの分別 フロー&ストック!
タスクの分別 フロー&ストック!
 

Recently uploaded

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-LoopへTetsuya Nihonmatsu
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法ssuser370dd7
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~arts yokohama
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦Sadao Tokuyama
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 

Recently uploaded (12)

「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
 
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
 
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
ARスタートアップOnePlanetの Apple Vision Proへの情熱と挑戦
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 

StartUp Sass + Compass [基本と活用]