CSS Nite公式サイト

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、こもり まさあきさんの『環境に合わせて快適コンパイル生活』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

こもりの担当セッションはツールの紹介に終始しました。既に使い始めている方には物足りない、コマンドラインを敬遠されてる方には理解しにくい内容だったかもしれません。ただ、昨日の皆さんのセッションでもたびたび出てきてたように、Webの制作方法が大きく様変わりしているような時代です。

ツールはいつもコマンドラインで使うものから始まります。GUIのツールというのは、環境の用意や黒い画面で実行しているコマンドにグラフィカルなボタンをつけただけです。コマンドラインといっても、昨日ご覧いただいたように入れるのはせいぜい2、3個。それだけ覚えてしまえば難しいことはありません。

Webがアプリケーション化しているというお話もあったように、仕事の境界線すらあいまいになって複雑化している状況に今後乗り遅れず対応するためにも、そろそろプリプロセッサをその入り口として、通称「黒い画面」にも触れてみてはいかがでしょうか？

本セッションの後半は「Ruby」や「Node.js」のいずれかが必要なものばかりです。付け加えるなら「Git」などもそろそろ導入しておく方が作業の効率化は図れます。いずれも、説明し始めるとそれだけで1日のセッションになってしまうので、簡単なインストーラの所在地だけお伝えしておきます。OS XにはあらかじめRubyは入っているので、そのままのバージョンでよければすぐに「Sass」や「Compass」はコマンドラインから使えるようになります。

※インストール方法や使い方はGoogleなどで検索してください。

• Ruby Installer for Windows ～Windows向けのRubyの簡単インストーラ
• RVM ～Rubyのバージョンマネージャ
• rbenv ～最新のRubyのバージョンマネージャ
• Node.js ～Node.jsのオフィシャルサイト
• nodebrew ～ピクセルグリッドの外村さんが作られてるNode.jsのバージョンマネージャ

最後に、本セッション中で軽く流した「roots」について簡単な操作説明をビデオで用意しました。

CSS Nite LP, Disk 26 roots demo from komori, masaaki on Vimeo.

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、池田 拓司さん（クックパッド） の『毎日の料理のためのSass』のスライドなどを公開します。

• スライド
• 音声

ビデオ

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、 高津戸 壮さん（ピクセルグリッド） の『CSSの設計』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

当日は、私のセッションをお聞き下さり、ありがとうございました。CSSをどのように書くかという問題は、完全な正解が無く、なかなか難しいものです。私のセッション内で話したような、「CSS設計を完全なものにできない」という問題は、HTMLとCSSを書く者らにとっては、頭痛のタネです。これについては、以下の記事でうまくまとめられ、書かれています。

About HTML semantics and front-end architecture ? Nicolas Gallagher http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

About HTML semantics and front-end architecture | en.ja | Translated Articles for Front End Developers http://enja.studiomohawk.com/2012/03/20/about-html-semantics-and-front-end-architecture/

一人でHTMLとCSSを書いているぶんには、そのような問題はさほど意識させられないかもしれません。ですが、複数人でHTMLを書くとなると、この問題は、よりはっきりと意識させられます。これについて、既にどこかに完全な答えがあるかと問われると、今のところ、そのような銀の弾丸のような解決方法は無いと言えそうです。ですが、プロジェクトに関わるメンバーと意識共有をすることで、かなり綺麗にCSSの設計を行うことができるのではないでしょうか。

本セッションが、皆様が普段書いているCSSについて、再度考える機会になっていただけたら幸いです。

本セッション内で紹介したページのURLは、以下になります。

• Object-oriented CSS
• Takazudolog - OOCSSとSass
• jQuery UI

なお、私のスライドは、以下を利用しています。

reveal.js - The HTML Presentation Framework

質疑応答でも少し振れましたが、弊社ピクセルグリッドでは、CodeGridという、フロントまわりの技術情報をメルマガ＋Chrome webアプリで配信するサービスを運営しています。

• CodeGrid

こちらもご興味があれば、チェックして頂ければと存じます。

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、 木村 哲朗さん（まぼろし） 、西畑 一馬さん（まぼろし） の『CodeKitで始める次世代Web制作』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

