maki-o memo

制作に関する私的なメモです

選択されているタグ : セミナー

タグを絞り込む : a-blog_cms bingo!CMS CMS css css3 CSS_nite CSSプリプロセッサ Dreamweaver Frontrend HCD HTML5 IA IE6 iPhone jQuery js LESS miniMU MISO movableType Sass SOY_CMS Stylus subversion talkNote UX WCAF WCAN こもりまさあき たにぐちまこと アクセシビリティ アクセス解析 オブザベーション カラー カラーデザイン勉強会 スパゲッティ・キャンチレバー ディレクション ビジネスモデル・ジェネレーション ブランディング プラグイン プレゼン ペルソナ/シナリオ法 マネタイズ モジュール開発 レポート 佐々木敏明 佐藤歩 勉強会 原一浩 古家秀樹 名村晋治 坂本邦夫 大屋慶太 安藤建一 小久保浩大郎 小山田晃浩 小林正 山田あかね 山越崇裕 岡部和昌 平木聡 志鎌真奈美 斉藤祐也 木村哲朗 水野隼登 池田拓司 浅野智 石本光司 福井 著作権 表示速度最適化 西畑一馬 角掛健志 谷拓樹 遠山桂 静岡 高津戸壮 高畑哲平 鷹野雅弘

WCAN mini Markup Vol.11

少し前ですが、10/23日にWCAN mini MUに行ってきました。

wcanMiniMuv11

今回の内容は、HTML5。
先日のWCAN Autumnでの、菊池崇さんの講演をふまえ、2つのテーマをもとにディスカッション形式で行われました。
テーマは以下の2つ。

  • SESSION-1 : HTML5の情報はどこで調べてる?
  • SESSION-2 : HTML5のソースを見せ合おう!

以下、個別な見解です。

HTML5の情報はどこで調べてる?

ほとんど調べてません;
唯一がここです。
HTML5.jp

実際今回課題で組んでみたのが初めてで、やっぱり実際やってみない事には調べる事もしないですね。
これではダメなんですけど;

かずみちさんが同じグループで、一杯関連のサイトをピックアップされてました。
その中で面白かったものを再度ピックアップ。

まず、上部の「株式会社あゆた HTML5サンプル集」は、いくつかサンプルが掲載されています。
どれも面白いのですが中でも、フォームのサンプルが良かったです。
HTML5で、追加予定(?)のinputのtype属性値が羅列されています。
自分、はっきり言って知りませんでした;

中にはまだ何に使うのかわからない属性値もありますが、これらが実装されれば、問い合わせフォームやWebアプリケーションでもっといろんな事ができそうです。

次の「WebKit HTML 5 SQL Storage Notes Demo」は、Safariのローカルのデータベースを使ったサンプルのようです。
詳しくはわかりませんが、jsでsql文を操作し、ローカルのDBに、テーブル作成・インプット・セレクト等が行えるそうです。cookieに似てますが、cookieと違って有効期限がないそうです。
ローカルにデータベースを、って発想は今までありませんでしたが、今後スタンダードになっていくのでしょうか?これもいろいろ新しい事ができそうです。

情報収集は大事ですね。

HTML5のソースを見せ合おう!

以前のmuで作ったものを、HTML5に書き直して持っていきました。

課題

その後得た情報で若干書き直しましたが、
ディスカッションで議題に上がったのは以下のような内容。

  1. sectionや、article毎に見出しは常にh1でいいの?
  2. sectionの使い所って?
  3. asideってサイドカラムでいいの?
  4. articleの中には、header,footerを使用してもいいっていうのに違和感が、、、
  5. divは一番外に結局存在するの?
  6. そもそもまだHTML5って早いのでは?

sectionや、article毎に見出しは常にh1でいいの?

これについては、今まで必死こいて文書構造を考え、辻褄を合わせてh要素のレベルの妥当性を日々試行錯誤していた私にはとっても違和感があります。
h1ばっかだとh2とかh3はいつ出てくんだ?とも思います('h'でいーじゃん)。
しかし、h1ばっかだったとしても文書構造はsectionの入れ子で表現し、それをブラウザやクローラーなどが適切に判断してくれれば問題ないのでしょうか。
スタイルシート無効だと、でかい見出しばっかになっちゃうし。

でも余計な事考えなくていいので、h1ばっか派です。
あとはh2以下の使い所をはっきりして欲しいとこ。

sectionの使い所って?

個人的には、コンテンツの範囲を設定し、文書構造を表現する為に存在するもの。
としてマークアップしました。
なので、デザインの為だけに囲いたいものはdivにしてます。

でも悩むのがカラム分けのdiv。
あれってカラム分けをデザインの為だと考えるとdivになるし、
カラム分けは文書構造って考えるとsectionになる?
今回はdivにしました。
あ、でもサイドカラムはasideにしたな、、、

asideってサイドカラムでいいの?

asideの定義はこうです

その前後のコンテンツには関係しているけれども、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページのセクション

わかりにくー;
僕こういった類いの解説文ってキライです。回りくどい;

とりあえず、とらえようによっちゃーサイドカラムでもよさそうな内容だと思います。
ディスカッション後の発表の場でも触れられてましたが、他にasideとしてマークアップできそうな箇所としては、”注釈”とか、個人的にはアマゾンなんかの”この本を買った人はこんなのも見てます”みたいなところもasideなのかなって思ってます。

articleの中には、header,footerを使用してもいいっていうのに違和感が、、、

これにも違和感が。
考え方は好きなんですが、今までheaderとかfooterってページに必ず一個ずつだったし、articleの度に、header,footer出てきたらソースが煩雑になる気が、、、
今までidでheader,footer指定してたのに、ページに何個も出てきたらclass的扱いになった印象です。

マークアップ自体は楽なんですけどね。

divは一番外に結局存在するの?

ページをひとつのsectionととらえるならば、一番外はsectionでもいいのではないかと思います。でもデザイン的に囲いが必要ならばdivになるのかな?
今回の課題の大外は、div×2,sectionでできてます。

そもそもまだHTML5って早いのでは?

この発言は、某A社の、Kさんが言っておられました。
今はHTML5やるよりCSS3やったほうが?とも言っておられました。

まとめると、

上記のように散々個人的見解を述べてまいりましたが、
結局HTML5はまだ早いと思います。

会の最後の方に、versionfiveさんが、
「HTML5は生ものです」 と、言われてたのが印象的でした。
「麻婆豆腐は飲み物です」に似てます。 マークアップに関しては、今後更に議論が重ねられ、より妥当性の高いものが出来てくると思います。
今は結論でないすね。

しかしそれ以外の連携する技術の、DOMやjs,cssなどをHTML5が、より実践的になった時、実装がいつでもできるように今から出来る事をやっておかないといけないと思います。

以上です。


プロフィール

フロントエンドエンジニア

Tomokazu Makita

名古屋でフリーランスでWeb制作してます。 フロントエンドのことを主にやってます。
a-blog cmsを使用したサイト制作が得意です。
お仕事のご相談随時受付中。

雪山大すき。冬は雪山の合間に仕事します。
財布はいつも吹雪です。

エントリーリスト

タグ