CSS Nite in NIIGATA, Vol.3 に参加してきました！ #cssnite_niigata3

まどか☆マギカ一番くじの名刺入れを持って名刺交換していた [twitter:@jasmine88_] です。

昨日、朱鷺メッセで開催された CSS Nite in NIIGATA, Vol.3 with Microsoft に参加してきました！

セッション概要

1.基調講演

HTML5 CSS3 とその周辺技術についての説明

何度も繰り返された、「HTML5はあらゆるデジタルコンテンツのベースフォーマットになる」という言葉。(大事な事なので3回くらい言いました)

現在の日本ではHTML5の普及率は16％を超え、広く一般に普及しだしているので、そろそろはじめないと乗り遅れてしまうらしい。

今後の動向

Webコンテンツのアプリ化
　↓
ネイティブアプリもWebテクノロジーで作れる時代に
　↓
Webテクノロジー、ブラウザ、OSの一体化

という風になっていくようです。

2.CSS3で変わるWeb制作

CSS3の、新しいセレクター、プロパティ、＠ルールについての説明、主なプロパティなど10種の説明などがありました。

新しいセレクター

大幅に追加されたことで、CSSのためだけにHTMLタグを書く必要が減り、よりクリーンなHTMLに。

新しいプロパティ

さまざまな効果を加えられるので、画像なしでもリッチなデザインが可能に。

＠ルール

レスポンシブWebデザインが可能に。

主なプロパティ等

rgba

色指定の時に透明度を指定できる。

opacity

要素全体の透明度を指定する。内包する文字なども対象になる。

text-shadow

文字に影をつける。使い方次第で様々なデザインに。

box-shadow

border-radius

gradient

3つを組み合わせて画像なしでボタンをつくる実演がありました。

multiple background

background を複数指定できる。

transform

transition

CSSだけでさまざまなアニメーションが可能。

Web Fonts

使う際のポイントや、メリットとデメリット。

読み込みにラグがあったりするので、うまくカバーする必要が。

こちらの三角形を題材に、CSS3だけで図形を描く実演と解説がありました。

CSS3に対応していないブラウザ対策として、あえて「何もしない」というのがありました。
見た目を美しくするための装飾など、必要不可欠でないものは、対応しているブラウザだけで見てもらえればいいや。って事ですね。

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

HTML5の新しい書式についての解説がありました。
section などの新要素の使い方を、お題となるサイトをもとに実際にやってみました。

section

セクション

nav

主要なナビゲーションのセクション

article

独立した内容として成立するセクション

aside

主要コンテンツと関連性の低いもの

hgroup

見出しグループ

header

ヘッダー

footer

フッター

サイトのどの部分がどのセクションになるかやっていくんですが、これが意外と難しい…
慣れが必要です。
これを使いこなせるようになると、div の3重4重の入れ子…なんていうややこしいことは必要なくなります。
そうなると、つくるのもメンテナンスも楽になり、ユーザーにとっても、文書構造がわかりやすく便利に。

また、アウトラインという考え方についての話がありました。
セクションを上手に使って、アウトラインも意識したサイト作りをしていきたい。(そもそもサイトもってないけど)

4.スマートフォン向けウェブサービスをHTML5でバージョンアップ

mixPaper という、電子書籍の制作・配信ができるウェブサービスを、HTML5でバージョンアップする過程を紹介していただきました。

Webサイト+アプリ+コンテンツ

で構成されていたものが、HTML5とCSS3でアプリの機能の一部分をまかなえるようになり、将来的に

Webサイト+コンテンツ

という構成にすることで、サービス全体の利便性を向上させることができる。というような内容でした。

5.IEのF12 開発者ツールとVisual Studio 2010で HTML5/CSS3/JavaScriptをコーディングする

Microsoft の Visual Web Developer 2010 という開発ツールと、IEに搭載されているF12開発者ツールを使ったHTML5,CSS3,JavaScriptのコーディングの実演をしていただきました。
Visual Web Developer 2010 は無償ながら、入力支援機能が充実していて、かなり便利そう！

物江さんの独特(？)のトークで会場は爆笑の嵐でした。