「CodeKitで始める次世代Web制作」と題してお話しさせていただいたまぼろしの木村と西畑です。

制作環境に関する最初のセッションということで、CSSプリプロセッサをまだ触ったことのない方でも簡単に始められるように、なるべく分かりやすくお届けしたつもりですがいかがでしたでしょうか。CodeKitの簡単さや高機能性はもちろんですが、それ以上にこのセッションで私どもが込めた「まずはやってみよう！」というメッセージが皆様に伝わっていれば幸いです。

以下、フォローします。

• デモファイルのダウンロード

デモで使用したファイルをダウンロードできます。 CodeKitを使ってみたい方も黒い画面で使いたい方も、このファイルを練習にご利用ください。

おさらい

西畑がCodeKitやComapssについていくつか記事を書いています。

• フレームワークの登録・利用について

"Video Tutorials"のなかの"Frameworks"をご覧ください。 また、他の動画も大変参考になるので是非ご覧ください。

Q. Windows用でCodeKitのようなツールはないのか

CodeKitのようにいろいろなコンパイルができるものだと"LiveReload"というツールがあります。ただし、まだアルファ版であることにご注意ください。

またこもりさんのセッションで紹介のあった"Mixture"というツールは、クロスプラットフォームでのリリースを予定しており、今からチェックしておいて損はないでしょう。

現状、Windowsでは利用するプリプロセッサごとにGUIツールを利用するか、黒い画面で環境を構築する方が良いかもしれません。なお、それぞれのツールについては他の登壇者から紹介されていますのでここでは割愛いたします。

Q. CodeKitを導入するデメリット･リスクについて

CodeKitを導入するデメリットとリスクは、ずばりコンパイルやビルドをCodeKitに依存してしまうことです。特にLESSの出力先設定やJSの結合などの設定は、CodeKitを利用している人同士でないと共有が難しく、外部の制作者と共同で作業する場合などには注意が必要です。

また、利用するCSSプリプロセッサのバージョンがCodeKitに依存してしまう点もデメリットの１つでしょう。SassなどがバージョンアップしてもCodeKitに最新バージョンが内包されるまでは利用できません。

しかし、CodeKitのコンパイラを外部コンパイラに変更することで対応可能です。 方法は弊社 小林がブログに書いていますので参考にしてください。

CodeKitを利用するかしないかに関わらず、コンパイルやビルドといった行程を制作に持ち込む場合、その手法について制作者同士での意識共有は必須です。

また、さとうさんからCodeKitでStylus+nibを利用する方法についてフォローアップをいただきました。Stylus+nibに興味をもたれた方はこちらの方法を試してみて下さい。

CodeKitでStylus+nibを利用する方法

nib自体は単にmixin定義が書かれた複数の.stylファイル集なので、npmなどコマンドラインでインストールしなくても、ローカルの.stylファイルと同じ場所にファイルをコピーすれば利用できます。

1. GitHubのnibリポジトリ https://github.com/visionmedia/nib/ からZIPをダウンロード
2. ダウンロードされた「nib-master.zip」を解凍して展開
3. 展開後の「nib-master/lib/nib」をコピー
4. 自分の.stylファイルがあるディレクトリにコピー
5. 自分の.stylファイル内で「@import 'nib';」と記述

上記のような手順で利用できます。ぜひお試しください。

• サンプルファイル構成

ビデオ

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、 たにぐち まことさん（エイチツーオースペース） の『新世代エディタで作る、プリプロセッサー環境構築術』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

「新世代エディタで作る、プリプロセッサー環境構築術」を担当した H2O SPACE たにぐちです。

私のセッションでは、Coda 2と Sublime Text 2をご紹介しました。なかなか、使い慣れたエディタから乗り換えるのはパワーがいりますが、乗り換えることでより作業の効率が良くなったり、今後の技術の進歩にも柔軟についていけるようになります。

いずれのエディタもお試し期間がありますので、是非1度でも使ってみましょう。

アンケートで頂いた質問に回答します。

Q. Subversionに対応したエディタはありませんか？

Coda 2は、Subversionと Gitのクライアント機能を内蔵しています。また、Sublime Text 2には有償ですが Packageがあります。http://wbond.net/sublime_packages/svn

