先日m-schoolさんでやっている「ここがすごい!CSS3入門講座」を受講してきました。
講師は関西つながりでもある森 和恵(もり かずえ)さん。
講座名で受講を決めたので、講師が誰かを知ったのは当日の午前中だったという(笑)

内容は実際に手を動かす内容もあり、カリキュラム的にも入門講座として疑問に思っていたところが網羅されていて、講師の森さんも教え上手で、とてもいい内容でした。

で、こういった技術系のセミナーをガッツリ受けるのは、実は結構久しぶり。
色々な理由はあって、

• 自分自身が以前より実装の現場から離れてしまっている。
• 昔より技術の知識習得に対して腰が重くなってきている。
• 何が出来るかよく分からず、動けなくなっていた。

っていうのが結構大きなところ。
どの比率が高いわけでもなく、それぞれがぼんやり絡まって、なかなかそういったセミナーに行くことをしなくなっていた感じです。

使えるHTML5とCSS3、使えないHTML5とCSS3?

特にHTML5とCSS3は完全に食わず嫌いでした。
それにはいくつか理由がやっぱりあって、結局は「勉強していないから」に帰結するんだけど、

• HTML5で追加されたタグの利用価値と内容が分からない。
• CSS3ってグラデーションとかアニメーションとか動画貼り付けとかってあるけど、結局何が「今」使えるのか分からない。

って理由から、「よく分からない」という感覚になっていて、どこから手をつけていいか分からなくなっていました。
まぁ、最初に腰を上げられていなかった、ってことですね。

でも、そう思ってしまっていた理由が、今回のセミナーを受けてやっと晴れてきました。
今回は特にCSS3のセミナーでした。
ですので、CSS3に集約すると、実際「今」出来ることってのはそれほどあるわけではない、ことが分かったのは大きいです。

今回の講習では、

• CSS3とは?
• レイアウト枠を角丸に(border-radius)
• レイアウト枠やテキストに影を指定(box-shadow/text-shadow)
• テキストにWeb Fontsを指定(@font-face)
• レイアウト枠のボーダーに画像を指定(border-image)
• グラデーションボタン(background-image:linear-gradient)
• 透過指定(background:rgba/opacity)
• 背景画像の複数指定やサイズ指定(background-size/Multiple Background)
• 回転させる(transform:rotate)
• ボックスレイアウト(display:box/box-ordinal-group/box-flex)
• アニメーション指定(transition)
• Internet Explorerへの対応
• HTML5について

といったアジェンダ。
一つ一つ半ハンズオンな感じだったので、自分でもコードを触りながらの学習、個々はそれぞれ「すげー、こんなこと出来るようになるのかー!!」ということばかり。

ただ、結局そこには「対応ブラウザ」の壁があります。
少なくとも名村がお手伝いをしているお客様の案件はどう説得しようと

という現実。

ということはIEで使えない要素は、文字通り「仕事で使えない」要素になってしまうわけです。
そのサイトをFirefoxやChromeでほとんど見られていないサイトに、「CSS3で角丸を!」といってもそれは「現状は」制作者のエゴや趣味でしかありません。
ですので、何か角丸のデザインを出してお客様がOKを出したら、現状のIEで、しかも下手したらIE6で、角丸を表現する技術を使わないといけない訳です。

そういった理由からまず第一の判断として、

という判断が自分なりにはっきりしました。

使えない=使わない?

ここで大事なのは「使えない」から、「使わない」と判断するのではないってこと。
「使えない」という判断がはっきり出来たからこそ、「じゃぁ、分からないように趣味で使っていこう」という研究対象としての位置づけが明確になりました。

全部のブラウザでは使えない時点で、マークアップエンジニアであったり、デザイナーであったりにとって重要になってくるのは、

• どのブラウザ使える要素かを理解している。
• 全体工数の中でどこで使えばいいかの「勘」が働くレベルまで持っていくこと。

です。

