いろいろ紹介したいものはあるのですが、最初はこれ『border-radius』
角を丸く表示するCSS要素。
使い方は簡単です。
border-radius:10px
とかって入れれば角が10pxの大きさで丸くなります。
まだ、正式なものではないのですがFirefoxやChomeなどでは先行して対応してるので試してみます。
<div style="-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;">ここにDIVの中身</div>
こんな感じ。すごいでしょ？
ちなみにわかりやすくbackgroundを指定してますが、割愛してます。
-moz-とか-wekit-とかって付けてるのは『-moz-』はFirefoxとか用のタグってことで、『-webkit-』ってのはSafariとかChrome用のタグって意味です。
ちなみに『-ms-』って言うインターネットエクスプローラー用のタグもあるのですが、どっちにしろIEでは使えないのです。
最後の『border-radius:10px;』って所が本来の書き方で、将来的にはここだけで大丈夫になります。
今まで画像作ってbackgroundで背景画像を設定してってのが、これだけで済むようになります。
さらにはバックグラウンドにグラデーションを指定することだって出来ちゃいます。
グラデーションに関しては、また次回。
インターネットエクスプローラーを使用している人は意味がわからないと思いますので、FirefoxやChromeなどで見てみてください。
これを機にインストールしてみては？？