Posted by アイ・エス・シーシステム事業部
on 2012年03月20日 in HTML,HTML5/CSS3,WEB,技術


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

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

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

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

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

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

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

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

オススメです。

元記事:

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

Posted by アイ・エス・シーシステム事業部
on 2011年09月16日 in HTML,HTML5/CSS3,JavaScript/Ajax,技術,雑記


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

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

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

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

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

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

Posted by アイ・エス・シーシステム事業部
on 2011年08月25日 in HTML,HTML5/CSS3,WEB,技術


ホームページ作る人のネタ帳さんより
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]

—- ここからサンプルです。 — CSS3対応ブラウザにて御覧ください。



—- ここまで —- (表示されない方、ごめんなさい)
[大丈夫だったブラウザ]
Google Chrome では確認しました。
[ダメだったブラウザ]
InternetExplorer8 では四角に見えることを確認しました。

Posted by アイ・エス・シーシステム事業部
on 2011年08月17日 in HTML,HTML5/CSS3,WEB,デザイン


PHP SPOT開発日誌より
CSS3だけで実現する幅広で使えそうなドロップダウン実装チュートリアル

こちらの記事で紹介されているドロップダウンメニューがすごいなーと思いご紹介します。

こちら(Creating CSS3 Drop sliding list Menu #6)が紹介先のページなんですが
CSS3だけで実装されている?
というのがソースコードを見るとよくわかります。

一見するとなんちゃらJSとか書いてあるんですが、それはメニューの中のリンクであってJavaScript自体は一切使っていないです。

デモサイトも見てみてください。

これは導入する際にjQueryなのかprototype.jsなのかを気にしないでいいですね。

ページトップへ戻る

Get Adobe Flash player