New Entry

HTML5のstyle要素が持つscoped属性について

Category
Bookmark

HTML5のstyle要素には、scopedという属性があります。 この属性を持ったstyle要素は、フローコンテンツが期待できる場所に記述する事ができます(フローコンテンツの中って意味じゃ無いです)。

フローコンテンツには、div要素やsection要素やtable要素などがあります(詳しくはコンテンツ・モデル - HTML5タグリファレンス - HTML5.JPとか見てください)。

scoped属性を指定したstyle要素に記述されたスタイルは、ページ全体ではなく、そのstyle要素の親要素の中にあるコンテンツにのみ適用されます。 以下がサンプルコードです。

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

scope属性のメリット

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

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

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

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

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>

使いようによっては便利になりそうなscope属性ですが、乱用は保守性の低下を招くのでご利用は計画的にした方が良いかもしれないです。

コーダー → マークアップエンジニア → フロントエンドエンジニア ←NEW!!

Category
Bookmark

先日のCSS Nite LP, Disk 9.2(reprise)の最後のセッションは、小久保さんによる「マークアップエンジニアの明日はどっちだ!?」でした。CSS Nite LP9 連動 第2回コーディングコンテストの審査から見えてきた、マークアップエンジニアの今後をテーマにした内容です。

以下まとめ。

コーダーのこれから

コーダー的な人の変化の歴史

  1. 昔:コーダー ※1

    • テーブルレイアウト
    • 絵を再現する
  2. 今:マークアップエンジニア ※2

    • CSSレイアウト
    • コンテンツの構造をマークアップで明示し、クラスで命名
  3. 今後:フロントエンドエンジニア(プログラマー寄り)

    • JSもバリバリ
    • DOM操作
    • スムーズなUI実装でUX貢献

    UIデザイナー(デザイナー寄り)・フロントエンドアーキテクト(IA寄り)などもアリ。

時代の変化

昔のWeb制作は「紙パンフレットの移植」という面があり、単純に絵を再現するというスキルが必要だった。

しかし、最近はWeb自体がコミュニケーションチャンネルとなっていて、業務にシステム開発やインターフェイスデザインが関わるようになり、フロントエンドのコーディングにも質が問われるようになった。

評価される質

質が問われるようになると、いい仕事をする人が正当に評価されるようになる。例えば、3年前の第1回コーディングコンテストの時と比べ、いい人がいい会社でいい仕事をしている事が増えた。

技術の変化

ウェブは、コンテンツとインターフェイスという二面性を持っているが、今後はインターフェイス面が増えていく。

そしてCSS3は、手早く簡単にUIを作れる。これまではトリッキーな事をやって無理やり実装していた事も簡単にできる。 ただし、それはデザインを考えながらコードを書く場合。さらにCSS3でできる事、できない事を把握している必要もある。

デザイナーもCSSを分かってないといけないし、コーダーもデザインを分かってないといけない。

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

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

細かいデザインのCSSとそれ以外のCSS

グラデーションやシャドウなどの細かいデザインのCSSはデザイナーが書いて、それ以外のクロスブラウザやパフォーマンスに関わる部分は専門の人がやるとよい。

変わらないもの

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

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

感想など

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

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

Google Font Directory のフォントがiPhoneやiPadに未対応な件に取り急ぎ対応する方法

Category
Bookmark

ついにWeb Fontsの実用時代到来か!? と思われたGoogle Font Directoryですが、ではiPhoneやiPadなどでは未対応です。

ただ未対応なだけならまだいいのですが、webfontが英語だけだと日本語の場所空白っぽい感じで表示されるみたいです。という報告をスクショ付きで @cv_k さんから頂きました(ありがとうございます!)。

TwitPic

加えて、@tacamy という清純派マークアッパーから「あらあらうふふ。iPhone対応するとか言ってたのはどの口かしら?」と罵られたので、取り急ぎ対応した次第であります。

対応前と対応後のコードは以下です。

Before

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

After

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

単にヒラギノの角ゴ ProN W3 を前に持ってきただけという適当さですが、祭りに乗じて騒いでたらうっかり神輿を壊してしまった人には役に立つかなとか。

ちなみに、Mac OS X v10.5以降にはデフォルトでこのProNフォントがインストールされているので、最近のMacではこちらが表示されていると思います。 僕のMacはv10.4なので確認できず。

アンドロイドは?

インストールされているフォントが分からなかったり検証機が手元に無かったりで深くは調べてないのですが、とりあえず見てもらったXperiaでは、テキストが表示されないという事はありませんでした。

livedoor IRC リリース。及び、body開始タグの省略とstyle要素のscoped属性について

Category
Bookmark
  • 追記:body開始タグを省略できる条件 の和訳を追記しました(記事の結論は変わりません)。

livedoor IRC(Internet Relay Chat)が公開されました。 ライブドアのラボである、livedoor labs EDGE内のページです。

以下からが本題。

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.

8 The HTML syntax ― HTML5 (Editor's Draft 23 May 2010)

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

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

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

scoped属性付きのstyle要素

HTML4.01などでは、style要素はhead要素内にしか記述する事ができませんでした。 が、HTML5では、scoped属性を付ける事でbody要素内に記述する事ができたりします(詳細はHTML5タグリファレンスとか見てください)。
scoped属性を持っているstyle要素の中に書かれたスタイルは、その親要素(あれば)以下にしか適用されなくなります(ただ、現在では実装しているUAは無い模様)。

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

hamashun.com のリニューアルについて

Category
Bookmark

hamashun.comをリニューアルしました。 これまではブログがメインコンテンツだったんですが、今後はブログは切り離して、単純にポートフォリオ的な扱いにします。

と言う訳で、リニューアルのメモ書きです。

デザイン

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

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

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

HTML

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

新しいセクションで登場する見出し

(ワンページサイトでの)一ページ分の最初の見出しはh1要素で、以降はh2, h3 ... となってます。

新しいセクションごとに全てがh1要素でも良かったんですけど、SEOスパムと誤認されたら嫌だなという消極的な理由と、コンポーネント化するとしても(多分しないけど)、(ワンページサイトでの)一ページ分が最小単位かなと思ったのが理由です。

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

CSS

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

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

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

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

JavaScript

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

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

みたいな。

リニューアルしたとは言っても、突貫工事だったので気に入ってない点がいくつかあります。 今後修正していきたい感じ。