公開日:
Web制作の月刊誌「Web Designing」2011年4月号(3月18日発売)で、CSSについての特集記事を執筆させていただきました。
今号では「CSS3プロパティから発想するアイデア集」という特集が組まれています。内容はそのタイトルの通りなんですが、これまで画像を使ったり複雑なことをやらなければ実現できなかったことを、CSS3を使って単純明快に実装するアイディア集のようなものです。
僕はこの中で、CSS3のプロパティである「text-shadow」と「border-image」に関しての記事の執筆を担当させていただきました。
text-shadowは、その名からは「影」のためのプロパティのように思うかもしれませんが、複数重ねて設定すると光彩(グロー)効果も綺麗に表現できるので、これをボタンのロールオーバーの変化に適用させるという内容です。
border-imageは、「ボーダー(枠線)」というより背景画像のような感覚の使い方で、特殊な形状や装飾でさらに伸縮自在のボタンを簡単に作る方法です。
本特集の全体的に言えることだと思いますが、CSS3ですので古いブラウザでは非対応の場合があります。なんらかの対策で古いブラウザでも同様に表示させることも可能でしょうが、わざわざそのような対策を個別にとるくらいなら、最初からCSSは「3」にしないほうがシンプルに考えられるような気もします。
そのあたりは検討が必要かとは思いますが、うまく制作に活用していただければと思います。
今号の特集2では「Web制作のためのツール&リソース図鑑」ということでコードエディタ、ソースチェッカー、ファイル共有、プロジェクト管理などなどの便利なツールがたくさん紹介されていてとても参考になります。業務の効率をあげるためにこういう便利なツールはぜひ活用していきたいですね。
3月18日発売ですので、現在本屋さんに並んでいることと思います。
ぜひお手にとってご覧いただければと思います。