CSS Nite公式サイト

2014年5月15日、Stocker.jp / Space（渋谷）でCSS Nite back2basic 2014「Webサイトの改善提案トレーニング」を開催しました。

講師は益子 貴寛さん（サイバーガーデン）。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、森田 壮さん（Sou-Lab）の『Sass/Compassの導入と環境構築』セッションのスライドなどをシェアします。

• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

本当にお足元の悪い中、お越しいただきましてありがとうございました。
Sass/Compassを使う手順として環境構築の話をさせていただきましたが、今回のセッションが素敵なSassライフのきっかけとなれば幸いです。

ざっくりコマンドのおさらいです。

・インストール
gem install sass
gem install compass
（Macは先頭にsudoを付けて）

・コンパイル
■Sass
sass --watch . -t expanded
配布のバッチファイル／シェルスクリプト
■Compass
config.rbを用意してcompass w

・配布ファイルファイルについて
http://sou-lab.com/lp32/

翻訳したconfig.rbと、バッチファイル（Win用）／シェルスクリプト（Mac用）が入っています。
デモではMacのみで端折ってしまいましたが、Windowsもダブルクリックでウォッチ（変更の監視）ができます。
※ファイルまでのパスに日本語（マルチバイトパス）や記号があるとエラーになるので気を付けてください。

GUIコンパイラの操作について簡単な説明だけでしたが、実際に簡単にコンパイルすることができます。
PreprosとKoalaは無料で使えますので試してみてください。

インストールやコンパイル作業などでハマったら、お力になれるかもしれないのでお気軽に質問してください。
https://twitter.com/sou_lab

補足

ウォッチの停止の方法を言い忘れていたのですが、ウォッチをしているとコマンドラインに
「>>> Sass is watching for changes. Press Ctrl-C to stop.」と表示され、Ctrl＋Cで停止することができます。Win/Mac共通です。画面を閉じても停止できます。

アウトプットスタイルについて

スタイルのcompressedは通常コメントも消されてしまいますが、コメントを残したい場合は /*! コメント */ と先頭に「!」を入れてください。

いただいたご質問

Q.config.rbのimages_dir="images" これはそのまま使ったら新規にフォルダ生成してくれますか？

A. images_dirで指定したフォルダの中の画像からスプライト画像を生成したり、画像サイズを取得する関数を使えたりします。
なので、はじめにimages_dirで指定したフォルダを作成し、その中に画像を入れておく必要があります。
ちなみにcss_dirで指定したフォルダが無い場合はフォルダも生成され、その中にCSSファイルを書き出します。
こちらはSassも同様で、出力先で指定したフォルダがない場合は生成してくれます。

Q.sass --watchとcompass wは両方やらないといけない？compass wを実行すればsass --watchは不要？

sass --watch hogeはSassを使うコマンドで、compass wはCompassに使うコマンドです。
どちらか一方をコマンド入力すればオッケーです。
どちらか迷ったらCompassはSassの機能を兼ねていますので、配布したconfig.rbを使っていただいてcompass wを実行してもらえればと思います。

Q.GUIコンパイラが知らないの沢山あったので知りたい

スライドでアイコン一覧で並べたコンパイラですが、並び順で
MIXTURE・Compass.app・Prepros・LiveReload
CodeKit・Koala・Hammer・Scout
です。色々おもしろい機能をもったGUIツールもあるのですが、通常のSass/Compassの使用には紹介した3つがオススメです。Scoutは一年以上更新が無いのでオススメしません。

アンケートにSassの教科書の感想を書いていただけたり本当に嬉しかったです。

2014年6月20日（金）19:30-21:30、デジタルハリウッド福岡校 セミナールームでCSS Nite in FUKUOKA, Vol.5を開催します。

福岡での開催は、CSS Nite redux, Vol.5 powered by デジタルハリウッド福岡校 以来、3年ぶり。今回は、デジタルハリウッド福岡校、AQUENT福岡の協力のもとに開催します。

