角丸の囲み

角丸の囲み

　ああ、この角丸でどれくらいの時間を今まで費やしたのでしょう。これまではテーブルデザインにおける角丸作成方法から、現在のCSSによる角丸作成方法に至るまで、さまざまな「角丸囲み作成方法」が編み出されてきました。

　筆者はスクールでも教えているのですが、以前はこの角丸作成方法を講義のメインディッシュにしていたくらいです。「それでは皆さん、最後に角丸囲みの作成方法をお教えします！」という具合でした。現在はそんなことはもうないのですが、まだ角丸囲みは特別な方法のままです。

　しかし、そんな時代にも終止符が打たれようとしています。CSS3では「border-radius」プロパティが使えるようになりました。Safariで使用する場合は、「-webkit-border-radius: 10px;」と書くだけです。

　先ほどの影を付きたボックスに、このプロパティを記述してみてください。いとも簡単に角丸囲みになっています。しかも影付きの角丸囲みになっていて、大変美しいですよ。

オパシティ（不透明度）を使ってオルタナティブな表現

　CSS3からはボックスや画像のオパシティ（不透明度）を操作できるようになりました。この機能の実現により、デザインの幅がぐっと広がったと言っていいでしょう。例えば、図2のように雑誌的なレイアウトはWebでは難しいとされていました。

　このようなデザインは、文字も含めて、すべて画像にしないと表現が難しいからです。しかし文字まで画像に含めてしまうと、アクセシビリティの観点からも良くないし、SEO対策もできません。何よりも使いづらいWebサイトになってしまいます。以前はこのようなタイプのWebサイトもあったのですが、現在ではほとんど見られなくなりました。これはデザインの善し悪しではなく、技術的な制限のために無くなってしまったと思われます。

　しかし、CSS3のオパシティを使えば、そのような制約から解放されます。「opacity:0.7;」のようにシンプルなコードで実現できるのです。これを書くだけで、そのボックスの透明度を変えることができ、写真の上に文字を乗せるという表現が可能になります。写真画像の上にボックスを作成し、それをopacityプロパティで不透明度を下げます。そして、その上に文字を乗せまることで、この表現が可能になります。実際のコードはリスト3、リスト4の通りです。

　これらが可能になればデザイナは制限から解き放たれ、クリエイティブなデザインを試みることができるでしょう。雑誌並みの表現力を持ち、しかもアクセシブルなWebページを作成することができるようになります。素晴らしいWebデザインが多く生まれそうですよね。