Q. 制作の現場では Macが多いのでしょうか？　Mac向けエディタが多かったようです

Vimや Sublime Text 2はマルチプラットフォームのエディタです。ただ、Macは確実にシェアを伸ばしていることは確かです。もし、まだ Macをきちんと使ったことがないという場合には、ぜひ1台は手に入れて触っておくと良いでしょう。

セッション中に紹介した、URL一覧です。

• CSS Nite in Ginza, Vol.56 (1) 「コーディングを 3倍速くする！ Vim入門」
• テキストブック（パブー）
• Coda 2
• Emmet
• Emmet Plugin for Coda
• CSS Nite in Ginza, Vol.65 「Coda 2特集」
• Sublime Text 2
• Sublime Package Control
• Recommended Sublime Text 2 Packages for Web Developers.
• hayaku
• CSSが速くかけるようになるSublime Text2 パッケージ Hayakuで、世界が変わるらしい

なお「Codaでつくる WEbサイト制作入門」をパブーで販売中です。

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

ビデオ

2013年1月12日（土）、ベルサール半蔵門で開催した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デザインの過去・現在・未来』小久保 浩大郎さん、高津戸 壮さん、小山田 晃浩さん

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、小久保 浩大郎さん（Google）、高津戸 壮さん（ピクセルグリッド）、小山田 晃浩さん（ピクセルグリッド）の『CSSプリプロセッサーの登場・発展から考えるCSSデザインの過去・現在・未来』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

「CSSプリプロセッサ の登場・発展から考えるCSSデザインの過去・現在・未来」と題して最後のセッションを担当した小久保です。参加された皆様、長時間お疲れ様でした。長いイベントの最後ということで、具体的なテクニックではなく意味や意義について考えてみるセッションにしてみましたがいかがでしたでしょうか。個人的にもテクニカルな解説は過去にやっているので、今回は改めて別の視点から考えてみるいいきっかけになりました。セッションでも述べたとおり、およそほとんどの技術は、何らかの問題に対する解決として生まれてきています。今 CSS プリプロセッサを使うことは、決して無駄ではなく将来にも役立つ未来の先取りなんだ、というふうに思って取り組んでいただければ幸いです。

• スライド内で紹介した Tab Atkins Jr. のブログエントリー

今回のセッションは概念的な内容でしたが、再利用可能な Sass ライブラリを構築する際の問題とその解決について書いた記事があるので紹介しておきます。今回のセッションの内容とは逆に、細かくて具体的なテクニックの話ですが、ライブラリが大きくなってくると必ず出てくる問題かと思います。記事を書いたあとで気がついたのですが、全く同様のテクニックを Sass の共同開発者である Chris Epstein 自身も薦めていました。そのことも記事中に追記してあります。

• Sass で Singleton を実現し、安心してクラスを再利用する
• Sass 3.2 からは placeholder selector を使おう

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、山田 あかね（グリー）の『GREEを支える技術フロントエンド版』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

• Sass vs Less
• 疎結合

グリーの山田あかねです。このたびはご参加いただきましてありがとうございました。

GREEの高速化にあたりSassで行っていることを中心にご紹介させていただきました。Sassでできることはもっとたくさんあるため、是非皆様も実際に触ってみて、楽しさを実感していただければ幸いです。

アンケートでいくつかご意見・ご質問をいただきましたので、回答させていただきます。

Q: ファイルの管理は基本的にローカル＋Gitなのでしょうか？複数人でファイルを同時に触るさいに気を付けていることがあれば教えてほしいです。

A: ローカル+Gitにくわえ、エンタープライズ版のGithubを活用しています。Gitはおのおのの開発者で分散して開発できるのが魅力ですが、実際にリリースをする際にはSubversionのように中央集中型の管理をおこなうメリットも大きいため、Githubを使いながら両方の良さを取り入れて開発しています。

Gitを使えば、複数人でファイルを触る際にも「ブランチを切る」というかたちで、同時進行で異なる機能の開発が可能になります。個人的に、Gitを使ってしまうと、もう以前の開発スタイルに戻れなくなるほど便利だと思います。