「Illustrator、イラストレーター特集」と題し、次の3セッションで構成します。

• Webで使うIllustrator、使いどころと“はまり”ポイント／鷹野 雅弘（スイッチ）
• Illustratorでイラストを描こう！キャラクター制作テクニック／廣 まさき
• LINEスタンプをテーマにしたライトニング・トーク／ハラダ ユーイチ 、金内和子（CGFM）

現在、Facebookイベントページでの仮表明を受付中。

2014年5月10日、 アウガ 5F AV多機能ホール（青森市）でCSS Nite in AOMORI, Vol.8｜青森県のホームページ制作・Web担当者向けセミナー :: ホームを開催しました。

ツイートは下記にまとめました。

• CSS Nite in AOMORI, Vol.8「クライアントの視点から考える地方のWeb“いま”と“これから”」 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite in AOMORI, Vol.8 に参加してきました

2014年5月10日、ベースキャンプでCSS Nite in NAGOYA, Vol.8を開催しました。

『ノンプログラマでも今日から使える「Git」でバージョン管理』をテーマにたにぐち まことさん（株式会社エイチツーオー・スペース）、田代 豊さん（QUON）の2名にお話いただきました。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップを公開します。

• （1）谷 拓樹さん（サイバーエージェント ）
• （2）柴田 大樹さん（unCopi）
• （3）黒野 明子さん（crema design）
• （4）森田 壮さん（Sou-Lab）
• （5）坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド）
• （6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）
• （7）富田 梓さん（LINE）
• （8）高津戸 壮さん（ピクセルグリッド ）

出演者のひとり、森田 壮さんの執筆された『Web制作者のためのSassの教科書』もオススメします。

• Web制作者のためのSassの教科書 - 公式サポートサイト

追記：

各セッションの音声を追加しました。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし）の『Sass/Compass よくあるトラブルと 解決方法・回避方法』セッションのスライドなどをシェアします。

• 音声

スライドはSlideShareにて公開されています。

メッセージ、補足（イベント終了直後にいただいたものを再掲）

みなさま、足下の悪い中お越しいただきまして誠にありがとうございます。

今回私たちは、実際の制作業務ではまりがちな落とし穴や、細かな要望に応えるためのTipsについてお話ししました。クライアントを含めて様々な職能の方に共有いただけるような内容を意識したのですがいかがでしたでしょうか。セッションで何ページか飛ばして進めた今回のスライドは、資料として今後のお仕事にご活用いただければ幸いです。

また、SassやCompassを足がかりとした「次」へのステップとして簡単にGruntの紹介もしました。デモでご覧いただいたとおり、様々なタスクを柔軟に組み合わせることができるので大変に便利なツールです。SassやCompassにある程度慣れてきたら、是非チャレンジしてみてください。Gruntについては、西畑のブログに入門記事が掲載されていますので是非ご覧ください。

http://blog.webcreativepark.net/2013/08/28-010250.html

# いただいた質問

Q. コンパイルするとカラーコードが色名になってしまいます。回避することはできないのでしょうか。

A.
Sassでは、変数にカラーコードを代入してそれを呼び出すと、コンパイル時に色名に変換（例：#f00 → red）してしまいます。手っ取り早い方法としては、変数に代入する際に文字列で指定することで回避が可能です。またそのようにして「色」を「文字列」として変数に代入した際は、呼び出す際にunquote関数を用います。以下に、変数の定義方法と呼び出し方の例を示します。

```
$keyColor: '#f00'; //カラーコードをクオーテーションで囲うことで、「色」ではなく「文字列」として代入する

.foo {
color: unquote($keyColor); //呼び出す際はunquote関数を使って呼び出す
}
```
ただしこの方法では、lightenやdarkenなどの色演算機能を使うことができなくなりますのでご注意ください。

Compassを使う場合はもう少し高度な回避方法があります。それはSass本来の機能を独自に上書きする方法です。詳しくは以下のURLに書かれています。少し難しい内容ではありますが、ご興味のある方はご覧ください。

