- 2010-05-07 (金) 7:45
- Diary
Webサイトを作ってたらそのままハマってしまって、結局朝までやってしまった。どうせなら HTML 5 + CSS 3 でサイト作ってみよう！ とか思い始めちゃったのだ。まぁ、いいんだ。今日はうれしい休刊日。
CSS 3 Media Queries もちょっと使ってみたんだけど、これが結構面白い。
<link rel="stylesheet" href="sample-800.css"
media="screen and (min-width: 800px) and (max-width:1200px)" />
<link rel="stylesheet" href="sample-1200.css"
media="screen and (min-width: 1200px)" />
単一のHTMLコードで、ウィンドウ幅にあわせて見栄えを変えられる。今回は<aside>でマークアップしたウィジェットエリアを、ウインドウ幅が800px以内の場合はフッターとして、ウィンドウ幅が1200px以上の場合はサイドバーとして表示してみた。満足満足。
Internet Explorer 9 Platform Preview 版での表示。CSS 3 Media Queries もちゃんと動いたけれど、<input> の Placeholder 属性が使えないほか、テキストの回転などが反映されなかった。でも、IE 8に比べたら満足満足。
Google Chrome は SVG 使えないけど（緑の四角）、IE 9はまだ<video>タグが使えない（次のバージョンで対応するらしいが）。はやく心置きなく使えるようになればいいなぁーって思う。
—
あと、どうでもいいけど、なるべく小手先の見栄えはスクリプトで整えるようにしている。たとえば、タイトルのテキストは「、」で改行したいけど、<h1> のなかに <br />をわざわざ挿入するのは面倒だし、気持ち悪い。そういうのは全部スクリプト。
$(function(){
var s = $("body>article>header>h1").html();
$("body>article>header>h1").html(s.replace("、", "、<br />"));
});
jQuery ならばカンタンだし。もうちょい改良して、全体の字数を考慮したり、空白でも折り返せるようになるといいかもしれないけど、たぶん運用で回避（あんまりタイトル長くしない、とか）していくとおもう（ぉ
ほかには、
- 外部リンクに target=_blank つける
- blockquote の cite/titile を探し出して、リンク付きの引用元情報を生成する
などなどでスクリプトを使ってる。Social Bookmark のボタンを付けたいと言った場合でも、HTMLにべた書きするよりスクリプトにした方が後々便利そうだ。今日日スクリプトをきっているヒトなんていないし、仮にいたとしても、見栄えの破綻や機能低下と引換に、に軽いサイトを見れるということで我慢していただく方向で。まぁ、IEとか全然考えずに書いているけど、読めないこともないしな。
そうでもないな。でも大丈夫。チョチョイのチョイで…
でけた！（参照: HTML5 を IE や Firefox 2 でも使えるようにする方法 – html5doctor – HTML5.JP） スクリプトは偉大だなぁー。あぁ、そうそう、CSS 3 Media Queries の部分も IE 8対策しておかないと。現状でもリキッドレイアウトになっているだけで、見にくくはないんだけど。
—
取止めがないけれど、今日はここまで。
JavaScript は全然分からないも同然（APIサイトとか見ながらテケトーに書いている）だけど、少しずつ覚えていこうかなと思う。
関連エントリー
- Newer: [メモ] CSS 3 Media Queries でWebブラウザーの幅に応じたレイアウトを
- Older: クロウタドリのパイを焼く
