[CSS]見出しの角を丸くして丸角にする方法

最近、Web制作ばかりしているのでめっきりPHP関連の投稿がありません。その代わり、WordPressやら、スタイルシートやらが増えています。

今回は基本的なことですが、スタイルシートで丸角を表現する方法です。

border-radiusを使うだけ

丸角にするにはborder-radiusというプロパティを使います。

border-radiusだけでは、全てのブラウザに対応することが現状では出来ないこともあるので、少しおまじないが必要です。

サンプルです。

h1 {
    padding: 15px 0px 15px 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #fff url(h1.png) 10px no-repeat;
    font-weight: bold;
}

border-radiusを加えていない状態だと、角は直角だったものが・・・

少し丸く表現されています。

4pxを10pxにすると、さらに丸さが強調されます。

ちなみに青い部分は背景画像です。スタイルシートだけでもこれは実現できるのですが、私は画像のほうが楽かなと思っています。

ちなみに画像はこれです。

文字の位置はpaddingで調整しています。

詳細を説明

border-radiusに関するプロパティが3つあるので、少し説明します。

border-radius

これがCSS3で定義されている標準のプロパティです。今後はこれだけで丸角を指定するようになるはずです。

-webkit-border-radius

webkitをエンジンに利用しているブラウザ用です。Safari、Chromeなどですね。

-moz-border-radius

Firefox用です。

角を丸くするだけでサイトの雰囲気が結構変わってきます。borderの色や種類を変えることで個性的な見出しを作れますので、いろいろ変更しながら試してみてください。

本日は以上です。