コーディングコンテストで優秀賞をいただきました
2
0
先日開催されたCSS Nite LP9の連動企画第2回コーディングコンテストにて、優秀賞(Firefox賞)をいただきました。
僕が応募したものは、CSSのグラデーションじゃなくて普通にpngでやってたり、CSS3をばりばり使っていなかったのですが、選ばれてびっくりです。
- Tag
- sample
CSS Nite LP9 第2回コーディングコンテストに応募しました
来る4月17日に開催されるCSS Nite LP, Disk 9「Coder’s Higher」の連動企画として、CSS Nite LP9 連動 第2回コーディングコンテストが開催されます。〆切は3月23日でした。僕も一応作ってみたので公開してみます。今晒しておけばのちのち恥ずかしくならないからね･･･！
after 疑似要素で CSS ロールオーバー
この記事は「CSS ロールオーバーのアクセシビリティを少し考えてみた」の続きです。
以前、画像のCSSロールオーバーについてアクセシブルな方法はないかと考えてみたことがありました。あれから約2年、新しいサイトのHTML組んでたら、たまたま違う方法を見つけたので覚え書きしておきます。
ブラウザの対応は、おそらくafter疑似要素(contentプロパティ)に対応するブラウザなら表示されると思います。つまり、IE7以前はそもそもロールオーバーにならないってことです。まぁそこはこの際いいんです[1]。
今回も画像はCSS Nite LP3の課題のものを利用させていただいています。
HTML5 で試しに Web ページを組んでみた (改訂版)
このエントリは、「HTML5 で試しに Web ページを組んでみた」の記事の続きです。
先日のGoogle I/Oで大きく取り上げられたように、最近HTML5のニュースが増えていて注目度が上がっているようです。canvas要素やvideo要素、オフラインキャッシュのような、アプリケーション開発におけるHTML5が主に注目されているようですが、Safari 4のウェルカムページがHTML5で描かれていたり、国内でもlivedoorのラボが積極的に採用したりと事例も増えていますね。
そこで、約半年前に作ってみたサンプルのコードを見直して修正してみました。参考にしたのは以下のページです。
- HTML 5 (W3C Working Draft 23 April 2009)
- HTML 5 (Editor’s Draft 13 June 2009)
- HTML 5 ― HTML 4 からの変更点 (Working Draft 23 April 2009)
- web:g
CSS3 で新しいボックスレイアウト
このエントリは、「CSSロールオーバーのアクセシビリティを少し考えてみた」や「CSSでボックス要素を画面中央に表示させてみる」、「HTML5 で試しに Web ページを組んでみた」に続く試しにやってみたシリーズです。
先日、WCAN mini Markup Vol.10がありました。第10回を数える今回は「CSS3＋jQueryを実際に使ってみよう！」というテーマで、WCAN x CSS Nite 2009 SPRINGでの益子さんのセッションを実践し紹介し合おうというものです。
僕が紹介したのは、CSS3のレイアウトに関する新しいプロパティ[1]。新しいプロパティを使うとこれからすごくレイアウト組が楽になるよね！ってことがいいたかったので、説明は他所に任せてサンプルを見ていただいくことでイメージしてもらう形にしています。
なお、今回のサンプルは一部のブラウザのみしか動作しません。オススメはSafariかGoogle Chromeです[2]。