少し古い記事になりますが、グリーの開発フローについての記事も参考にしていただければと思います。http://labs.gree.jp/blog/2011/05/3528/

Q: 使っているmixin群とかを見てみたいです。

A: 全て公開することはできませんが、一部ご紹介させていただきます。webkitにしか対応していないプロパティに対して、compassのexperimentalを読み込むようなことをmixinでやってたりします。

// デバイスを傾けたときの文字の大きさ調整
@mixin text-size-adjust($val:none) {
@include experimental(text-size-adjust, $val,
not -moz, -webkit, not -o, not -ms, -khtml, not official
);
}

// タップハイライトカラー
@mixin tap-highlight-color($color) {
$color: none;
@include experimental(tap-highlight-color, $color,
not -moz, -webkit, not -o, not -ms, -khtml, not official
);
}

// ボタンのスタイル
// ボタンの色関連：文字色・背景ハイライト色・背景シャドウ色・枠線色・枠線トップ色・枠線ボトム色・テキストシャドウ色・ボックスシャドウ色・内側のボックスシャドウ色の順に指定
@mixin button-colors
(
$color1: $button-text-color,
$color2: $button-top-bgcolor,
$color3: $button-bottom-bgcolor,
$color4: $button-line-color,
$color5: $button-top-line-color,
$color6: $button-bottom-line-color,
$color7: $button-text-shadow-color,
$color8: $button-box-shadow-color,
$color9: $button-box-shadow-inset-color,
$text-shadow-y: 1px
) {
border: 1px solid $color4;
border-top-color: $color5;
border-bottom-color: $color6;
color: $color1;
text-shadow: 0 $text-shadow-y 0 $color7;
@include background-image(linear-gradient($color2, $color3));
@include box-shadow-mix(0,1px,1px,$color8,0,1px,0,$color9);
}

このようなかたちで、mixinの中でも別のmixinをincludeして使っているものもあります。 デザインに秩序がある場合、特に仕組み化しやすいのではないかと思います。

Q: 変数の方面なども是非おうかがいしたいです。

A: 最初はLessやSassの機能を試してみたい好奇心で、色を変数化して、亜種の色を演算で表現したりもしていました。しかし実際にやってみてわかったのですが、デザインの方向性がしっかり固まっていないうちに色を変数にするとかえってややこしくなるという印象です。

それでも色を変数にするメリットは大きいです。たとえばトーン＆マナーを保ちながら、カラースキームだけをがらっと変更したいようなときなどです。キーカラー、アクセントカラーなどを変数化しておけば、たった数個の変数の値を変えるだけでサイトの印象をがらっと変更できます。

また、レスポンシブに設計したいときには幅やグリッドのしきたりに対して変数をつけておくと運用しやすいかと思いますが、こちらもやはりデザインルールがしっかりしていないとかえってややこしくなってしまうと思います。プリプロセッサを使う使わないに関係なく、設計をしたり、長持ちする仕組みをつくるためにはデザイナーとのコミュニケーションは欠かせないと考えております。

以上、回答とさせていただきます。

ありがとうございます。

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、佐藤 歩さん（サイバーエージェント） の『Stylusが目指す“CSSプリプロセッサ”』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

「Stylusが目指すCSSプリプロセッサ」を紹介させていただいた、さとう歩（@ahomu）です。当日はご清聴いただきありがとうございました。

CSSプリプロセッサ3連チャンの最後ということで、Stylus自体に加えてプリプロセッサとCSSの関わりの概念的な領域も紹介してみました。

コミュニティによる支持においては、やはりSassが有力なように感じますが、どのCSSプリプロセッサを利用するとしても、今回ご紹介したプリプロセッサとCSSの問題にちゃんと向き合うことはマストだと思います。ご参考になれば幸いです。 　 以下、実行環境や、機能文法などについて改めてフォローします。 　

実行環境

• LiveReload
• CodeKit

黒い画面のプレッシャーが全体通して強いイベントではありましたが、「まず始める」という意味では、ツール系セッションで紹介されていたGUIのソフトウェアがおすすめです。

自身は Grunt http://gruntjs.com/ というコマンドラインツールで、他のビルドプロセスと統合して自動化し、プロジェクト内でもpackage.jsonをベースに環境を共有しています。

