CSS3 についての感想

今回の主題のひとつ。そして CSS-EBLOG って名前のブログなので、ここを重点的に書きたいと思います。

作成し終えての感想としては "とにかく CSS3 は面白い！" ということ。
マークアップを終えて、「さーCSS当てるぞー」ってなったとき、とにかくできることが豊富なので（そして普段の案件ではまず使わないプロパティ目白押しなので）一瞬手が止まるｗ　「あ、ここはこのプロパティでいいのか・・」みたいな感じで、なんかついつい普段使ってるテクニックを使ったりなんかして、書き直したり、みたいなことがありました。
でもやっぱり、「あー、これ使えるなら楽だわー」ということのほうが圧倒的に多かったｗ

各カラムの高さを揃えるなんてdisplay: boxで OK だし、角丸も画像要らないし、グラデも楽チン。

あ、そうそう、今回の制作で（自作ですが）とても重宝したツールが Photoshopライクな操作で手軽に作れるCSS3ジェネレーター です。ちらほらグラデを利用したデザインだったので、PSD から色をとりつつ、このツールでグラデを作ってはコピペ、を繰り返してました。あー、ここの文脈に aside 使いたい・・

box-shadowなんかも大いに役に立ってくれました。（これが使えないだけでほんとにめんどくさい作業になる・・。どうか仕様に戻ってきてください）

参加された方の twitter のつぶやきなどを見ていると、グラデ＋パターンどうしよう、というのを見たりしました。これを通常の案件でやられたら、実現するのにかなり悩みますが、CSS3 の multiple background と linear-gradient を使えば、パターン用の小さい画像ひとつ用意するだけで簡単に実現できてしまいます。

なので、デザインの再現、という部分においてはかなり楽に作業ができました。「NEW!」なんかのアイコン部分なんかもなにげに CSS のみで実現できちゃいますし。どちらかというと、マークアップのほうが時間がかかったかも。ただ 1 点、「ライセンスについて」の説明部分で、情報詳細へのリンクなどが（文章量に関係なく）横一列に並んでいるデザインだったので、ここの実装がすごい手間取りました。（ボックス全体が同じ高さなら楽なんですが、途中だけ同じ高さ、みたいな感じなので・・）

とにかく、制作したことで色々な発見があってすごい勉強になった課題でした。もし参加されていない人も、応募締め切りは過ぎていますが、挑戦するとすごい勉強になるのでおすすめですよ！

HTML5 についての感想

こちらも今回の主題のひとつ。そして HTML5 は勉強不足でした・・。応募終了後、締め切りを過ぎてからちらほらコンテストについてのコメントが流れ始めたんですが、「あー、ここはこれがあったかー！」なんて気づきがあったりして、もっと勉強せねば！　という思いにかられました。

ただ、実際に組んでみて思ったことは "HTML の見通しがとてもいいこと"。
どういうことかというと、sectionやnav、headerなど、要素名自体に意味があるものが増えたことで、div によるマークアップが減ったこと。結果、なにを意味している部分なのか、というのが見やすくなったわけです。

さらに、これは CSS3 前提というのも大きくて、普段なら色々入れ子にしたり、class 名をつけたり、ということをしないといけない部分をかなりクリーンに保つことができたことです。子供セレクタがあるおかげで、汎用的な要素に対しても特に class 名をつけたりすることなく、気軽にスタイルを当てることができました。

将来的には（しっかりと作りさえすれば）とても見やすく、メンテナンス性の高いものが作れるようになるんだろうなーというふうに思っています。

ちなみに、CSS HappyLife さんが HTML5 ざっくりメモ なんてものを書かれてて、ここを見て「そうだったかー」という発見もあったり。分かりやすく書いてくれているので、一度見ておくといいかも。

全体を通しての感想

さて、色々と書いてきましたが、ちょっとだけ気になった部分などを。
メンテナンス性や HTML をクリーンに、と書きましたが、場合によっては今以上に厳密に設計しないと大変なことになるかなーということも同時に感じたのでそれを書きたいと思います。

まず、nth-child の擬似クラス。
とても便利で、使い勝手のいいものですが、更新などについてよく考えて使わないと、ただ単に「上から 3 つ目の p 要素だけ背景色これね」みたいな感覚で使ってしまうと、もし更新が入った際に、そのひとつ前になにか要素を追加しなければいけなくなったとき、同様にして CSS も修正しないといけなくなります。

なので、擬似クラスにもしっかりと意味を与えて、例えば 3 つ目の li 要素は margin を 0 に、みたいに前後になにか要素が入った場合でも、必ず「3 番目に意味がある」という感じで使わないととても修正が大変になってしまいそうです。

それから、様々に追加されたセレクタを駆使して実現するデザイン。これは、「やっぱりこれこっちに移動しよう」みたいになったときに、今までのように class 名をつけておけば HTML だけの移動で済んだものが、あまりに擬似クラスなどのセレクタに頼りすぎていると、やはり CSS 側での修正が入ってしまう可能性があること。

ユーザスタイルシートなどで、HTML をいじれないけど・・みたいなときはとても効果を発揮してくれそうな各種セレクタですが、新規の構築時には意味をもたせるという意味でも、妥当な class 名は指定しておいたほうがいいかもしれません。（あくまでモジュール単位を意識して、全部につける必要はないと思いますが）

さて、色々と書きましたが、実際に作ったものを見て、色々と突っ込んでくれると勉強になるので嬉しいッスｗ