HTML5

CSS3 Code Generator

2010/05/06 CSS No comments , ,

CSS3のソースコードをパパッと出力するジェネレータを作った。
巷には既に超有名ジェネレーターが2つ3つあるんだけど、
ボタンのマウスオーバーとかグラデーションで作るときもプレビュー出来るやつが欲しかったんで、
無いなら作ればいいじゃない理論で擬似クラスにも地味に対応してます。

CSS3 Code Generator

使い方は右上のHelpにちらっと書いてあるんだけど多分初見で使えると思う。
あんまりテストしてないのでバグとかリクエストとかあったらtwitterとかこの記事のコメントとかメールとかで教えて頂けると助かります。

未圧縮ソースはリポジトリに。
(さらに…)

[HTML5+CSS3] 第二回コーディングコンテスト に参加してました

2010/03/24 CSS No comments , , ,

締切後のソース公開OKらしいんで晒しておきます。

応募用デザインにキュンとしたので、思い立ったが吉日な勢いでコーディング。
連休中のいい暇つぶしになりました。
イベント自体は前々から知ってたんだけど、腰が重くてなかなか手を出さず…実質的な製作期間は4日くらい。
例によってMooToolsをしこたま多用してます。

応募用デザイン

完成したのはこれ

ボタンにはCSS3のtransitionとグラデーションをフル活用してます。
このプロパティ面白いんだけど手打ちは地獄を見れるぜ…!
transition.cssのカオスさは必見かもしれない。

一応IE6とかでも同じように見れるようにはしてあります。なんかもう癖みたいなもんで。
(さらに…)

[html] HTML5のサンプルソースと仕様メモ

2009/07/08 HTML&XHTML No comments

HTML5のサンプルソースを作りがてら調べた仕様などを適当にメモっています。
サンプルはこのブログのトップをHTML5化したものです。

html5 demo image

この記事を書いてからHTML5で組んだものがいくつかあります。参考にどうぞ。

HTML4・XHTML1.0からの主な違い

  • 新しく追加された要素section, article, footer, audio, video, progress, nav, meter, time, aside, canvas, datagrid
    ※firefoxでは新要素がvoidになるので、CSSでdisplay:blockが必要。(MIMEをXHTMLのにすればおkらしい
    ※IEではjavascriptによるフォローが必要。
  • 新しいフォームのコントロールタイプ – dates と times, email, url, search
    ※フルサポートしているのは今のところopera9.6だけらしい。
    ※フルサポートしているのがOperaなのは変わらない。カレンダーの表示や時間枠の表示、type=”nuber”にしたとき矢印が表示されるのもOperaだけなので、同等の機能が他のブラウザにも欲しい時はJavaScriptで実装するしかない。
  • 新しい属性ping (aarea要素), charset ( meta要素), async (script要素)
  • 全ての要素で使用可能なグローバル属性id, tabindex, hidden
  • 廃止された要素center, font, strike

Sectionsの使いどころがイマイチよく分からない。
ブログの場合だとarticle=各記事という扱いになるらしいが…。

(さらに…)