http://blog.webcreativepark.net/2014/02/16-185913.html

Q. GruntではCompassみたいに保存時の即時反映があるのか気になりました。

A.
ファイルの更新をウォッチ（監視）するプラグインを使用すれば可能です。ウォッチプラグインでは「scssファイルが更新されたらsassのコンパイルする」などのタスクを定義することが可能です。セッションでは飛ばしてしまいましたが、資料には代表的なウォッチプラグインを掲載していますのでご確認ください。また、上記に挙げた西畑のブログではGruntによるウォッチの実現方法について具体的に解説していますので、是非ご覧いただければと存じます。

最後に宣伝

弊社で監修した『現場のプロが教えるWeb制作の最新常識 知らないと困るWebデザインの新ルール』という書籍が発売中です。Sass/CompassやGruntなど、昨今の現場で必要とされているWeb制作の技術についてまとめた一冊となっておりますので、ご興味のある方は是非お手にとってご覧ください。

また、この書籍の発売を記念したイベントを3/8（土）に開催します。本書に書かれている内容について著者自らが掘り下げてお話しするイベントとなっておりますので、お時間のある方は是非ご参加ください。

以上、ありがとうございました！

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、高津戸 壮さん（ピクセルグリッド ）の『HTMLテンプレートの設計』セッションのスライドなどをシェアします。

• スライド、ダウンロード
  ※ローカルでスライドを確認するためには、apache等のサーバーを立て、index.htmlを参照してください。Gruntを導入している場合、`npm install`後、`grunt serve`でサーバーが立ち上がります
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

長時間のセミナーでしたが、最後までお付きいただきありがとうございます。講演の内容としては、各概念の中で、基本的な部分に絞り、理解に時間がかかりそうな内容については省き、お話させて頂きました。それぞれの概念について興味のある方は、より、突っ込んで調べてみることをおすすめいたします。

講演の中でもお話させていただきましたが、SMACSSの書籍は日本語化もされています。読みやすいのでおすすめです。
http://smacss.com/ja/

# 補足

質問頂いた内容についてお答えします。

> 複数人でやる時に実際どんな感じでやってるのか

コーディングを複数人でやる場合、私の場合ですが、以下の2パターンで作業する事が多いです。

1. 主設計者＋展開
2. 主設計者＋サブ設計者

まず、1ですが、これは、ページ数の多いコーポレートサイト等を一つ一つ手作りしていく場合に取る体制です。サイトのCSSは、主設計者しかいじりません。主設計者は、各ページで使うモジュールを始めにコーディングし、その他のメンバーが、そのモジュールを使いながら、具体的なページを作っていきます。主設計者は、単純な作業を他の人に任せるように動きます。

2は、そのように、ページを量産できないような場合です。二人以上でモジュール群をコーディングしていくので、ちょっとむずかしいです。この場合、私の例はあくまで一例なのですが、以下のようにしています。

まず、基本的には1と同じく、主設計者が基本的な設計を行います。しかし、主設計者は、全てのモジュールのコーディングを行うわけではありません。部分的にコーディングを任せたいモジュールを、サブ設計者にコーディングしてもらいます。ただ、この時、そのモジュールの名前を始めに決めてしまいます。

講演の中でお話したとおり、モジュールの名前をベースに、HTMLとCSSを書いていくというルールにしているため、最低限、モジュールの名前が決まっていれば、コーディングは可能です。

この時、CSSファイルは、別に分けることもあります。そして最終的には、サブ設計者の書いたHTMLとCSSをマージします。サブ設計者がコーディング中に気づいたモジュールの粒度や懸念点は、適宜主設計者にフィードバックします。主設計者はなるべく、単純にコーディングが行えるモジュールから選んで仕事を振っていきます。

