Mattune TOP Webデザイン HTML5とCSS3を使ってみた。

  • 2010
  • 02.06
  • (Sat)

みなさんこんにちは。
ずいぶんと更新をサボってたまっつんです。


完全に出遅れな話ですが、初めてhtml5とcss3を使ってみました。

いろいろチュートリアルとかサンプルなんかは見てましたが、いまいちピンときてなかったので、実際に自分でサンプルを作ってみようと思いました。

今回試してみたのは、html5で追加されるタグで割と使用頻度の高そうなタグ(articleやsection)とcss3の角丸やシャドウ等々。

正直、こんなのソース見ないと一般ユーザーからしたら全然分からないものなので、コーダーの自己満足的な要素が大きいかとも思います。

サンプルを見る。

動作確認は諸々のブラウザでしてみましたが、見え方が全部バラバラです。
特にIEなんかは表示させようとする努力すら見受けられませんでした...(´Д`;)
safariやGoogleChromeは比較的まともに見えます。
簡単に言うとこんな感じ。

safari、GoogleChrome>>>Firefox、opera>>>越えられない壁>>>>>>>>>>>IE


で、いろいろよく聞くsectionやarticleタグ。
雑誌とかを見る限りコンテンツのブロック分けがわかりやすく簡単になった 的な内容が多かったのですが、sectionタグだけでくくってもfloatやwidthが効かなかったです....なんで?
根本的な原因をいまいち理解してないのですが、display:blockをかけると上手く効きました。
どうやらdivと同じ感覚でつかってると全部上手く表示されません。(´・ω・`)
もっと勉強せねば...!


css3の角丸機能は、思ってたよりもキレイなんじゃないかと感じます。
気にする人は気にするんでしょうが、シンプルなソースで楽して作れるならコレで十分です。
テキストのシャドウは結構使いどころがむずかしい気がします。
乗算とかが指定できればいいんですがねー。
後はサンプルにも書いてますが、擬似クラスの:last-childと:first-childが結構便利です。


最後にhtml5のミソ的な要素canvasも試してみました。
例によってIEは無視。js使えば表示できるようですが、そこまでしてやる必要はないと思います。

サンプルを見る。

これを使えばflashにかなり近い表現ができるそうです。
テキストやオブジェクトを動かしたりがhtml側だけでできる。
海外のサンプルなんかを見てると変態としか思えない技術力に脱帽(゚∀゚;)
ボクの試したサンプルとか初歩の初歩の初歩くらいの物っぽいです。

もっとインタラクティブな事をしたいですが、canvas難しい。基本的にjavascript理解してないと無理。ボクにはハードル高いww


今後のボクの秘められた力に期待したい!......と声を大にして言いたいな(´・ω・`)

HootSuite - Social Media Dashboard

コメントフォームComment Form

トラックバックTrackbacksトラックバック件数0

Page Top