CSS Nite in NIIGATA, Vol.3 with Microsoft 参加レポート

すっげー充実!うかです、こんにちわ。

2012年4月21日、汗ばむような陽気のなか、CSS Nite in NIIGATA, Vol.3 with Microsoftが開催、HTML5、CSS3についてガッツリ学んできました。

CSS Nite in NIIGATA, Vol.3 width Microsoft会場「朱鷺メッセ」と桜

基調講演

最初のセッションは益子貴寛さんによる「HTML5」に関する基調講演。キーワードは「あらゆるデジタルコンテンツのベースフォーマットになる」

CSS Nite in NIIGATA, Vol.3 width Microsoft 益子さん基調講演

1年前までは「新しいモノ好き」が使うだけだったHTML5ですが、現在ではネットに繋がる様々な媒体で使われており、「そろそろ触らなければヤバい状況」とのこと。

HTML5で制作されたサイトは日本を代表するような大手企業(毎日新聞無印良品などなど)でも導入されているとの事例紹介があり、徐々に一般化しつつある様子が伺えました。

そして、ウェブサイト制作者にとって悩ましい問題である「IE対応」ですが、これまでIE6をベースとしていたものを、これからはIE8に引き上げてもいいというのが印象的でした。

目次に戻る

CSS3で変わるWeb制作

2つめは鷹野雅弘さんによる「CSS3」の基礎講座。

CSS Nite in NIIGATA, Vol.3 width Microsoft 鷹野さんセッション

CSS3から新たに追加されたセレクター、プロパティ、@ルールが多くあるんですが、その中から10個のプロパティに絞って、基礎的な使い方を教えていただきました。

(1) rgba(red, green, blue, alpha)
背景色のみの不透明度=文字色はそのまま。
(2) opacity
ボックス全体の不透明度=文字色も薄く。
(3) text-shadow
文字の影。ブラー効果もCSSだけで実装できる。
(4) box-shadow
insetで背景色と同色にするとボケ味が出る。
(5) border-radius
定番の角丸。画像を使わないので効率的。
(6) gradient
グラデーション。大きな範囲に当てると重くなるので要注意。
(7) multiple-background
不透明なマスク効果を与えることができる。
(8) transform
アニメーションと合わせて使う。
(9) transtion
:hoverに付けてしまうとアニメーションが不完全。
(10) web fonts
読み込み時のタイムラグ、太字との兼ね合い、ある程度の大きさ、Win環境、カーニングなど少々問題も。

ここでも気になる「IE対応」なんですが、あえて「何もしない」という方法もありだそう。

このブログでも角丸を使ってるんですが、IE対応はしてません。使い勝手なんかに大きく影響が出ないような場合は、そのままでいいような気がします。

目次に戻る

HTML5によるWebサイト制作の基本

3つめのセッションは、再び益子さんが登壇、HTML5の基本的な使い方を解説していただきました。

CSS Nite in NIIGATA, Vol.3 width Microsoft HTML5の演習

ここでは、HTML5から新たに設けられた「section」「article」「aside」「nav」というタグについて、既存のサイトのどの部分がそれに当てはまるかという演習問題がある、より実践的な内容でした。

HTML5で作ったサイトは、必ずアウトラインを確認するようにとのこと。先日リニューアルしたこのブログ、アウトラインがどうも思った感じになってなかったので、後日ソースを書き直したいと思います。

目次に戻る

スマートフォン向けWebサービスをHTML5でバージョンアップ

セッション4つめは、栃倉淳子さんによる、HTML5を使ったスマートフォン向けサイトの改善実例について。

CSS Nite in NIIGATA, Vol.3 width Microsoft 栃倉さんセッション

栃倉さんが所属する会社がリリースしている電子書籍作成・配信サービス「mixPaper」のスマートフォン版をHTML5で作成されたとのこと。

HTML5で新たに追加されたcanvasプロパティを使ったページめくり(ペラッってなるやつ)の実装や、アプリケーションキャッシュを使ってオフライン時でも電子書籍が読める機能(これ、すごいと思った)など、実際のデモを通してご紹介いただきました。

目次に戻る

IEのF12ツールとVisual Studio2010でHTML5/CSS3/JavaScriptをコーティングする