この方法を取る場合、講演の中で話したような設計の概念が固まっていると、よりスムーズに設計が行えます。弊社では、コレといった設計のルールを作っているわけではないのですが、講演中に話したSMACSSに近い形で普段コーディングしており、概ねの考え方が共通認識として存在しているため、分担は可能になっています。長いプロジェクトの場合は、このあたりの土台作りをきっちりやっておけば、寿命の長いサイトにできるでしょう。

以上、ありがとうございました。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、富田 梓さん（LINE）の『Sassの日常の運用』セッションのスライドなどをシェアします。

• スライド（PDF、69ページ、11.7MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

それに慣れてくると、こんどは「もっとこうしたら楽になるのに」とか「もっとこうしたら綺麗になるのに」といった
更に進んだ欲求や要望がでてくることになります。
本日紹介した内容はすこしだけ高度な内容でしたが、そんな欲求や要望の芽が出てきたときに改めて見なおしていただくと、新たな発見があるかと思います。

Sassを理解するためには、とにかく実際に使ってみることがなによりの第一歩です。
今日参加されてSassに興味をもった方は、まずはインストールしてその第一歩を踏み出してみてはいかがでしょうか。

補足

本日のスライドの中で触れた「プレースホルダーセレクター」について説明いたします。

プレースホルダーセレクタとは、extendされた時だけ効果を発揮する特殊なセレクタです。
「.」で指定するクラスセレクタや、「#」で指定するIDセレクタと同じように、プレースホルダーセレクタは「%」で指定します。

extendを使っていると、「extendされるためだけ」で、単体では利用されないクラスを作る場合があります。
普通にextendをつかうと、そのHTML側には利用されない無駄なクラス名が、extendしたクラスとともに出力されてしまいます。
プレースホルダーセレクターを使うと、この無駄なクラス名の出力を防ぎ、必要なクラス名だけを出力することができるようになります。

以下のサンプルを御覧ください。

# Sass

'''
/* 通常のextend */
.style01{
width:100px;
height:100px;
}

.boxA{
@extend .style01;
border:1px solid red;
}
.boxB{
@extend .style01;
border:1px solid green;
border-radius:4px;
}

/* プレースホルダーセレクタのextend */
%style02{
width:100px;
height:100px;
}

.boxC{
@extend %style02;
border:1px solid red;
}
.boxD{
@extend %style02;
border:1px solid green;
border-radius:4px;
}
'''

# CSS

'''
/* 通常のextend */
.style01, .boxA, .boxB {
width: 100px;
height: 100px;
}

.boxA {
border: 1px solid red;
}

.boxB {
border: 1px solid green;
border-radius: 4px;
}

/* プレースホルダーセレクタのextend */
.boxC, .boxD {
width: 100px;
height: 100px;
}

.boxC {
border: 1px solid red;
}

.boxD {
border: 1px solid green;
border-radius: 4px;
}
'''

CSSを見ると、通常のextendでは.style01といういらないコードが出力されているのに対し、プレースホルダーセレクタのextendでは、style02といういらないコードは出力されず、style02のスタイルだけが、extendしたコードに継承されているのがわかります。

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド）の『コピペで使える！変数とmixin！』セッションのスライドなどをシェアします。

• スライド（PDF、85ページ、12.4MB）
• mixinのサンプルコード集（GitHub）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

長丁場のセミナーの中盤で、ひたすらコードの解説をされたらつらいかなと思い、かけあい形式のセッションにしてみましたがいかがでしたでしょうか。内容が頭に入ってこなかったというご意見もありましたので（スミマセン…）、ぜひ、スライドとGitHubのREADME.mdを参考にしてみてください。

また、今回は初心者向けだったので、mixinの中身の解説はいっさい省きました。普段からSassを使っている人は、今回配布するmixinのコードの中身をみてみると、あらたな発見があるかもしれません。

ご参加いただいたみなさま、どうもありがとうございました。

いただいたご質問

Q.「自分でmixinを作れない場合の探し方まとめサイトとかあるのでしょうか」