最近よく言われる「プログレッシブエンハンスメント」の考え方。
これは2004年ごろにCSSレイアウトを初めてやり始めた時からある考え方です。

事実僕も2004年ごろの現場でまだガリガリHTMLを書いていたころは、

• 自分の知っていて血肉になった技術から実装。
• ブラウザで実際に反映出来る要素、セレクターから実装。

という事をOJTで繰り返していました。
その試行錯誤の結果として身についたのは、技術論ではなくて、

• ここはCSSでレイアウトしても大丈夫。
• ここは、HTMLの冗長化が防げるので、あとで楽そう。

といった所謂「脳内マークアップの勘」です。
この勘が働くか働かないか?ってのは、エンジニアにとっては凄く重要。

それはPHPやPerlなどのアプリケーションエンジニアでも同じ。
どういう変数やクラスを使ってどういうインデックスを張ればいろんな意味で、工数も負荷も下げられてセキュアなコードになるか?を脳内で考えるのが早い人はやっぱり優秀です。

その意味で、これからの時期はその「勘」を磨く時期かな?という判断になりました。
これだけでも、個人的に「やらないといけないんだろうなぁ・・・でも、どこから手をつければいいんだろう・・・」ってフラストレーションが晴れました。

デザイナーとマークアップエンジニアの境界

今回のCSS3の講習を受けて思ったことは他にもありました。
以前のCSSレイアウトは多少の異論はあると思いますが、言ってしまえば「レイアウト」を主とした技術でした。
ですので、デザイナーとマークアップエンジニアの職域は、名村が関わった案件ではある程度の区切りがはっきりありました。

しかし、CSS3の角丸(border-radius)やグラデーション(background-image:linear-gradient)、ドロップシャドウ(box-shadow/text-shadow)などは、デザイナーとマークアップエンジニア同士で、

を共有していく方式を取らないと難しいなぁ・・・ということです。

例えばこんなボタンの画像が来たときに、これは結構迷うと思うんですよ。

CSS3でデザインしたボタン

このクオリティだったら、CSS3で実装が出来ます。

ただ、一昔前のアクアなデザインのボタンの上のテカリ部分とかを見てみましょう。

アクアデザインのボタン

このデザインだった場合、厳密に再現するのは簡単には無理でしょう。


こういった判断をするのが結構難しくなってくるなぁ・・・ということです。
そういった判断をする上でもやはり実際にCSSを書く人が上で書いた使いどころを判断する「勘所」に敏感になっている必要があると思っています。


一方でココがCSS3を使う事をちょっと難しくしているなぁ・・・と思っているのは、じゃぁ、

• デザイナーがCSS3での表現を十分理解していなくてはならないのか?
• CSSコーダーよりデザイナーの方がCSS3での表現を知っていた場合?
• CSSコーダーはデザイナーから上がってきたデザインを独自に判断する?

といった感じで、CSS3の技術はどのレイヤーの人までが知っていればいいのかなぁ?と、思ったりしました。

この境界は以前、マークアップエンジニアがガリガリJavascriptを書く訳ではなかったけど、最近は習得技術となってきている流れのように、今後、CSS3を理解しておくのは、デザイナーも含めて、というような、習得技術の流れがまた変わってくるだろうなぁ・・・と思っています。

やっぱり勉強は大事

今回のCSS3の講座受講と、先日ちょっとしたご縁でHMTL5の勉強会に参加してきたことで、それぞれの概要がなんとなく自分なりに見えてきました。
そういったことから、自分にとっての注力するべき点と、今後の「何を」勉強するか?ってのもおぼろげながら見えてきました。

そういう意味では、勉強はやっぱり大事ですし、その時間は意図して取っていくようにしないと、自分の中も枯渇していきますし、頭がどんどん固くなっていくのを痛感しました。
これからも現場にはいたいと思っているので、ちょっと色々棚卸をして、勉強しなおしていこうと思います。