Shift9：Webデザイン行く年来る年（CSS Nite LP43）フォローアップ（2）益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん （ピクセルグリッド）、久保 知己さん（まぼろし） | CSS Nite公式サイト

2015年12月26日（土）、ソラシティホールで開催したShift9：Webデザイン行く年来る年（CSS Nite LP43）のフォローアップとして、益子 貴寛さん（サイバーガーデン）、小山田 晃浩さん （ピクセルグリッド）、久保 知己さん（まぼろし）の『マークアップ』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声

メッセージ：小山田さん

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

マークアップ・フロントエンドの視点から見た今年のトレンドと来年の予想、いかがでしたでしょうか？

HTMLやCSSなどテクニック単体での大きな変化はあまりなかった用に感じますが、それを取り巻く環境は大きく変わった用に感じます。

特にIEについて、IE8のサポートは終了し、これからは9あるいは11が下限になるというお話をしました。事実、すでにいくつかの有名サイトでは排除する方向に向かっていますし、来年はそれが普通になってくると考えています。

制作者が考えなければならないブラウザーの下限が変わればできることはより多くなります！そして理不尽な不具合にも付き合わなくてよくなるのです。

も ちろんこれは、私達の仕事が楽になるからという理由ではなく、IE8がキケンなブラウザーという建前があるからです。「だれがキケンの責任を取るのか」も 含めみなさんの上司やお客さんにも相談し、社内のガイドライン等を見なおしてみてはいかがでしょうか。そしてよりモダンな技術でよりより体験をWebの利 用者にお届けしてはどうでしょうか。

• ニコニコ動画のIEサポート変更の告知
• ぐるなびのIEサポート変更の告知
• 三菱東京UFJ銀行のIEサポート変更の告知
• SBI証券のIEサポート変更の告知?
• IPA(情報処理推進機構)からの告知
  

最後に、すこしおそくなりましたがWebGL(JavaScript)でメリークリスマス！
http://yomotsu.net/blog/assets/2015-12-25-xmas/demo/index2.html

お知らせ: 弊社ではCodeGridというメディアを運営しています。HTML、CSS、JavaScript、今回話題にした縦書きやWebアプリケーションの作り方などを毎週木曜日にお届けしています。「技術の情報を自動で仕入れたい」という方、ぜひお試しください！

マークアップセッションを担当した益子です。Shift9へのご参加、ありがとうございました。

デザイントレンドを担当した原さんと、「Shiftって、ちょっと同窓会っぽいノリで、楽しいね」と話していました。

いろんなセミナーや勉強会がありますが、9年つづけているShift、10年つづけているCSS Niteの価値が、そんなところにもあると思っています。

来年は、セッションのラインナップや出演者を見直し、ますます充実した内容をみなさんにお届けできたらと思います。

同じ時代に生まれ、生きている者同士、知識と熱を心地よく分け合える場になれたらと、いつも願っています。

マークアップセッションを担当した久保です。
ご来場ありがとうございました。

今年を振り返ると、CSSそのものには大きな変化はあまりありませんでした。
CSS設計の浸透や、SassやPostCSSなどのツールが去年とは異なる流れにのった年だと感じています。

Sassは本家のRuby Sassから、C/C++で開発されているlibSassに流れている傾向があります。
この背景には、gulpなどのNode.jsで動作するツールを利用する場合でも、libSassを使えば、わざわざRubyをインストールせずにSassをコンパイルできるようになります。

な おlibSassではSassのフレームワークのCompassが動作しません。Compassに依存してサイトを構築している方は、気をつけてくださ い。ただしCompassのベンダープリフィックスの付与やCSSスプライトの自動生成などは、PostCSSのプラグインのautoprefixerや gulpのプラグインのgulp.spritesmithで代用できます。

ライブコーディングでは、gulp, jade, Sass(libSass), Browsersync, Emmetのデモを行いました。

Browsersync は、ファイルを保存するだけでブラウザが自動的に更新されるツールです。また開発しているパソコンと同じWi-Fiにつないだスマートフォンからターミナ ル(コマンドプロンプト)に表示されるURLにアクセスすると、パソコンで見ているWebページと同期し、ファイルの自動更新、スクロールなどの同期など が行われます。
パソコンやスマートフォンのWebサイトの開発には、必要なツールとなっています。

Emmetは、CSSプロパティの展開を行っていたエディタのプラグインです。[p20-0]と入力して、Emmetのアクションを実行すると[padding: 20px 0;]と展開されます。
CSSの記述を素早く行えるようになるプラグインです。
Emmetが動作するエディタは、Sublime TextやDreamweaver, Brackets, Atom, WebStorm, Vimなど、これ以外にも多くのエディタで動作するプラグインです。
すぐに導入できるものなので、インストールしておくといいでしょう。

なおEmmetは展開するだけのツールと勘違いされている方が多いですが、HTMLやCSSを楽に書くためのアクション集です。

詳しくは、私がAdobe Creative Stationで連載していた全6回のEmmetの記事をご覧ください。
https://blogs.adobe.com/creativestation/web-learning-emmet-why-emmet

今回のライブコーディングで使用したgulpfileは、GitHubに公開します。
気になる方は、ぜひご確認ください。
https://github.com/kojika17/2015-shift9-livecoding

2016年1月9日に「と、コラボ特別編 Webクリエイター新年会 featuring まぼろし」というイベントを行います。弊社まぼろしのスタッフが多く出演するイベントです。
席に限りがありますが、お時間がございましたら、ぜひお越しください。
http://www.creativevillage.ne.jp/lp/tocolabo_special/

Shift9［#2］マークアップ from CSS Nite on Vimeo.