"

border-radiusで簡単!角丸四角形

今回はとても簡単だけど、昔からのサイトを知ってる人はびっくりするborder-radiusというCSSを使った角丸四角形の作り方を紹介します。

MISSON:角丸四角形のプロパティを覚えて設定する。

手順は必要ありません。今回は各記事のh1が含まれてる<header class=”entry-header”>に適用したいと思います。うちの環境では背景色も一緒に指定しています。

.entry-header {
 background:#fcdddd;
 padding:16px;
 border-radius:14px;
}

これだけです。

border-radiusの設定内容

border-radiusは4つの角の曲がり具合をpxで指定します。
今回の「14px」というのは省略形で本当の形は・・・

border-radius:14px 14px 14px 14px;

となります。4つの数字は他のCSSと同じく時計回りになっていて「左上 右上 右下 左下」になっています。この順序は試せばすぐにわかるので、無理に覚える必要はないと思われます。

「CSSは基本的には時計回り」だけ覚えておけば十分でしょ。

border-radiusの適用される範囲

範囲という日本語は微妙ですが・・・

その名前の通り、borderです。つまり枠線です。が、背景は枠線の中に塗られるのでborderを指定しなくても背景が嬉しくなるくらい角丸になります。

borderの値を指定して背景なしで枠線だけで囲むことももちろんできます。

角丸をかっこよく見せるコツ

これは、ズバリpaddingだと思います。角丸の曲がり具合も大事ですが、中身とのスペース=paddingが大事です。

慣れなのか、デザインに対する目が鍛えられてかどちらかで良いものがつくれるはず。

いろいろ試してみてピン!とくるものを見つけてくださいませ。