機能・構文

• Stylus
• Try Stylus

公式のドキュメントや、セッション中でも紹介したTry Stylusのサンプルコードをみてもらうのが一番確実です（コードサンプルとして簡単に読めます）

• enja-oss/stylus ? GitHub

私も参加しているenja-ossという翻訳コミュニティで、Stylusのドキュメント和訳が進んでいるため、こちらをチェックして頂くのも良いと思います。（始まったばかりですが、じきに内容が充実してくるはずです）

透過的mixinと柔軟性

　 透過的なmixinが、機能の利用を明示しないという点が逆にどうなのよ、ちゃんと区別できたほうがいいんじゃな？というご意見もあったようです。私も明示的なインターフェースは大好きなので、少なからず共感するところです。

そんなときもStylusは柔軟なので、mixinも「border-radius(3px);」のように書ける選択肢があります。ちょっとLESSのmixinに似ている記法です。また、変数の冒頭に書く記号（$）は付けてもよいし、付けなくてもよかったりします。

StylusでCSSから最も距離を取ったSyntaxを選ぶと、（明示的mixin・プレフィックスつき変数・CSS文法の記号を省略）以下のようになります。

　border-radius(n)
  　-webkit-border-radius n
  　-moz-border-radius n
  　border-radius n
　
　$radius-length = 5px
　
　form input[type=button]
  　border-radius($radius-length)

このあたりも好みに合わせて、「ちょうどよく」なれるStylusであることを、頭の片隅に留めていただければ幸いです。

CSSファイルのimportはできる？

こちら、アンケートで頂いた質問ですが、できます！.cssも.stylも@importで読み込んで、コンパイル時には1ファイルに結合されるようにできます。

2013年1月12日（土） 、ベルサール半蔵門で開催したCSS Nite LP, Disk 26「CSS Preprocessor Shootout」のフォローアップとして、石本 光司さん（サイバーエージェント） の『パフォーマンスから考えるSass/Compassの導入・運用』のスライドなどを公開します。

• スライド
• 音声

メッセージ、補足

Sassについてのセッション担当の石本です。

Sass+Compassは非常に高機能なCSSプリプロセッサーですが、だからといってその機能すべて使用・理解しようとすると大変なので、あくまで問題を解決するツールとして考え、必要になったら（なにか問題に直面したら）使用・勉強するといったスタンスで向き合っていけば良いと思います。事実、私も使ってない機能はいっぱいあります。

また、今回のイベントでSassが主流かのような印象を持たれた方も多いと思います。だからといってSassさえ出来てればよいのかというとそうでもないように思えます。時が立てば、またLessが盛り返してくるかもしれないし、全く別のあたらしいCSSに関する技術が出てくるかもしれません。そういった時に、食わず嫌いせずにどんどんそれらを取り込む姿勢（それが黒い画面を使うものだとしても）が今後重要だと考えます。

変化に対応できる柔軟な人材が求めらているなと感じたイベントでした。講演者としても大変勉強になった一日でした。ありがとうございました。

以下、フォローです。

Compassについて

スライドで紹介した、CSS Spriteのmixinの詳細な解説です。

パフォーマンスからみるSass/Compass 第2回：CompassによるCSS Sprite | MOL

私が作成したmixinはRetina対応した独自のものなので、普通にCSS Spriteする分にはもっと簡単に使えます。

CompassでCSSスプライト[to-R]

スプライト画像のレイアウトに関しては$icon-layoutで変更可能です。

Sprite layouts | Compass Documentation

StyleDoccoについて

StyleDoccoの詳しい使い方に関しては下記を参考にしてください。

CSSプリプロセッサでスタイルガイド - inkdesign

｢styleDocco｣の導入とgrunt.jsでの自動化のメモ | Mnemoniqs Web Designer Blog

StyleDocco自体のスタイルは変更できるのか？

個人的には要望は出しているのですが、今のところできないようです。

Ruby製の別のスタイルガイドKSSではできますが、StyleDoccoよりも導入の敷居は高いです。

スタイルガイドジェネレータの KSS が良さそう - text.funenPlaCanen.com

