CSSカスタマイズ 【 border-radius 】を使って 見出しや囲み枠をデザインしてみる

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

border-radius とは?

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

border-radius は 背景色や 囲み枠などの 角を調整するコードで
かなり いい仕事をしてくれますので いろいろと活用してみましょう。

 見出しのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

 囲み枠のカスタマイズ

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

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

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

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