Microsoft・物江 修さんによる「IEのウェブ開発ツール」についてが5つめのセッション。実際にコードを書きながらのデモが行われました。

CSS Nite in NIIGATA, Vol.3 width Microsoft 物江さんセッション

IEというとHTML5は対応してないし、CSS3はてんでダメだし…(←IE8までの話)と思っていたら、開発ツールではHTML5 / CSS3にしっかり対応されていて、すっごく便利そうに見えたのがこれ。

HTML5、CSS3、JavaScript、jQueryなどに対応した入力支援ツールなんですが、これがなんと無料。物江さんご自身が書かれたインストール方法の解説もあります。

私はこれまで、ずーっとテキストエディタに手打ちという方法でサイトを作ってきたんですが、デモを見たらすっごく便利そう。後日インストールして、ブログに感想を書きたいと思います。

目次に戻る

Internet Explorer10とMicrosoftにとってのHTML5

最後のセッションが、Microsoft・春日井さんによるIE10と、HTML5・CSS3の対応について。

CSS Nite in NIIGATA, Vol.3 width Microsoft 春日井さんセッション

IE8まではHTML5、CSS3に対応していないInternet Explorerですが、IE9から一部機能を除いて対応、IE10ではさらに多くのプロパティに対応するとのこと。

また、現在のウェブ制作の難点となっている「IE6」ですが、Microsoft自身も新しいIEを使ってもらう方向で動いており、自動アップデートが導入されたことでそれが加速するのではないかという印象を受けました。

そして、このセッションで最も印象に残ったのがこれ。

最新のHTML5 APIへの対応が遅れがちな理由は、セキュリティ面や安定性を熟慮しているから

多くの企業で使用され、他のブラウザよりも広いユーザー層を持つIE。HTML5やCSS3に準拠するのはいいとして、問題があったから機能を取り下げるというわけにはいかない、そのために非常に深い検討を行なっているとのことでした。

ウェブ制作をするうえでIE対応は厄介な問題。なので私も「このIEめ…」なんて書いたりもしてましたが、そういう理由があって対応してなかったんですね…。今後は「IEェ…」とか書かないようにしたいと思いますw

【2012-04-23追記】
講演者・春日井さんからご指摘をいただき、一部加筆・訂正させていただきました。

目次に戻る

全体を通して

以上、6つのセッションの概要をまとめてみましたが、全体を通して頻繁に聞かれたキーワードが「Webアプリ」という言葉。

CSS Nite in NIIGATA, Vol.3 width Microsoft 出演者・スタッフ+1名

従来のWebサイトは「見てもらうもの」、それが現在では、「使ってもらうもの」になってきているとのこと。

このWebアプリのベースとなるものがHTML5だったりするようで、近い将来、HTML5を使うことが標準的になるような気がしました。

目次に戻る

アフターパーティー・2次会・3次会

セッション終了後、会場・朱鷺メッセ内にあるレストランに場所を移してアフターパーティーが開催されました。

CSS Nite in NIIGATA, Vol.3 width Microsoft アフターパーティー

先日、アフターパーティーは参加すべし!という記事を書いたんですが、それを読んで参加して下さった方もいて、すっごく嬉しかったですw

CSS Nite in NIIGATA, Vol.3 width Microsoft 二次会

そして、いつものように参加者同士のコミュニケーションあり、中身の濃い話あり。やっぱね、アフターパーティーに参加しないのは絶対損だわ!

2次会、3次会と流れてホテルに戻ったのはここに書けないような時間ではありましたがw、疲れも心地よく、非常に充実した1日を過すことができました。

目次に戻る

おわりに

以上、ちょいと長くなってしまいましたが、CSS Nite in NIIGATA, Vol.3 with Microsoftの参加レポートでした。

今回私は個人で「協賛」という形を取らせてもらったんですが、今後も何かしらの形で応援していきたい、素晴らしいイベントでした。

講演者のみなさま、実行委員のみなさま、本当にお疲れ様した。そして、ありがとうございました!

…次回はjQueryあたりが嬉しいなー(ボソッ)

目次に戻る

関連リンク

公式サイト・参加レポートなど

過去のCSS Nite in NIIGATA参加レポート