CSS3 Archive

それ、セレクタで。

皆さんCSS3使ってますか？

僕は、box-shadowとtext-shadow、borderradiusはたくさん、transitionやanimationはそこそこ、セレクタはあんまり使いこなせてないという感じです。

css3になって、せっかく便利なセレクタが増えたんだからもっと活用したい！
確かにclassやidは便利ですが、本来html文書の意味的には不要なものなので最低限にするのが望ましいですよね。
本当にそのclassやidは必要か、ということは常に考えておきたいものです。
（例えばcss3を使って良いサイトなら、昔ながらのodd/evenではなくnth-of-typeでやれば良い、とか）

…というわけで、cssのセレクタの勉強がてら、class/idなし縛りでページを作ってみました。

Tatsuya Tobioka in 2012.

僕の2012年のプロダクトを載せるポートフォリオです。（まだ2つしかないけど）

htmlを見てもらえればわかりますが、id/classは使ってませんが、そこそこアニメーションとかできてますよね。
jsもシンプルです

その分cssがぐっちゃぐちゃですが。1年間保守するのはとてもしんどそうです。

また、emとstrongの使い方にセマンティック的な誤りが出来てしまっています。
（span class="highlight"、li class="current"で済むところを無理やりクラスを使わずやった為。）

今回は実験的な極端な例ですので、その他にも問題があると思います。
というわけで、もちろん、皆さんにこんなことをオススメするわけではありません。

ただ、css3の時代はすぐそこです。classやidの付け方、一度見直してみてはどうでしょうか？
無駄なものが結構あるかもしれませんよ？？

デザイン楽しい！

本題からは逸れますが、このサイト、僕のデザイン処女作です！
昨年末から、デザインもできなきゃ食いっぱぐれる！と勝手に追い込まれて勉強してたんですが、今回ようやくFireworksを使って自分でデザインするという作業を初経験をしました。
まだまだデザイナーには程遠いですが、今までに比べれば幾分マシになったんじゃなでしょうか。

そして何より、全てを自分の手で創り上げる感じはとても良い！
ということで引き続きデザインも頑張っていきたいと思います。
（勉強した内容も記事にしてみたいです。）

あ、デザインのダメだしがあったらしてもらえると鼻血が出るほど助かります。
デザインを公開しておいて簡単に問題指摘＆修正できる仕組みないのかなー。（GitHubみたいな）

それでは。

デザインで迷ったところ

こういうのもオープンにしていった方がいいと思ったので追記（2012/2/13）。

一つ目は、赤を#f00ではなく、金赤というやつにするか。
印刷界？では金赤というのが結構使われててオーソドックスなんだそうだ。けど、どう見てもcolor: orange;にしか見えなくててオシャレじゃなかったのでやめた。

もう一つはコンテンツを表示している正方形を#dddぐらいのボーダーで囲うか。
これは最後まで迷ったけど、何となく正方形が見える今の感じの方がおもしろいと思って付けなかった。