HTML5で文章に角丸の背景をつける方法

JimdoでCSS3の機能を使用して角丸の背景をつける

JimdoはHTML5に対応(完全対応とは言い難いのですが)しています。

スタイルシートもCSS3に対応した記述が可能になっています。

今回は背景画像を使わずに文字列に過度丸の背景をつける方法を案内します。

※この角丸はIE8以下では確認することは出来ません。

ただPIKのサイトをチェックしたところ、IE8でアクセスしているパーセントは

既に2.1%となっております。しかもこの数パーセントの人たちは角丸が見えないだけで特に問題はありません。

CSS3で角丸の設定をする記述方法

h3{ 

baclground:#960; /* 背景をブラウンで塗る */

color:#fff; /*文字を白くする */

/*

以下は角丸の指定です。

本来はborder-radiusだけで良いのですが

ブラウザによって表記が一部異なるため

以下のように指定します。

6pxは角丸の半径です。

*/

border-radius: 10px; 

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

}

上記のように指定した場合の表示例

上記の記述をすれば『見出し3』の外枠に角丸の背景を作ることが出来ます。

これが角丸になった背景です。

直接CSSを記載する方法

なお、『文章』の項目から『HTMLソース編集』画面で直接書く事も可能です。

その場合は以下のように書きます。

※以下はdivタグに対して角丸を適用した場合です。

※角丸の背景を持った文字は多用しないほうが良いので、見出しの2、3あたりに指定するか解説など特に読んでもらいたい箇所だけに限定するのが理想的です。

 

<div style="padding:5px 10px;font-weight:bold;background: #960; color: #fff; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;">これが角丸になった背景です。</div>

これが角丸になった背景です。

アクセントに使ってみてはいかがですか?


ご不明な点があればいつでもお電話でお訪ね下さい。

無料電話相談電話番号:03-6433-0422

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422