見出しや囲み枠の 角に丸みを付けたいときに使うCSS【 border-radius 】
見出しや 囲み枠などのデザインをCSSカスタマイズを使って作成する時は
" border “=ラインや囲み枠を使ったり" background “= 背景色を付けたりなどのコードをメインで使用します。
ラインの種類や囲む場所によってデザインのバリエーションは多種多様ですが
これに" border-radius " という「角に丸みを作ってくれる」コードを使用するとさらに デザイン性が高まります。
今回はこの border-radius を使っていくつかの見出しデザインを作成してみました。
border-radius とは?
「radius」の読み方は レイディウス・レイディアス、「半径」という意味になります。
見出しの背景色や 囲み枠などの角に丸みをつけることができる border-radius
丸みの角度を変えることでデザインの幅も広がります。
見出しのカスタマイズ
見出しのデザインでは border( ライン )を使ったデザインに background ( 背景色 )を合わせたりします。
こちらの基本的な見出しborder-left と border-bottom に border-radius を指定したイメージ画像です。
1 2 3 4 5 6 7 8 9 10 |
/* 見出しのカスタマイズ - H2 - */ .post h2
{ border-left:
solid
8px
#a4d5bd; /*左側の縦線の 幅・線種・色*/ border-bottom:solid
4px
#a4d5bd; /*下線の 幅・線種・色*/ background:#f4f4e6; /*背景色*/ border-radius:30px; color:#5c9ea5; /*文字の色*/ font-weight:bold;
/*文字の幅*/ } |
border-radius のCSSコード
サイズは px もしくは % を使用し、サイズに合わせて 角の丸みを指定します。
見出しに丸みを付ける – 片側だけ –
次に 片側にだけ丸みを付ける場合は border-radius:0px 0px 30px 30px;
4つの角を一度に指定するコードを追加します。
コードは 左上から時計回りで 右上・右下・左下 の順になります。
見出しに丸みを付ける – 対角線に –
今度は H3の見出しを使って カスタマイズしていきます。要領は同じですが、
FontAwesome を使用しアイコンを設置することで全体のデザインのイメージが かなり変わります。
アイコンのコードの使いかたも合わせて 試してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/*見出しにアイコンを付ける--*/ h3:before
{
font-family:FontAwesome; content:
"\f138";
/*ユニコード*/ color:
#ffffff; /*アイコン色*/ font-size:
1em;/*アイコンのサイズ*/ left:
10;
/*アイコンの位置-左-*/ top:
0;
/*アイコンの位置-上-*/ padding-right:1em;
/*内側の余白-右-*/ padding-left:0em;/*内側の余白-左-*/ } /* H3 見出しのカスタマイズ */ .post h3
{ background:#a4d5bd; /*背景色*/ color:#5c9ea5; /*文字の色*/ border-radius:0px
25px;
/*半径のサイズ*/
font-weight:bold;
/*文字の幅*/ } |
応用編 – 文字に合わせてサイズを変動させる –
文字の長さに合わせてサイズを変動させたい場合は 先ほどの .post h3 { 内に こちらのコードを追加指定します。
1 2 3 4 |
/*タイトルバーの幅を変動型にする*/ display:inline-block;
padding-right:2em;/*バー内側の余白 -右-*/ |
囲み枠のカスタマイズ
見出しと同様に border で作成する囲み枠も同じ要領でborder‐radius を指定し
BOXに丸みをつけることができますので お好みのデザインにカスタマイズしてみてください!!
注意点は 丸みをつければ付けるほどに 角と文字の距離が近くなってしまうので
padding をつかって 内側の余白の指定も調整する必要があるということと
box のカスタマイズと box内の文字の表示に関するカスタマイズが必要になります。
こちらの記事で基本的な boxのCSSコードなど記事にまとめていますので参考にしてみてください。
【囲み枠 – BOX】CSSコードとHTMLの記述のしかた -基礎 –
そのほかの 見出しに関する記事はこちら↓
Font Awesome (フォントオーサム) |無料で使えるアイコンの登録と設定【 WordPress 】
見出しをデザイン!CSSカスタマイズの基本|縦ラインを無くしたり 簡単なコードでのライン作成!