2013年4月21日（日）、 札幌パークホテル B2F パークプラザで CSS Nite in SAPPORO, Vol.9「いま必要なSEO」 を開催し、140名ほどの方にご参加いただきました。

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

• CSS Nite in SAPPORO, Vol.9「いま必要なSEO」まとめ - Togetter

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

• 『CSS Nite in SAPPORO, Vol.9「いま必要なSEO」』に行ってきました。 #cssnite_sapporo9 - 状況が抉る部屋
• CSS NITE札幌Vo9「今必要なSEO」で勉強してきました。 | Naruse Contents Planning(NCP)
• CSSNITE札幌Vol.9「いま必要なSEO」レポート | 札幌SEO＆ウェブ解析士【Ramjet design.】
• CSS Nite in SAPPORO にも参加してきました | kazumich.log
• 実録！クロスメディアコミュニケーションで販促を Webの力を総合的に引き出すには
• 【完全版】「Googleの変化から理解するSEOのトレンド」 ? 『CSS Nite in SAPPORO, Vol.9「いま必要なSEO」』レポート #cssnite_sapporo9 | Digital experience University
• 伊藤公助氏セミナーGoogleの変化から理解するSEOのトレンド感想 | CSS Nite in SAPPORO
• CSS Nite in Sapporo Vol.9 に参加しました - 小十郎の日々是雑記
• 古荘貴司氏のセミナー、サイト改善の初歩とA/Bテストの使いどころ感想 | CSS Nite in SAPPORO,Vol.9「いま必要なSEO」

こちらは講演者のブログなど：

• 【セミナーレポート】CSS Nite in SAPPORO, Vol.9「いま必要なSEO」前編 #cssnite_sapporo9 | SEO Imagination！ブログ

2013年4月27日（土）、アウガ（青森市）で CSS Nite in AOMORI, Vol.7が開催され、81名の方にご参加いただきました。

（撮影：鍋坂 樹伸／サン・スタジオ）

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

• CSS Nite in AOMORI, Vol.7「プロの仕事から考えるコンテンツの活かし方」 - Togetter

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

• CSS Nite in Aomori, Vol.7 参加雑感 | kotaログ

こちらは関係者のブログ；

• CSS Nite in Aomori, Vol.7 まとめ①長谷川恭久さん｜さくら便り
• CSS Nite in AOMORI, Vol.7「プロの仕事から考えるコンテンツの活かし方」参加レポート 第一弾（亀田） | イエス！あおもり｜青森県内での開催を中心としたWebやDTPに関わるセミナー情報等を掲載しています。
• CSS Nite in Aomori, Vol.7 まとめ②森田哲生さん｜さくら便り

また、前日には、予習コンテンツとして、長谷川 恭久さん、山本 章さんによるUstreamが行われました。

Video streaming by Ustream

2013年5月25日（土） 、ベルサール九段でCSS Nite LP, Disk 27を開催します。

「スマートフォン対応サイト制作（3）」と題し、次のラインアップでお送りします。

• iPhone、Android、端末をざっくり把握する／神森 勉（KDDIウェブコミュニケーションズ）
• スマホ向けデザインパターン／矢野りん
• スマホ向けサイト制作の基本（益子）
• レスポンシブWebデザイン実践編／こもり まさあき
• スマホ時代のコーディング（LIVE）／たにぐち まこと
• 画像まわりの最適化（SVG、base64の使いどころを含む）／松田直樹（まぼろし）
• よくあるトラブルと解決方法、回避方法／西畑一馬、木村 哲（まぼろし）
• ケーススタディ：大規模サイトでの実装／伊原 力也（ビジネス アーキテクツ）
• ケーススタディ：スマートフォン対応版CodeGridの設計の裏側／徳田 和規（ピクセルグリッド）
• スマホ制作サイトのディレクション術（見積を含む）／小林 信次（まぼろし）＋矢野りん

2013年5月16日（木）19:00-20:00、アップルストア銀座 3FシアターでCSS Nite in Ginza, Vol.69を開催します。