これといったmixinまとめサイトというのは把握していないのですが、基本的なmixinはCompassにまとまっているので、まずはそれを使い、制作していく中でほしくなるmixinというのは、やはり自分でつくれた方が、プロジェクトに合わせて柔軟に対応できるので便利かと思います。

今回紹介したものの中には、つくりが複雑なmixinも含まれていますが、シンプルなものだと簡単につくれてしまうので、Sassに慣れてきたらぜひつくってみてください。

Compassに似たもので、BourbonというSassのライブラリがあるのですが、これは構造がシンプルでわかりやすく作られていますので、mixinづくりの参考になるかもしれません。

Bourbon Documentation

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、黒野 明子さん（crema design）の『Sassにもっと便利な機能をプラス！ Compassを使ってラクしましょ?』セッションのスライドなどをシェアします。

• スライド（PDF、29ページ、2.3MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

大雪直後の土曜日、長時間セミナー、本当にお疲れ様でした。

私のセッションでは、Compassの使用感をイメージしていただけるデモをメインに行いました。アンケートを拝見したところ、比較的多くの方にお楽しみいただけたようで、ほっとしています。環境さえ構築できれば、黒い画面が苦手とお感じの方でも、Compassを使い始めるのは決して難しくありません。まずは、今回ご紹介した3つの機能から、試してみてはいかがでしょうか？

そのためにも、デモで作成したファイルを以下に置いておきました。screen.scss内に、解説コメントが入っていますので、コピペしてご利用ください。
https://www.dropbox.com/s/1qxpl8699ies02r/cssnite.zip

また、セッション内でご紹介したいくつかの記事URLを、下記に挙げておきます。

【Compass Helpers | Compass Documentation】
→Compass公式サイト内のHelpersのページです。非常に多くの機能が用意されていますので、いくつかピックアップして試してみてください。

【CompassでCSSスプライト（Retina対応） | clear sky source】
→今回のイベントで監修を担当した株式会社まぼろしの小林さんの記事です。デフォルトのCSS Sprite生成機能ではできないRetina対応について、言及されています。

# いただいた質問

ベンダープレフィクスはすべて書き出す（指定する）必要がないので、そのあたりのカスタマイズをするのが大変そうです。

今回登壇されたした、株式会社まぼろしの西畑さんのブログで、カスタマイズ方法が紹介されていますので、ご確認ください。
http://blog.webcreativepark.net/2013/09/02-225206.html

CSS Spriteの画像名は、必ず変わってしまうのですか？

デモでご紹介したような、ファイル名後半に自動で付与される文字列は、下記の方法で取り除くことができます。英語の記事ですが、Answersの一番上の答えで紹介されているコードを、config.rb内に記述してください。
【How to turn off COMPASS SASS cache busting?】

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、柴田 大樹さん（unCopi）の『CSSがもっとラクに書ける！ これから始めるSassの書き方』セッションのスライドなどをシェアします。

• スライド（PDF、248ページ、20.9MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

先日は悪天候の中、足をお運びいただき、本当にありがとうございした。

Sassの全てをいきなり使い倒そうとすると、どうしてもつまづきやすくなってしまいます。まずはセッションの冒頭で紹介した、ネストや変数から試して、実際にSassって簡単だなと思えていただければ幸いです。

体験談ですが、一通りの書き方に慣れてきたら、これまで自分で書いてきたCSSのバックアップをとりながら、Sass化してみるとより早く慣れました。これまで書いてきたCSSを見返しながら、「ここは同じ値を使っている」「コード上は離れてるけど、おんなじスタイル使っている」といったことが振り返ると出てきます。

ぜひ、書き方を軽く理解したらトライしてみてください！

■スライド上の主なソースコード
http://sync-d.jp/lp32/
スライド内で使用したコードをSass Meister上でもシェアします。

■スライド上で紹介したURL
http://sassmeister.com/
Sassをお試しするときには非常に便利なWebサービスです。
環境構築するよりも前にSassを使う際にはぜひお試しください！

