LPシリーズの32弾は、Sassにフォーカスします。このイベントは終了しました。
フォローアップ
本イベントは終了しました。
ツイートは下記にまとめました。
次のブログで取り上げていただきました。ありがとうございます。
- 【レポート】CSS Nite LP, Disk 32「Sass」 #cssnite_lp32 - ProjectDD
- CSS Nite LP, Disk 32: Sassに行ってきた #cssnite_lp32｜とあるWEBデザイナーの日常
- CSS Nite LP32, Disk 32 : Sass レポート #cssnite_lp32 | Megnet
フォローアップ
- （1）谷 拓樹さん（サイバーエージェント ）
- （2）柴田 大樹さん（unCopi）
- （3）黒野 明子さん（crema design）
- （4）森田 壮さん（Sou-Lab）
- （5）坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド）
- （6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）
- （7）富田 梓さん（LINE）
- （8）高津戸 壮さん（ピクセルグリッド ）
概要
| イベント名 | CSS Nite LP, Disk 32: Sass |
|---|---|
| 日時 | 2014年2月15日（土）13:30-19:30（開場13:10） |
| 会場 | ベルサール九段 イベントホール |
| 定員 | 240名 |
| 出演 | 谷 拓樹（サイバーエージェント）、 柴田 大樹（アンコピ）、 森田 壮（ソウラボ）、 西畑 一馬（まぼろし）、 木村 哲朗（まぼろし）、 富田 梓（LINE）、 坂巻 翔大郎（ピクセルグリッド）、 山田 敬美（ピクセルグリッド）、 高津戸 壮（ピクセルグリッド） 黒野 明子（crema design） |
| 司会進行 | 鷹野 雅弘（スイッチ）、 山本 和泉（#fc0） |
| 主催 | CSS Nite実行委員会 |
| 企画協力 | まぼろし |
| 協賛 | WACAウェブ解析士協会、 NTTレゾナント（AppKitBox）、 Webクリエイター能力認定試験（サーティファイ）、 クラウドワークス、 ソシム、 ウェブ担当者通信 、 日本Web協会（旧「日本Webソリューションデザイン協会」、 サイバーガーデンbiz |
| プレゼント協賛 | awesome! クリエイターズショップ、 インプレスジャパン、 マイナビ |
| 参加費 | 9,000円（事前決済） 10,000円（当日枠） 3,000円（フォローアップ参加） |
| 事前登録 | 必要 |
| 備考 | スクール形式（=机があります、3人がけ） |
| Facebookページ | |
| ハッシュタグは #cssnite_lp32 です。 | |
| URL | https://cssnite.jp/lp/lp32/ |
| 懇親会 | セミナー終了後に懇親会を予定しています。 |
会社名のうち「株式会社」などは省いています。
予告なくセミナーイベントの仕様が変更になることがあります。
修正事項は、開催までにお送りするカウントダウンメール（やFacebookイベントページ、Twitterなど）でお知らせしていますので、ご一読ください。
早割（早期お申し込みによる割引）は、お申し込み期日でなく、決済ベースでの適用ですのでご注意ください。
セッション概要と 出演者のプロフィール
2014年05月08日 時点での最新情報です。 セッションタイトル、内容、出演者は、状況に応じて変更する可能性があります。なお、プロフィールは、本セミナーイベント開催時のものです。
対象、レベル
これからSass（およびCSSプリプロセッサー）をはじめる方も視野に入れつつ、1日で集中的に学んでいただけるように組み立てを企画しています。
下記の書籍などでの予習もオススメします。
- 『Web制作者のためのSassの教科書』（インプレスジャパン）
- 『Sass入門 ～より効率的なCSSコーディング』（技術評論社）
Why Sass?
この数年でCSSプリプロセッサが徐々に開発の現場で使われはじめています。今からでも間に合うCSS開発の効率化のための、より良いSassの使い方・導入について学ぶ前に、なぜSassなのか、Sassで何ができるのかをお話します。
谷 拓樹（たに・ひろき）
株式会社サイバーエージェント
フロントエンドエンジニア
中小企業向けのアプリケーション開発、スタートアップでのスマートフォンサイト制作などを経て、現在はスマートフォンアプリの開発、テクニカルディレクションを担当している。主な著書に「魅せるiPhoneサイト」「スマートフォン制作の教科書（共著）」。
CSSがもっとラクに書ける！これから始めるSassの書き方
CSSで同じスタイルを何度も書くようなことがありませんか？ CSSで幅の計算ができたら？普段CSSを書く上で不便に感じていることはSassを使うことで解決できます。
本セッションでは、Sassをこれから使ってみるという人のために、Sassの構文がコンパイル（変換）でCSSがどのように変わるのか、基本的な書き方を紹介します。
柴田 大樹 （しばた・ひろき）
Webデザインのタネの中の人。フリーランスWebデザイナー。
2005年よりWeb担当者としてECサイトを運営後、2009年キュープラス株式会社に入社。小〜中規模のECサイト、ランディングページ、Webシステムのインタフェースのデザイン・コーディングを担当し、2013年独立。
Sassは2012年から業務に活用し、新規サイトの制作はもちろん既存サイトのSassで管理できるように書き換えをしたり、2013年に社内勉強会用に作成したスライド「ネストを覚えた人のためのSassの便利な使い方」をSlideShareで発表。
Sassにもっと便利な機能をプラス！ Compassを使ってラクしましょ♡
CSS Spriteを自分で計算して作ったけど、修正指示が入ったら変更作業が大変！ たくさんあるベンダープレフィックスをいちいち書くのは面倒くさい！ Compassには、そんな面倒を解決する便利機能がたくさん用意されています。
その中でもお役立ちなものをデモ付きでご紹介しましょう。
黒野 明子（くろの・あきこ）
1973年生まれのフリーランスWebデザイナー。
1995年武蔵野美術大学短期大学部専攻科グラフィックデザインコース修了。ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webデザイン・企画を中心に、DTPデザインなども行う。
ロクナナワークショップにて「黒野明子のIllustratorとPhotoshop基本講座」を月一回開講中。
来春『 デザインの学校 これからはじめるIllustrator&Photoshopの本（CC対応）（技術評論社）』が発売予定にて、サンプルデータを準備する日々。
Sass/Compassの導入と環境構築
Sass/Compassを導入する際に、一番抵抗を感じるのが黒い画面での導入かもしれません。しかし、実際は一行のコマンドを入力するだけの簡単な作業です。また、つねにコマンドを打ち込むようなこともありません。
導入と環境構築について、ラクするTipsと合わせて紹介いたします。
森田 壮（もりた・そう）
フリーランスWebデザイナー／ディレクター
アパレル会社のEC担当からWeb制作の世界へ。その後、デジタルハリウッドを卒業し、制作会社を経てフリーランスへ。企画からデザイン、コーディング、構築までサイト制作全般を担当。制作の他にも、講師業や株式会社フィフティフォレストを設立しアクセサリーのEC販売などをしている。
共著書に『Web制作者のためのSassの教科書』（インプレスジャパン）。
コピペで使える！変数とmixin！
普段書いているようなCSSをサンプルに、
コピペで使えるmixinや変数などを使い、面倒な記述をラクにする方法を紹介します。
坂巻 翔大郎（さかまき・しょうたろう）
株式会社ピクセルグリッド
フロントエンドエンジニア
大手ソフトウェアダウンロード販売会社、Web制作会社などで、マークアップエンジニア、プログラマ、サービス企画、ディレクターを経験。2013年、株式会社ピクセルグリッドに入社。HTML、CSS、JavaScriptなどをオールラウンドに担当。とりわけ、プログラマブルなCSSの設計、実装を得意とする。
趣味で作成したゲーム「CSS PANIC」は、JavaScriptを一切使わず、HTMLとCSSのみで実装。海外サイトで紹介されるなど話題となった。
山田 敬美（やまだ・たかみ）
株式会社ピクセルグリッド
フロントエンドエンジニア
Web制作会社にて自社サービスのHTML/CSSコーダーを数年間経験後、専門学校にてプログラミングの基礎を1年間学ぶ。2014年に株式会社ピクセルグリッドの新卒フロントエンド・エンジニアとしてWebの世界に返り咲く。
共著書に『Sass入門 ～より効率的なCSSコーディング』（技術評論社）
Sass/Compass よくあるトラブルと解決方法・回避方法
SassやCompassを導入するにあたって、CSS以上のトラブルを不安に思われる方も多いことでしょう。
本セッションでは、わたしたち「まぼろし」での経験を交えながら、Sass/Compassを用いて制作する際によくあるトラブルについて、その解決方法・回避方法を具体的にご紹介します。
木村 哲朗（きむら・てつろう）
株式会社まぼろし
フロントエンドエンジニア
1980年、東京都文京区生まれ。企業サイトや動画サイトの運用更新を経験ののち、2012年5月に株式会社まぼろしへジョイン。主にWebサービス・アプリケーションの仕組みや構成についての設計および、HTML/CSS/JavaScript を用いた実装を行う。
また、写真の技能を習得しているため、ポートレートや商材などの撮影にも対応が可能。
Twitter: @haribote_nobody
西畑 一馬（にしはた・かずま）
JavaScript / Ajaxを利用したWebアプリケーション制作やCSS3 / HTML5を利用したサイト作成を業務で行い、個人でも書籍や雑誌の執筆、Webクリエイター向けの講座 / セミナーなどの活動を行っている。
主な著書に『Web制作の現場で使う jQueryデザイン入門』、『jQuery Mobile スマートフォンサイト デザイン入門』がある。
Sassの日常の運用
LINE株式会社での導入事例をサンプルに、職種や環境、技術レベルの異なる複数の作業者がかかわる環境で、どのように導入し、運用を続けているかを、社内プロジェクト全般で利用している自社ライブラリとあわせてご紹介します。
富田 梓（とみた・あずさ）
LINE株式会社
マークアップエンジニア
ひょっこり生まれて気がつくとWebの世界に。Web制作会社にてコーディング、ディレクション業務に携わった後、NAVER Japan（現LINE株式会社）にMEとして入社。関連サイトのHTML/CSSのほか、社内向けのsassライブラリの構築/運用業務に携わる。
共著書に『Sass入門 ～より効率的なCSSコーディング』(技術評論社)
HTMLテンプレートの設計
Sassを使おうが使わまいが、重要なことがあります。それは、HTMLとCSSを、どのように考えて書くかという設計です。Sassは、CSSを書くの を大いに手伝ってくれる、便利な道具です。しかし、根本の設計ができていなければ、サイトのコードはどんどん複雑になっていき、いずれは破綻します。泥の沼の上に高級住宅を建てても、崩れていくのは明白です。どのように考え、HTMLとCSSを書いていけばよいのか、その方法を考えます。
高津戸 壮（たかつど・たけし）
株式会社ピクセルグリッド
フロントエンドエンジニア
Web製作会社でHTML、CSS、JavaScriptエンジニアとして経験を積んだのち、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くの企業サイト、WebサービスにおけるHTML実装に携わってきた。現在は主にJavaScriptが絡むUI実装全般の業務を行っている。自社サービス CodeGrid にて技術情報の配信も行っている。
Twitter: @Takazudo
著書に『Webデザイナーのための jQuery入門』（技術評論社）。
参加費とお申し込み
CSS Nite LP32 は有料のイベントです。ご参加いただくには参加登録と事前決済が必要です。
参加費
- 9,000円（事前決済）
- 10,000円（当日枠）
8,000円（1月15日15時まで）終了7,000円（12月13日15時まで）終了
懇親会（3,500円）と一緒に事前決済されると、ちょっとお得です。
セミナー+懇親会セットの受付は終了しました。
| セミナーのみ | セミナー+懇親会 | フォローアップ参加 | |
|---|---|---|---|
| 12月13日15時決済まで | 7,000円 | 10,000円 | 3,000円 |
| 1月15日15時決済まで | 8,000円 | - | |
| それ以降（事前決済） | 9,000円 | - | |
| 当日枠 | 10,000円 | ||
| それ以降 | 3,500円 |
なお、ご参加はお支払い済みの方から、参加確定します。
振込後に、こちらのフォームからご連絡いただけると助かります。
決済方法
お申し込みからビジネスデーで3日以内の決済をお願いします。
- PayPal（クレジットカード）
- 銀行振込
キャンセル待ちについて
- 繰り上げが可能になった場合、ご登録いただいたメールアドレスにご連絡します。
決済に関して
- 銀行振込の場合、振込手数料はご負担ください（会社から数名でご参加の場合、まとめて振込可能です）。
- PayPal決済の場合、1名ずつの決済をお願いします。
- 決済などの運営は「株式会社スイッチ」が行います。PayPalおよび銀行振込の支払先にもなります。
- お申し込みからビジネスデーで3日以内の決済をお願いします。社内の稟議の関係など、ご事情がある場合には、ご一報ください。なお、早期割引などは、決済日ベースです。決済いただく日程によっては、差額が発生することがあります。
決済のご確認（入金確認）
- PayPalでの決済
- PayPalからの自動返信メールをもって入金確認とさせていただきます。
- 銀行振込での決済
- 確認取れ次第、入金確認メールをお送りします。お振り込み後、3日から1週間ほどかかることもあります。
お願い
お申し込み前に、下記3件からのアドレスからのメール受信可能にしておいてください。
- seminar@cssnite.jp：
カウントダウンメール、フォローメールの配信メールアドレスです｡ - cssnite@gmail.com：
お申し込みの自動返信メールや受講票、お問い合わせなどの配信メールアドレスです｡ - cssnite.payment@gmail.com：
PayPal決済の自動返信メール、銀行振込確認メールの配信メールアドレスです｡
フォローアップ参加
CSS Niteの有料版は、およそ90日後に、スライド/音声などを参加されていない方にも公開しています。
今回、フォローアップを開催直後（1週間以内）に受け取れる「フォローアップ参加」を試験的に行います。
- フォローアップ参加は3,000円（開催当日まで）、3,500円（開催後）です。
- 基本的にはスライド、音声のみをシェアします。
- ビデオ撮影を行う予定です。公開可能なビデオは、開催から2週間以内にシェアします。
- 会場参加と同様のタイミングで、カウントダウンメール/フォローアップメールをお送りします。
- 領収書はPeaTiXからダウンロードしてください。
- 会場参加の方にもフォローアップを提供しますので、会場参加される方はフォローアップ参加にお申し込みいただく必要はありません。
- 会場参加をキャンセルされた方は、自動的にフォローアップ参加となります。フォローアップ参加にお申し込みいただく必要はありません。
会場参加 フォローアップ
参加カウントダウンメール 
会場での参加 
フォローアップ（スライド） フォローアップ（ビデオ）
開催の背景
CSS Niteについて
CSS Nite（シーエスエス・ナイト）は、Web制作に関わる方のためのセミナーイベントです。2005年10月、アップルストア銀座にてマンスリーイベントとしてスタート。当初は文字通り「CSS」にフォーカスしていましたが、現在は“Web 制作者にとって有益であろうトピック”を広く扱っています。
都内を中心に、神戸、岡山、山梨、札幌、静岡、広島、仙台、高知、高松、福岡、大阪、青森、長野、また、海外では韓国でも開催。マークアップ系にとどまらず、WebディレクターやSEO/SEM、プログラマー系、経営者など、Web制作に関わる方の交流の機会となっています。
これまでに360回を越える関連イベントを通して、のべ44,000名を超える方が参加するなど、Web制作業界のセミナーイベントとしてはモンスター級（2013年8月現在）。
CSS Nite LP
CSS Nite LPは、回ごとにテーマを設け、土日などに開催するCSS Niteの有料版。今回のLP, Disk 32はその第32弾。「LP32」はそこから来ています。
アップルストア銀座でのCSS Niteをシングル盤に見立てると、LP盤だよね、ということでVolではなく、Diskでカウントしています。
CSSプリプロセッサー
2013年1月にCSS Nite LP, Disk 26「CSS Preprocessor Shootout」を開催しました。
フォローアップを公開しています。
- （1） 『CSSの設計』高津戸 壮さん
- （2）『パフォーマンスから考えるSass/Compassの導入・運用』石本 光司さん
- （3）『LESS is MORE: CSSプリプロセッサをシンプルに使う』谷 拓樹さん（サイバーエージェント）
- （4）『Stylusが目指す“CSSプリプロセッサ”』佐藤 歩さん
- （5）『CodeKitで始める次世代Web制作』木村 哲朗さん 、西畑 一馬さん
- （6）『新世代エディタで作る、プリプロセッサー環境構築術』たにぐち まことさん
- （7）『環境に合わせて快適コンパイル生活』こもり まさあきさん
- （8）『GREEを支える技術フロントエンド版』山田 あかねさん
- （9）『毎日の料理のためのSass』池田 拓司さん
- （10）『CSSプリプロセッサーの登場・発展から考えるCSSデザインの過去・現在・未来』小久保 浩大郎さん、高津戸 壮さん、小山田 晃浩さん
タイムテーブル
2014年5月8日 時点で最新のものです。変更の可能性があります。
- タイムテーブルはあくまでも目安であり、当日の流れによって、調整しながら進行します。
- 若干、延長する可能性があります。
| 時間 | ステージ | 講演者 |
|---|---|---|
| 13:30 | オープニング | |
| 13:40 | Why Sass? | 谷 拓樹（サイバーエージェント ） |
| 14:05 | CSSがもっとラクに書ける！ これから始めるSassの書き方 |
柴田 大樹（unCopi） |
| 14:50 | 休憩 | |
| 15:05 | Sassにもっと便利な機能をプラス！ Compassを使ってラクしましょ♡ |
黒野 明子（crema design） |
| 15:40 | Sass/Compassの導入と環境構築 | 森田 壮（Sou-Lab） |
| 16:25 | 休憩 | |
| 16:40 | コピペで使える！変数とmixin！ | 坂巻 翔大郎（ピクセルグリッド） 山田 敬美（ピクセルグリッド） |
| 17:15 | Sass/Compass よくあるトラブルと 解決方法・回避方法 |
木村 哲朗（まぼろし） 西畑 一馬（まぼろし） |
| 17:50 | 休憩 | |
| 18:05 | Sassの日常の運用 | 富田 梓（LINE） |
| 18:40 | HTMLテンプレートの設計 | 高津戸 壮（ピクセルグリッド ） |
| 19:15 | エンディング | |
| 19:30 | 終了 |
FAQ
開催に関して
- 当日の配布資料はありますか？
- ほかのCSS Niteと同様、基本的にありません。スライドなどは、開催終了後にダウンロードいただけるようにご案内します。セミナー中に撮影いただいたり、録音いただき、個人として利用されることはOKです。ただし、撮影時に音が出る機器（携帯電話など）はご遠慮ください。
- パソコンを持参した方がいいですか？
- いいえ、必要ありません。パソコンを持ち込んでいただくのは結構ですが、電源は十分にありません。まわりの方と分け合ってご利用ください。
なお、「隣に座った方の、キーボードのタイピング音がうるさくて気が散る」といった苦情を最近よくいただきます。ご配慮をお願いします。 - 無線LANなどの環境はありますか？
- 若干のご準備はいたしますが、基本的にはご自身でご用意ください。
- 電源はありますか？
- 会場に両サイドにある電源をお使いいただいてOKですが、分け合ってお使いください（ぜひ、電源タップなど延長できるものお持ちください）。また、ACアダプターにつまづいてPCが落下などされないように、くれぐれもお気をつけください（休憩中はコードをはずしておいたり、養生テープなどで固定された方がよいかもしれません）。
- Twitterで実況中継してもいいですか？
- はい、どうぞ。ハッシュタグは「#cssnite_lp32」です。なお、場合によっては、守秘義務に関する内容があります。講演者から指示があった場合、そちらは避けていただけますようお願いいたします。
- Ustreamで中継してもいいですか？
- こちらはご容赦ください（=NGです）。主催者サイドでUstream配信する予定はありません。
お申し込み・決済に関して
- 複数名で申し込む予定ですが、まとめて振り込んでもOKですか？
- はい。その場合、お振り込み後に「振込名義」と、どなたの分かをフォームからご連絡ください。
- 申し込み時に記入したものとは異なる方法で送金したいのですが...（「PayPalを選択したけど、銀行振込したい」、「銀行振込を選択したけれど、PayPalで決済したい」、「複数人をまとめて振り込みたい」など）
- 問題ありません。お手数ですが、ご送金後にフォームからご連絡ください。
- 請求書は発行いただけますか？
- PDFに限り、発行します。請求書発行依頼フォームからご連絡ください。
- 領収書はいただけますか？
- はい。開催当日、全員にお渡しします。
法人名などの宛名の記入が必要な場合には、休憩時間に受付にてお申し出ください（事前のご連絡は不要です）。銀行振込、PayPal決済に関わらず、領収書の日付は開催日です。不都合があれば、当日、ご相談ください。なお、欠席された場合でも、ご連絡いただければ領収書を郵送します。 - セミナー+懇親会のセットで申し込みました。領収書を分けて欲しいのですが...
- 領収書はセミナーと懇親会で分けてご用意しています。
- 諸事情で、遅刻（途中退席）しなければなりません。
- 問題ありません。ただし、部分的な返金等はご容赦ください。遅刻される場合、（すでに着席されている方の注意を削ぐため）次の転換/休憩時まで、会場の後部にて待機いただきます。
- 入金確認メールはいつ届きますか？
- 早ければ翌日。状況によっては1週間くらいかかることもあります。なお、PayPal決済の場合にはPayPalからの自動返信メールをもって入金確認としますので、CSS Niteからのメールはお送りしていません。
お申し込み者と振込名が異なる場合、こちらでは照合できません。ご連絡をお願いします。
キャンセルや払い戻しについて
- 急遽参加できなくなりました。代わりの人間が参加してもよいですか？
- はい、どうぞ。その際には、フォームからご連絡ください。
- PayPalでダブって決済してしまいました。
- ご連絡いただければ払い戻し処理を行います。もちろん、こちらで気付いた場合にはご連絡します。なお、返金の際、手数料（500円）のみご負担ください。
- 諸事情により参加できなくなりました。
- 下記のキャンセルポリシーをご一読の上、キャンセルフォームからご連絡ください。
キャンセルポリシー
決済後のキャンセルについては、下記のポリシーにて行わせていただきます。
| 請求書 | PDFのみ発行（希望者） | |
|---|---|---|
| 資 料 の 公 開 |
会場参加者 | |
| フォロー アップ参加 |
|
|
| 一般公開 | およそ90日後 |
|
| キ ャ ン セ ル |
3日前まで | フォローアップ参加費を 除いて返金 （フォローアップあり） |
| （計算例） | 9,000円-3,000円=6,000円 | |
| 前々日、 前日、 当日 |
返金なし（フォローアップあり） | |
参加費のキャンセル返金に関して
- キャンセルポリシーをご一読の上、キャンセルフォームからご連絡ください。
- 返金処理は、お申し出から1週間以内に実行します。
- 振込手数料/PayPal手数料は、CSS Niteが負担します（ただし、ダブりなどのご送金の場合には、ご負担ください）。
- 懇親会とセットでお申し込みの方も同様の計算です。
懇親会のキャンセルについて
懇親会のキャンセルについて、次のようにお願いします。
| タイミング | 返金額 |
|---|---|
| 開演後、1つめの休憩が終了するまで | 全額返金 |
| それ以降 | 返金なし |
なお、懇親会を決済されていて、当日参加されない場合にも同様です（ご連絡いただければ、後日返金いたします）。
関連情報
バナー
ブログやサイトにバナーを掲載いただければ幸いです。ソースコードのままご利用ください。
（幅200ピクセル×高さ200ピクセル）
