見出しや囲み枠の 角に丸みを付けたいときに使うCSS【 border-radius 】

見出しや 囲み枠などの作成に使用するコードには border や background のほかに
border-radius  というコードを使用するとさらに デザイン性が高まります。

border-radius とは？

radius の読み方は レイディウス・レイディアス、 半径という意味になります。

見出しの背景色や 囲み枠などの角に丸みをつけることができる この border-radius
いろいろなCSSカスタマイズの場面で登場しますので その活用法についてまとめてみます。

 見出しのカスタマイズ

見出しのデザインでは border（ ライン ）を使ったデザインに
background （ 背景色 ）を合わせたりします。

サンプル画像としてこちらを例に見ていきます。

こちらは、border-left と border-bottom にラインを入れ背景に薄い色を付けています。
この見出しにborder-radius を使用してカスタマイズしていきます。

基本形で使用したコードはこちらになります。

見出しに丸みを付ける – 全体 –

先ほどの基本形に border-radius をしようして見出しに丸みを付けてみました。

先ほどのコードにこれを追加するだけで このようにデザインを変更することができます。

サイズは px もしくは  % を使用し、サイズに合わせて
角の丸みを カスタマイズすることができます。

見出しに丸みを付ける – 片側だけ –

次に 4つの角を一度に指定し、片側にだけ丸みを付けてみます。

見出しに丸みを付ける – 対角線に –

今度は H3の見出しを使って カスタマイズしていきます。要領は同じですが、
FontAwesome を使用しアイコンを設置することで
全体のデザインのイメージが かなり変わります。
アイコンのコードの使いかたも合わせて 試してみてください。

応用編 – 文字に合わせてサイズを変動させる –

文字の長さに合わせてサイズを変動させるコード display-inline-block
もいろいろな場面で 使用することができます。

変動型にする場合は、このコードを先ほどの
/* H3 見出しのカスタマイズ */ 内に追加指定します。

 囲み枠のカスタマイズ

さいごに囲み枠についてですが、こちらも使い方は同じですので
お好みのデザインにカスタマイズしてみてください！！

注意点は丸みをつければ付けるほどに 角と文字の距離が近くなってしまうので
padding をつかって 内側の余白の指定も調整する必要があります。

参考までに こちらの囲み枠のコードもご紹介しておきます。囲み枠には、
box のカスタマイズと box内の 文字の表示に関するカスタマイズが必要になります。

いかがでしたでしょうか？
角度を変えることでイメージがすごく変わるので、とても面白いですよね。
いろいろ試して、オリジナルの見出しや囲み枠を作成してみてください。

---

そのほかの 見出しに関する記事はこちらです。