HTML5/CSS3│ISC開発者ブログ

HTML5 おさらい！

投稿者：isc_blog

HTML5 ・・・なんだかんだ言っても、まだまだ実際のところHTML5でコーディングなんていうプロジェクトはそうそう無い。

そんな状態なので、一度かじったHTML5もいつの間にか・・・はてな？ハテナ？はて？おやまぁ？状態なのである。

まだまだ身についていない。

だがしかし！「HTML5できますか？」って案件が明日来たらどうする？
「出来ません！」なんてことなら仕事なんて一生来ない。

「出来ます！」って即答でなくても・・・
せめて
「で、で、で、出来ますよ。いえいえ。もちろんｗｗｗ」と笑ってごまかす程度には知っていたい。

・・・というわけで、このサイトが役立ちます！
↓

HTML5についてのおさらい – W3G Blog Studies.

なんともわかりやすい！
こんなドキュメントを書きたいものですなぁ～

オススメです。

元記事：

フリーフードファイター兼SE活動日記 » HTML5 おさらい！.

2012年3月20日

HTML5とFlash　機能比較

投稿者：isc_blog

これってHTML5で出来てる！？　すげーなー
ってサイト多くなって来ましたね！

でも、Flashで作ったほうが良かったり・・・そもそもHTML5では出来なかったり、逆にFlashでは出来なかったり・・・っていうのをまとめてくださっているサイトがありましたのでご紹介します。

Flashだとここまでできる! HTML5とFlashの機能比較

こちらの記事でも書いてありますが、HTML5っていっても結局ブラウザ依存なわけで・・・
今のところ、HTML5だと・・・っていうより「現状このブラウザだと・・・」っていう感じになってしまっています。

ブラウザ間のHTML5対応が充実してこないと比較出来るものではない・・・かもしれません。

しかし、この記事内で紹介されている↓↓このサイトすごいな・・・
http://www.audiotool.com/

2011年9月16日

CSS3のすごいサンプル・チュートリアル

投稿者：isc_blog

ホームページ作る人のネタ帳さんより
CSS3で作成されたサンプル・チュートリアルを紹介している
CSS3で作るあんなものやこんなもの
という記事を見つけましたのでご紹介します。

中には画像のようなものを描いてしまうものや宇宙～まであるんですが
こちらがわかりやすかったのでご紹介します。

The Shapes of CSS
こちらでは丸や三角から始まって台形～ハートまでいろいろなソースをサンプル提示してくださっています。

こんなソースでハートが書けちゃうんですね・・・

[html]
<div id="heart"></div>
<style contenteditable>
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
</style>
[/html]