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

見出しや 囲み枠などのデザインをCSSカスタマイズを使って作成する時は
" border “＝ラインや囲み枠を使ったり" background “= 背景色を付けたりなどのコードをメインで使用します。

ラインの種類や囲む場所によってデザインのバリエーションは多種多様ですが
これに" border-radius " という「角に丸みを作ってくれる」コードを使用するとさらに デザイン性が高まります。

今回はこの border-radius を使っていくつかの見出しデザインを作成してみました。

border-radius とは？

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

見出しの背景色や 囲み枠などの角に丸みをつけることができる border-radius
丸みの角度を変えることでデザインの幅も広がります。

 見出しのカスタマイズ

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

こちらの基本的な見出しborder-left と border-bottom に border-radius を指定したイメージ画像です。

border-radius のCSSコード

サイズは px もしくは  % を使用し、サイズに合わせて 角の丸みを指定します。

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

次に 片側にだけ丸みを付ける場合は border-radius:0px 0px 30px 30px;
4つの角を一度に指定するコードを追加します。
コードは 左上から時計回りで 右上・右下・左下 の順になります。

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

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

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

文字の長さに合わせてサイズを変動させたい場合は 先ほどの .post h3 { 内に こちらのコードを追加指定します。

 囲み枠のカスタマイズ

見出しと同様に border で作成する囲み枠も同じ要領でborder‐radius を指定し
BOXに丸みをつけることができますので お好みのデザインにカスタマイズしてみてください！！

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

こちらの記事で基本的な boxのCSSコードなど記事にまとめていますので参考にしてみてください。
【囲み枠 – BOX】CSSコードとHTMLの記述のしかた -基礎 –

そのほかの 見出しに関する記事はこちら↓
Font Awesome (ﾌｫﾝﾄｵｰｻﾑ) ｜無料で使えるアイコンの登録と設定【 WordPress 】
見出しをデザイン！CSSカスタマイズの基本｜縦ラインを無くしたり 簡単なコードでのライン作成！