World of granshe.

前回、社内の勉強会用につくったCSS3でどんなことができるの？についてのスライドを書いたのですが、恐縮にも下記のサイトで取り上げていただきました。ありがとうございます。

• HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月14日)
• HTML5/CSS3のニュースやTIPSなどのまとめ (2012年5月21日)

しかし、私がプレゼン用のスライドに、私の名前ではなくスライドテンプレートの作者の名前を入れたまま公開してしまったため、『Operaの方のセミナーか何かの資料？』とコメントいただいていますが、私が作成したもので、Vadim Makeevさんや Opera Softwareには一切何の関係もないことをこちらでお詫び申し上げます･･･。
紛らわしいことをして申し訳ありませんでした。

今回は社内勉強会用のスライド第2弾、RWD（レスポンシブ・ウェブ・デザイン）についての雑記をまとめました。
RWDについて

RWDがよく分かっていない人（HTML5とCSS3の境があいまいな人）用に書いた資料なので、技術者視点からすると当たり前のことなのですが、つらつらと書いてみました。

なお、大変恐縮ながら、正直に申し上げますと、作者自身は実案件でRWDの構築をしたことがありません。
あくまでも『情報』『知識』ベースで記載したもので、実践が伴っていない点は個人的にも説得力に欠けるとは思っています。

ただ、あくまでも基本的な考え方はこうなんだよ、ということだけは伝えたくて、資料をまとめました。
どうも、『スマホサイトを作る＝レスポンシブ！』『レスポンシブ＝とにかくすごい！』という短絡的な流れが私の周辺で見えてきていて、その考えが蔓延するのが恐ろしくて、急いで筆を取りました。

レスポンシブは万能ではないこと、どのアプローチもそれぞれメリット・デメリットがあり、要はクライアントとコンシューマーによって、アプローチを使い分けるのが大切なんだよということが言いたかったです。

社内で毎週持ち回りで技術的なことを話す会があるのですが、
そこで使用したスライドをこちらでも共有しようと思います。

社内の『CSS3って何なの？具体的にどーいうことができるの？』という人に向けて書いたスライドなので、残念ながら目新しいことはほとんど書いていません。

SafariもしくはChromeで動作確認しています。推奨はiPad（MediaQuery部分）
CSS3について

数ヶ月くらい前に書いた資料なので、情報が一部古いかもしれませんがご了承ください。
前述しましたが『CSS3って何なの？具体的にどーいうことができるの？』という人向けなので、技術的な部分を端折ったり簡易化している部分があります。

ツッコミなどございましたらお願いいたします。

ゴールデンウィークももう終わりですね。

最近情報収集のためにTwitterをはじめたんですが、 すごくいい情報がどんどん入ってくるので、インプットにはかなりいいツールだと思いました。 使ってよかったです。

そこで、HTML5についての分かりやすいまとめが載っていたので紹介させていただきます。

HTML5とは何かを簡単にまとめてみた
http://techblog.yahoo.co.jp/cat207/web_1/html5/

自分なりに、上記の記事を簡易的にまとめてみました（私的な解釈も含んでいます）。
（詳細は上記の記事を読んでいただければ分かると思います。）

1.今まで難しかった、下記の機能の実装が容易になりました。

• 動画や音声、グラフィックの描画（video/audio/canvas）
• 位置情報の取得・クライアント側に大量データを保持させる（geolocation/LocalStorage）
  ことが、JavaScriptを用いて容易に実装可能になる。
• フォーム周りの機能強化（type属性の種類の増加/必須項目を示すrequire属性/インプットエリア内にデフォルトの文字列を表示させるplaceholder属性）

HTML側の変化

• 基本構造が変化
  （DOCTYPE、charset、linkの指定が短くなった。）
• 現在のWebサイト特性に合わせたタグを新設
  （ページのヘッダー等見出し群を囲むhgroup、ブログ記事など、単体で独立可能なエリアを囲むarticle、コンテンツを一定の意味合いごとに区切るsection、本筋とは違う要素をマークアップするaside、具体的な時間を表すのに使用するdata、などなど）
• （特にインライン要素の）要素の意味合いが変化（small/i/s　など）
• inline要素・block要素という区分けの廃止（明記されているか調べていないが、おそらくそう。）
• aタグが今までのブロック要素にあたるもの（pやdivなど）を包含可能に

改めてW3Cの仕様書を見てみると、面白く見えたのでまた読解に挑戦してみたいです。
時間になってしまったので、今日はこれにて。