■以前公開したスライド

• ネストを覚えた人のためのSassの便利な使い方
  http://www.slideshare.net/sivacchi/sass-16282977
• CSS preprocessorの始めかた
  http://www.slideshare.net/sivacchi/css-preprocessor

2014年2月15日、ベルサール九段　イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、谷 拓樹さん（サイバーエージェント ）の『Why Sass?』セッションのスライドなどをシェアします。

• スライド（PDF、61ページ、6.8MB）
• 音声

メッセージ、補足（イベント終了直後にいただいたものを再掲）

谷のセッションでは基調講演ということで、なぜSassなのかという話をさせてもらいました。
講演でお話したことの繰り返しとなりますが、SassはCSS開発を効率アップする大変便利なツールです。

ツールであるがゆえ、その使い方を誤るとよりひどいCSSを生み出してしまうことがあります。
LP32の一日で、Sassの基礎から応用、ベストプラクティスとバッドプラクティス、CSSの設計までを学べた一日かとおもうので、ぜひ業務に活かせてもらえれば幸いです。
イベントに参加いただいた皆さん、基調講演から出席していただいた皆さんありがとうございました。

アンケートできになる人が多かった「他のプリプロセッサではなく、Sassを選ぶ理由をもっと知りたい」というのをいただいたので、
簡単な記事をあげておきますので、参考にしてください。

• https://gist.github.com/hiloki/545946ff868f40bb12f1

2014年4月26日（土）ベルサール九段でCSS Nite LP33「UI/UX」再演版を開催し、219名の方にご参加いただきました。

ツイートは下記にまとめました。

• CSS Nite LP33「UI/UX」再演版 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite LP33 UI/UX再演版に行ってきた | おれめも v2
• CSS Nite LP33 UI/UX #cssnite_lp33r にいってきた（けど腹6分だった話） | webディレクターの阿呆な研究

森田さんのスライド、および、アンケートでの質問などをブログにて回答いただいています。

• おかんでもわかるわかるUXデザイン Version 0.2 CSS Nite Edition - ネコメシCEOブログ

撮影：飯田昌之

2014年4月9日、Stocker.jp / Space（渋谷）でCSS Nite back2basic 2014「Webデザイナーでも知っておきたいPHPとプログラム基礎知識」を開催しました。

講師はたにぐち まことさん（エイチツーオースペース） ）。

2014年5-6月、東京、大阪、香川、札幌にてサイバーガーデンbiz「Webサイトの改善提案トレーニング」が開催されます。

CSS Nite back2basic 2014のラインアップとして開催され、好評だったものの再演版です。

• 札幌（2014年5月21日）
• 東京（2014年6月12日、13日）
• 香川（2014年6月17日）
• 大阪（2014年6月19日）

2014年5月15日（木）19:30-21:00、KDDIウェブコミュニケーションズ セミナールーム（麹町）でCPI x CSS Nite x 優クリエイト「After Dark」（10）を開催します。

この回の「After Dark」から、優クリエイトが主催に加わり、2セッションで構成します。これまでのアップルストア銀座でのCSS Niteに代替するものとして、参加費はほぼ無料に近いものとし、フォローアップも早々に公開します。

今回は、マークアップ事情2014と題し、次の2セッションをお送りします。

• IE6がなくなった今だからできる、IE8ベースの新CSSテクニック／小山田 晃浩（ピクセルグリッド）
• シンボルフォントで広がるフラットデザインの可能性／河村 奨（リブライズ、下北沢オープンソースCafe）

なお、会場参加（立ち見）とありますが、基本的に椅子はご用意しています。

4月12日(土) 、高知市文化プラザかるぽーとでCSS Nite in TOSA, Vol.2を開催し、80名近い方にご参加いただきました。

ツイートは下記にまとめました。

• CSS Nite in TOSA, Vol.2 「使えるWebデザイン」のまとめ #wck_css2 - Togetterまとめ

