CSS Nite LP25（Shift 6）フォローアップ（2）『2013年に向けて押さえておきたいマークアップ・トレンド20』（益子 貴寛さん、小山田 晃浩さん）

2012年12月15日（土） 、ベルサール神田で開催したCSS Nite LP25（Shift 6）のフォローアップとして、 益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん（ピクセルグリッド）の『2013年に向けて押さえておきたいマークアップ・トレンド20』のスライドなどを公開します。

• スライド（PDF、122ページ、8.0MB）
• 音声

メッセージ（益子さん）

マークアップセッションを担当した益子です。

今年で6年目の「Shift」。もう6年も、みなさんに愛してもらっているのかと思うと、とてもとても感慨深いです。

デバイスも、ワークフローも、制作手法も、2012年は、まさに「Shift」な一年でした。

また、仕事や生活のステージが変わった人、変わりつつある人も、きっと多かった一年だったと思うのです。

出演者として、また、みなさんと同じひとりの聞き手として、そんなことをじんわりと感じながら、セッションを楽しみました。

最後に、当日の設営は、CSS Nite地方版のみなさんにお手伝いいただきました。この場を借りて、心よりお礼申し上げます。

重い締めはイヤなので、さあ、Shift！ Shift！ Shift！

メッセージ（小山田さん）

マークアップセッションを担当した小山田です。

セッション内容、いかがでしたでしょうか。直接 HTML に触らないデザイナーさん、ディレクターさん、Web 担さんにも、関係ないのではなく、HTML5 の広い普及、それに伴うフロントエンド (HTMLコーディングなど) のワークフローに大きな変化が起こっているということは知っておくといいと思います。

なぜなら Web 作成には HTML は必ずついてくるもので、そのとき新しい技術やツールをきっと目にするはずです。

さて、セッション中の挙手によるアンケートでは、CSS プリプロセッサーを導入しているかたは 3割程度という反応をいただきました。ですので、これから導入を検討している方へのヒントをここでは共有したいと思います。Sass、LESS、stylus はどれも素晴らしいソリューションですが、もし迷われているのでしたら Sass から始めてみるといいと思います。なぜならブログなど、Web 上に情報がたくさんあるからです。

また、CSS プリプロセッサーを利用する上でビルドツールもセットで利用する必要があります。Scout は Win/Mac の両方があり、かつ無料ですので最初の導入にはいいかと思いますまとめると、導入には Sass + Scout ということです

また、Scout では物足りなくなってきたら、有償ではありますがより高機能な CodeKit や LiveReload もおすすめです。

来年 2013 年は、CSS プリプロセッサーが jQuery と同じくらいポピュラーな環境へと移り変わっていきます。ぜひこの機会に導入してみてはいかがでしょうか。

CSS プリプロセッサーについては来年の CSS Nite LP 26 で取り上げますので、これからという方は参加してみるといいかと思います。また、ビルドツールの導入や、grunt については、今後 CodeGrid(http://www.codegrid.net/) でも取り上げる予定ですのでよろしければ参考にしてみてください。

アンケートにコメントで質問いただいたきましたので、この場を借りて下記に共有したいと思います。

SVGは代替画像を表示することができますか

おかしな CSS ハックなどを使うよりは、JavaScript と組み合わせるのが一番確実です。私が以前作ったライブラリ(MIT ライセンス)がありますのでよろしければ利用してみてください。https://github.com/yomotsu/SVGReplacer

その他、細かい振り分けをしたいのであればModernizr を利用するといいでしょう。

複数人で Sass や LESS を導入して作業する際の注意点はありますか

ビルドツールを揃えるといいかと思います。というのも、ビルドツールが対応してい るCSS プリプロセッサーのバージョンによってうまく機能しない可能性があるからです。もちろん、ビルドツールが異なっても対応してい るCSS プリプロセッサーのバージョンが同じなら問題ありません。

CSS プリプロセッサーは社内で利用するにはいいけど社外向けにはどうなのでしょうか

ぜひ使ってください。Sass や LESS、Stylus は最終的に綺麗な CSS のコードを書き出します。ですので書きだした CSS ファイルを納品すればいいでしょう。もちろん、それと別に圧縮書き出しを選択することもできます。また、逆もあるかもしれません。複数人で進めているプロジェクトにアサインされた時、あなただけ Sass のファイルを開けない、なんてことになってしまうかもしれません。

メッセージ追加（小山田さん）

Shift6 の時点では未発表でしたが、本日 (12月17日)、HTML5 の仕様がほぼ Fix したようです。

本当の勧告は少し先ですが、マークアップセッション中にも触れた at risk 以外については、制作者が利用しても問題ないという目安となるでしょう。これからはさらに安心して HTML5 を採用できます。今後は PC サイト、スマホサイトなどデバイス問わず、旧 HTML でなく、より拡張性がある HTML5 を採用するといいかと思います。

at risk は HTML5.0 の草案の冒頭にも列挙されています。

ビデオ