「ドーナツ本」として人気の高い『Web制作の現場で使う jQueryデザイン入門』の著者、西畑一馬さん（まぼろし、to-R）、「マカロン本」として人気の高い『iPhone+Android スマートフォンサイト制作入門』の著者であるたにぐちまことさん（イチツーオー・スペース、anygraphica）をお迎えし、スマートフォンサイト制作、および、jQueryの基本についてお話しいただきます。

参加費は無料です。優先入場が可能な事前登録を開始しています。

2013年4月23日（火）、クリーク・アンド・リバー社セミナールームでクリ☆ステ特別編： 長谷川恭久の「マジカルコンテンツツアー ～今知っておきたいコンテンツのすべて」 を開催し、40名ほどの方にご参加いただきました。

2013年4月18日(木)、コワーキングスペース茅場町Co-EdoでCSS Nite at Co-Edo, Vol.9 「スマホサイト設計大会議」を開催し、22名の方にご参加いただきました。

2013年4月13日(土) ベルサール九段でCSS Niteビギナーズ：HTML5+CSS3を開催し、240名ほどの方にご参加いただきました。

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

• CSS Niteビギナーズ：HTML5+CSS3 - Togetter」

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

• CSS Niteビギナーズ：HTML5+CSS3参加 - The blog of H.Fujimoto

2013年4月23日（火）14:00-17:00、クリーク・アンド・リバー社セミナールーム（麹町）にて、クリ☆ステ特別編：長谷川恭久の「マジカルコンテンツツアー ?今知っておきたいコンテンツのすべてを紹介します」 を開催します。

本講座では昨年11月から全国各地で開催しているセミナー＆ワークショップ「コンテンツ三部作」のすべてを圧縮版で紹介します。コンテンツについて学習するためのキッカケをつくりたい方。自分の興味がもてる領域があるか確かめてみたい方。なぜ近年コンテンツという言葉をたくさん聞くようになったか気になる方にオススメです。

2013年1月から2月にコワーキングスペース茅場町Co-Edoで開催したCSS Nite at Co-Edo, Vol.1 「マルチデバイス化を見据えた コンテンツ設計 基礎講座」の続編です。「マルチデバイス化を見据えた コンテンツ設計 基礎講座」再演、再々演を行い、合計で80名弱の方にご参加いただきました（「マルチデバイス化を見据えた コンテンツ設計 基礎講座」を受講されていない方でもご参加いただだけます）。

• CSS Nite at Co-Edo, Vol.1 「マルチデバイス化を見据えた コンテンツ設計 基礎講座」が終了しました

告知期間が短く、また、日中の開催ですが、たくさんの方のご参加をお待ちしています。

2013年4月4日（木）19:30-21:00、コワーキングスペース茅場町Co-EdoでCSS Nite @Co-Edo, Vol.8 「UIデザインのパターン化」を開催し、31名の方にご参加いただきました。

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

• Wakana.me | CSSNite UIデザインのパターン化　に参加してきたよ！
• CSS Nite ＠Co-Edo, Vol.8「UIデザインのパターン化」に行ってきたよ - Mitsu.log();

2013年4月27日（土）アウガ 5F AV多機能ホール（青森市）でCSS Nite in AOMORI, Vol.7を開催します。

「プロの仕事から考えるコンテンツの活かし方」をテーマに、5つのセッションで構成します。

• 基調講演／長谷川 恭久
• ライティング／森田 哲生（Rockaku）
• 写真／西川 幸冶（STUDIO・2GRAM）
• サーバーツール／阿部 正幸（KDDIウェブコミュニケーションズ）
• 映像／川井 拓也（ヒマナイヌ）

ウェブ制作の現場では、コンテンツのクオリティをあげるため、異業種のプロといっしょに仕事をする機会が増えています。
コピーライターやフォトグラファー、映像クリエイターなど、その道のプロはどういうことを考え、どういったフローで仕事を進めているのでしょうか？

ウェブへのアクセス環境のマルチデバイス化など、情報発信が複雑化している現在、ユーザーに届けるべき「コンテンツ」そのものの重要性は高まっています。

その道のプロのクリエイティブを、単なる「納品物・データ」ではなく「コンテンツ」として活かすためにも、異業種のプロの話を聞いてみましょう。

早期割引は、あと3日で終了です。