次のブログで取り上げていただきました。ありがとうございます。

• CSS Nite in TOSA vol.2に初参加のため高知へ行ってきた

公式ツイート担当のpannyattoさん。

• CSS Nite in TOSA, Vol.2「使えるWebデザイン」でメモったのを書き起こしました。

公式の終了エントリーです。

• CSS Nite in TOSA, Vol.2 「使えるWebデザイン」2014/4/12(土)高知で開催！ - CSS Nite in TOSA公式サイト

2014年4月17日(木) 、KDDIウェブコミュニケーションズセミナールーム（麹町）で開催したCPI x CSS Nite x 優クリエイト 「After Dark」（9） 『「今すぐSublime Textを使いこなす！」90分ライブセットアップ』 のフォローアップを公開します。

CPI x CSS Nite x 優クリエイト「After Dark」（9） from CSS Nite on Vimeo.

こちらもご覧ください。

• CPI x CSS Nite x 優クリエイト 「After Dark」（9）Sublime Textが終了しました | CSS Nite公式サイト

フォローアップ

ご参加いただきましてありがとうございました！

ライブセットアップという形式上、セッション中はSublime Textの画面のみでしたので、紹介した機能やパッケージの名称やショートカットなどを補足させていただきます。

時間の都合上、カットしたパッケージもあるのでせっかくなのでこちらで紹介いたします。紹介したパッケージはほぼ『Sublime Textの教科書』に載っておりますので是非参考にしてください。

基本的な概要やインストールなどはセッション動画及び『Sublime Textの教科書』1章がダウンロードできますので、そちらをご覧ください。

監修のこもりまさあきさんがStorifyでリアルタイムまとめを作成してくれました。こちらも併せてご覧ください。

【紹介した機能】

※Macのショートカットで紹介していますがWindowsはcommandをCtrl、optionをAltとお考えください（一部異なるショートカットもあります）。

コマンドパレット

command+shift+Pでパッケージのインストール

画面分割

[メニュー] View > Layout 画面を分割できる。 command+option+1-4で横分割 command+option+shift+1-2で縦分割

集中モード

[メニュー] View > Enter Distraction Free Mode サイドバーやミニマップなど全てを非表示にして全画面でコードのみを表示する。

HotExit

未保存のファイルのままSublime Textを終了しても、そのまま復元して開くことができます。

複数選択

文字を選択しcommand+Dで以下に続く同じワードを選択できます。 command+Dのあとにcommand+Kをするとスキップできます。 選択を戻す場合はcommand+Uで戻れます。 ※command+Uはソフトアンドゥという機能で選択やキャレットなどをやり直しする機能です。

矩形選択

option＋ドラッグで矩形に選択できます。WinはShift＋右クリック。

検索・置換

command+Fで検索窓表示 option+Enterで検索ワードを一括選択できる。 （テキスト上でcommand+control+Gでもできます。WinはAlt+F3。）

GoTo Anything

command+PでGoto Anythingの検索窓が表示されます。 行やシンボル、ファイルなどを検索し移動できます。

時間の都合で紹介できなかったですが、他にも行の移動や複製、Split into linesなど、まだまだ便利な機能がたくさんあります。詳しくは本書を参考にしてください。 また、プロジェクト機能やスニペット機能なども非常に便利な機能ですので、これらも本書を見ていただけると幸いです。

【紹介したパッケージ】

Package Control

パッケージを管理する基本となるパッケージ コマンドパレットでパッケージのインストール・削除・停止などがSublime Text上で管理できる。 インストールは、[メニュー] View > Show Consoleで開かれる入力欄にこちらのページのソースをコピー＆ペースト。

SublimeNFDToNFCPaste

Macでプレビュー.appなどからテキストをコピーした際、濁点が一文字になってしまうのを解消するパッケージ。

参考URL

Sidebar Enhancement

サイドバーを拡張するパッケージ。プロジェクトの様々な設定が可能になる。

