scope属性のメリット

ここまでをまとめると、scoped属性の嬉しい点は二つあります。

1. スコープを持てる
2. フローコンテンツが期待できる場所に書ける

この内、スコープに関しては、2010年6月現在で実装はないようです。

もう一つのメリット、フローコンテンツが期待できる場所（フローコンテンツが書ける場所）に書ける事が地味に便利な予感がしていて、例えばブログの記事内でちょっとしたサンプルを載せたい時なんかに使えるんじゃないかなと。 ただ、スコープの実装がない内には他の要素にまでスタイルが当たってしまう恐れがあるので、次のようにすると良いんじゃないかなとか。

scope属性をサポートしない環境へのフォールバック

  <p>example text</p>     <!-- 赤くならない -->
<section id="entryExample">
  <style scoped="scoped">
  #entryExample p {
    color: red;
  }
  </style>
  <h1>example title</h1>
  <p>example text</p>     <!-- 赤くなる -->
</section>

コーダーのこれから

CSS3時代で変わるワークフロー

デザインと実装を分業して、デザイナーが作ったPSDをコーダーが実装、という従来のワークフローではCSS3は使えない。 と言うか効率が悪すぎてCSS3を使う意味が無い。

変わらないもの

変わるものばかりではない。 また、変わらないといけないわけでもない。

• アクセシビリティへの配慮
• クロスブラウザ対応
• インタラクション&UXの最後の砦

感想など

僕が最近考えていた事と結構合っていて、安心しつつも気が引き締まる思いです。

あ。 あとなんか、新しい技術が出てくると『また勉強しなくちゃ＞＜』みたいなブクマがついているのを見かけるんですが、新しい技術が出るって事は業界が進化してるって事でもあるので、まあ、良いんじゃないかなとか思ったり。

Before

body {
  font-family: Inconsolata, sans-serif;
}

After

body {
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Inconsolata, sans-serif;
}

HTML5のタグの省略

件のlivedoor IRCのページもHTML5なのですが、デザインに合わせてソースコードもシンプルにしてみました。
HTML5では、仕様書でタグの省略について決められているので、それを参考にしました。

body開始タグの省略について

で、省略して良いのか最後まで迷ったのが、body開始タグです。仕様書の該当部分には次のように書かれています。

A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a script or style element.

･･･まあちょっと、ぶっちゃけ英語は苦手なんでアレなんですが、何とか読み解いた感じで、次の三つがbody開始タグを省略できる条件かなと。

• body要素が空の場合
• body要素内に登場する最初のものが空白文字・コメント以外の場合
• body要素内の最初の物がscript またはstyleの場合（「ではない」場合？）

一つめと二つめは分かりやすいんですが、ちょっと引っかかるのが三つめです。

と言うわけで、「三つめの条件はscoped属性を持っている事が前提に書かれているのではないか？」 という疑問と、僕の英語力の拙さが相まって、現在の所はbody開始タグを省略していないのです。

デザイン

Twitterでもちょろっと言ったんですが、大沖さんという人のイラストがデザインを思いついた元ネタです。
そしてあんまり深く考えてないです。 思いついたままに筆を滑らせた的な。 とか言ったら怒られそう。

太い矢印がキャラクターを指してるのとか、何かのイラストか表紙で見た記憶があるんですけど、具体的には覚えてないです。 なんだったかなー。

ページ遷移は、最近流行りらしいワンページ（シングルページ）です。 JavaScriptで切り替える的な。

HTML

HTML5です。 このタイミングでリニューアルするならHTML5しかないかな的な。

あとXFN使ってみたりなんかしちゃったりして。

CSS

ちょこちょことCSS3を使っています。 今の所は

• border-radius
• transform
• text-shadow
• Web Fonts
• rgba
• Multiple background

くらいかな。 そんなに突飛な事はやってないです。 Web FontsはGoogle Font APIを使ってみました。

あとは :before疑似要素とcontentプロパティとか使ってます。

JavaScript

JSなしでも情報は得られるようにしてます。

• 長い一つのページのコンテンツを非表示にして、ワンページサイト（シングルページサイト）にしてる
• フラグメント識別子付きのアドレスでアクセスすると、そのコンテンツが表示される
• ウィンドウの縦幅が狭い場合、それに合わせたデザインになる

みたいな。