CSS3 で新しいボックスレイアウト

先日、WCAN mini Markup Vol.10がありました。第10回を数える今回は「CSS3+jQueryを実際に使ってみよう!」というテーマで、WCAN x CSS Nite 2009 SPRINGでの益子さんのセッションを実践し紹介し合おうというものです。

僕が紹介したのは、CSS3のレイアウトに関する新しいプロパティ[1]。新しいプロパティを使うとこれからすごくレイアウト組が楽になるよね!ってことがいいたかったので、説明は他所に任せてサンプルを見ていただいくことでイメージしてもらう形にしています。

なお、今回のサンプルは一部のブラウザのみしか動作しません。オススメはSafariかGoogle Chromeです[2]

“CSS3 で新しいボックスレイアウト” の続きを読む

  1. jQueryの紹介は他の方にお任せってことで;-P [back]
  2. Chromeは一応ベータ版ですがMac版もありますよ。 [back]

HTML5 で試しに Web ページを組んでみた

このエントリは、「HTML5 で試しに Web ページを組んでみた (改訂版)」の記事によって加筆されています。あわせてご覧ください。

このエントリは、「CSSロールオーバーのアクセシビリティを少し考えてみた」や「CSSでボックス要素を画面中央に表示させてみる」に続く試しにやってみたシリーズです。

先日、WCAN mini Markupの第8回がありました。前回の「デザインを(X)HTML化しました」に続いて、今回は「CSS ココにこだわってみました」というテーマで前回組んだHTMLを(一部でもいいので)CSSで装飾してみよう、ということをしたのですが、フツーにXHTML+CSSで組むのもつまらないなーと思って最近話題になりつつあるHTML5でページを組んでみました。主に以下のサイトを参考にしました。

HTML5で書かれた典型的なブログ記事のマークアップ例などはありますが、今回使用したサンプルのような企業サイトのマークアップ例を見つけることができませんでした。ですので上で挙げた仕様書や記事のサンプルを見つつ手探りで書いています。これをみて、そこはおかしいよ!などのご指摘ぜひお待ちしてます!

“HTML5 で試しに Web ページを組んでみた” の続きを読む

iPhone/iPod touch用のWebClipアイコンの作り方

画像 : WebClip Bookmark Icon

ついにMacworldで,薄型のMacBook「MacBook Air」が発表されました。拡張端子の大幅な省略[1]や本体にバッテリを内蔵したことは、人によって評価が分かれる部分でしょうね。[2]今回SSD搭載というモデルを出してきたわけですが、SSDの価格も下がっていくでしょうからむしろこれからが楽しみなラップトップなのかもしれません。

また、同MacWorldで2月のSDK公開に先駆けてiPod touchにiPhoneのソフトウェアが有償でインストールできるというソフトウェア・アップグレードが発表されました。僕もアップグレードして早速Mailの便利さに感動してます:-D

“iPhone/iPod touch用のWebClipアイコンの作り方” の続きを読む

  1. 特にFireWireとEthernetが省かれたのが衝撃でした [back]
  2. ちなみに僕には値段が高くて手が出ませんorz [back]

CSSでボックス要素を画面中央に表示させてみる

少し前に出た話題だけど、CSS(だけ)でブラウザのウィンドウの中央にボックスを表示させてみようと試みました。元ネタは以下の記事より。

CSSでDivを天地左右中央に配置する方法『locate div at the center vertically and horizontally』 | CREAMU

“CSSでボックス要素を画面中央に表示させてみる” の続きを読む

CSS ロールオーバーのアクセシビリティを少し考えてみた

グラフィカルなメニューなどでhover時に違った画像に変化させる際に、text-indent: -9999px; でテキストを飛ばして画像を置換する方法が過去のもの[1] になっているようです。このような場合はテキストではなく普通にimg要素を配置する方がよいと思います。

画像をそのまま配置した場合、昔のように(もっとコードは洗練されていますが) JavaScriptを使って画像置換する方法が復活していますね。でもそれはなるべくCSSでやりたいなぁと思った自分はアクセシビリティをなるべく確保するようにした画像置換方法がないか考えてみました。

画像はCSS Nite LP3の課題のものを利用させていただいています。

“CSS ロールオーバーのアクセシビリティを少し考えてみた” の続きを読む

  1. 画像OFF時に何も見えなくなりアクセシビリティ的にかなりよくない [back]