SFTP

サーバーにファイルのアップロードや同期などができるパッケージ 有償パッケージ$20（無期限試用可）

Emmet

キーワードでコードを展開することができるEmmetのパッケージ （例：ul>liを<ul><li></li></ul>、d-iをdisplay:inline;に展開など） Sublime Textはキーワードでのコード補完もしてくれる。 Enter Abbrevitionでリアルタイムに展開をプレビューすることができる。 数字の増減や画像サイズの取得など、他にも便利な機能が多数ある。

Inc-Dec-Value （option+ctrl+command+上下）

Emmetの数字の増減に加えて100の位を増減できるパッケージ。 また、大文字小文字の切り替えや、カラーコード、特定ワードも切り替えることができる。 （例：true⇔false、 inline⇔block⇔inline-blockなど）

Sass-Build

Sassをビルドできるパッケージ。マシンにSassのインストールが必要。 Sublime Textはcommand+Bで対応した言語をビルドをすることができます。

Terminal

現在のファイル及びプロジェクトの場所をカレントディレクトリにしてTerminalまたはコマンドプロ ンプトを開くことができるパッケージ。

SublimeStyleStats

StyleStatsをSublime Textで表示することができるパッケージ； マシンにnode.jsとStyleStatsのインストールが必要。 StlyleStatsについての詳細は作成者の石本氏のBlogをごらんください。

• StyleStats - MOL

※SublimeStyleStats以外はPackage Controlでインストールできます。

【時間の都合で紹介できなかったオススメパッケージ】

Nettuts+ Fetch

WordPressや Normalize.cssなど、定番のライブラリやフレームワーク、プロダクトなどを手軽にダウンロードできる。

cdnjs

CDNのURLを保存、手早く挿入できる。

AutoFileName

update image size (control+shift+I) ユーザー設定ファイルに"afn_insert_width_first": true ← width と height の順番変更 imgタグのsrcやaタグのhrefなどの入力補助。必須と言っても良いパッケージです。

All Autocomplete

別ファイルからのキーワード補完。

Autoprifixer

CSSのプロパティのプリフィクスを自動的に調整してくれる。 マシンにnode.jsとAutoprifixerのインストールが必要。

CSS Comp

CSSのプロパティの順番を並び替え。

List stylesheet variables

Sass、LessなどのCSSプリプロセッサーなどの変数を参照・挿入できるパッケージ。 参照：Sass/Less/Stylusでの変数入力を補助する「List stylesheet variables」(Sublime Text Package)

PackageResourceViewer (control+option+L)

パッケージの設定などを手軽に確認、編集できる。

公式のPackage Controlサイトで、人気のパッケージがインストール数順にわかりますので参考にしてください。 新規登録されたパッケージや、いまトレンドのパッケージもわかります。

Facebookページで本書のフォローアップや、更新情報をお知らせしています。 また、こもりまさあきさんによる本書に載っていないパッケージ紹介なども随時更新されておりますのでよかったら「いいね！」お願いします！

Ustream動画

Vimeoのものを内容は同じです。

Video streaming by Ustream

2014年4月19日（土）御茶ノ水ソラシティカンファレンスセンターでCSS Nite LP34「Webデザインで使うPhotoshop」を開催し、142名の方にご参加いただきました。

90日を目安に、スライドなどは公開予定ですが、フォローアップ参加にお申し込みいただくと、いち早く、スライド/動画を閲覧いただけます。

ツイートは下記にまとめました。

• CSS Nite LP34：Webデザインで使うPhotoshop - Togetterまとめ

フォローアップは、フォローアップメールのほか、Facebookイベントページにも行っていきます。

次のブログで取り上げていただきました。ありがとうございます。

• Web屋のーりー ? ウェブデザインの主役！ Photoshopと親密にお付き合いする方法
• モカの腹: CSSNiteLP34「Webデザインで使うPhotoshop」

撮影：飯田昌之