Blog

※ブログ移転しました。 → hamashun.me

CSS Nite LP, Disk 1に行ってきました(2)

昨日の続きです。
会場では青山ブックセンターが出店してて、講演される方の著書などを置いていました。
パラパラっと見てみたのですけど、やっぱり買う時は本腰を入れてチェックしたいので、特に買い物はありませんでした。

他にも、FirefoxやOperaの人がブースを出していました。
ニンテンドーDSのOperaは触ってみたかったのですけど、時間が無くて断念。 残念。

第三部 境 祐司:CSSデザインを自動化するための7つのルール

本当は境さんは第一部の予定だったのですけど、諸事情により第三部になりました。
内容は、これまでのWeb制作の現場は【新しい技術が出る→手作業で制作→ツールが進化して自動化される→新しい技術が出る→繰り返し】という流れを辿っていて、現在はCSSという技術を手作業で制作している段階である。 そしてそろそろCSSが自動化される時代が来るといった物でした。
確かに、現在では代表的オーサリングツールであるDreamweaverを使うにしても、正しいCSSを記述するには、エディターとして使っている人が多いのではと思います(実際に僕の周りの人も、そういった人が多いです)。

講演の中で、いくつか作業を自動化するツールの紹介があったのですけど、殆どがMac用で英語表記でシェアウェア(企業製品?)なようです。
Win使いで英語が読めないで無料万歳な僕からすると、この辺りのツールを使いこなすのはかなり難しそうです。
ただ、CSSでの作業が自動化されつつある、という流れは実感できました。

自動化されて、作業の効率化が進むのはとても良い事だと思うのですけど、そこで懸念されるのはそれによって起きる弊害だと思います。
例えば、自動化されるが故に、場当たり的に追加されていくCSSの記述など。
現在でも、有名企業の公式ページのソースに『MM』タグが見られる事を考えると(それも<head>の中に!)、起こり得る事だと思うんですよね。
まあ、こういった、或いは余計な不安を感じるのは、僕がマークアップ側の人間だからかもしれませんけれど。

第四部 Charles McCathieNevile(Opera):CSSを活用し、最高のインターネット体験をあらゆる端末へ

外人さんです。 Operaの偉い人らしいです。 ヒゲです。 長髪です。
尚、講演は全編英語で行われたので、長谷川恭久さんが通訳されていました。

この外人さん、プレゼンのやり方がまた勉強になりました。
最初にまず、「みんな、両手を挙げてみて」と言い出して、一体何をするんだろうと思っていたら、「じゃあ、Operaを使っている人は片手を下ろして」「OperaでWebサイトの確認をしている人はもう片手も下ろして」と続けるんです。
そして客席を見回して満足気に、「これでやりやすくなったぜフフフ」と一言。
つまり、日本人特有の事なのかどうか分かりませんけど、『挙手を中々しない』事を逆手にとって、『みんなOperaを使っている』という状態にしてしまったのです。
うーんナイスジョーク(?)。

内容は、リキッドレイアウトについて。 @mediaについて。 CSS3メディアクエリについて。 の3本です。
驚いたのは、スライドがXHtmlとCSSで作られていた事です。
確かに、media属性でスライドを適用できる事は知っていましたけど、実際に使われているのを見たのは初めてです。
いや、もしかしたら他の方も同じ作りだったのかもしれませんけど、モニタ版とスライド版を見比べる事ができたのは初めてでした。

一つ目の、リキッドレイアウトについては、割と普通に。
リキッドはとてつもなく大きなモニタでも小さなモニタでも。 最大化したブラウザでも小さくしたブラウザでも見られる事が利点である。 といった感じで。

二つ目の、@mediaについては、その書式について非常に興味深い点がありました。
彼のコードでは、CSSの書式を入れ子状にして指定していたのです。

@media screen {
 body {
  margin:0;
  padding:0;
 }
 
 div {
  color:#f00;
 }
}

こんな感じに。
もしかしたら、@media独自の書き方がコレなのかもしれません。
ただ、この書き方にはちょっと可能性を感じる部分があるので、少し研究してみたいと思います。
詳しくは後日、別のエントリにて。

三つ目はCSS3メディアクエリです。
これは、CSSの振り分けを更に細かくした物なようです。
例を挙げるなら、ハンドベルドでモニタカラーが2色ならこのCSSを適用。 PCでフルカラーならこのCSSを適用。 というようにできる物なんだそうです。
書式は次のようになっていました。

@media projection and
 (max-device-height:480px) {
 body{ 
  font-size: 12px;
 }
}

上の例では、最大heightが480pxであるなら、body{font-size:12px}を適用せよ。となります。
何だかプログラムの条件分岐みたい、と思われたかもしれません。
どうやら、それも狙いの一つらしく、この機能を使えば、Javascriptで何行も記述していた作業が、たった数行のCSSで可能になるらしいのです。
ボタンのホバーがJavascriptからCSSに移行したように、CSSの適用振り分けもやがてそうなっていくのかもしれません。

講演の終わり際にMr,Charlesが、また面白い事を行ってくれました。 大体次のような感じです。
Firefoxは良いブラウザだ。 safariも良いね。 そして・・・・・・。
Internet Explorerも、『良い』ブラウザだ。

お後がよろしいようで。

TracBack

Reference Entry:  CSS Nite LP, Disk 1に行ってきました(2):

CSS Nite公式ブログ » CSS Nite LP, Disk 1が終了しました。
CSS Nite LP, Disk 1が終了しました。連休明けの平日にもかかわら...
TracBack Time:  2006年10月16日 12:03

Contribution Form

Blog Search
Search
Recent Entry
Category
Monthly Archive