テキストの背景に色をつける 背景の角を丸くするCSS

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

今日は初歩的なcssです。テキストの背景に色を付けたい、そしてその背景の角を丸くしたいを叶えるCSSです。

まずはテキストの背景に色を付けます。
テキストの背景に色を付ける場合二通り考えられます。
テキスト部分のみに背景色をつける
テキストの段落に背景色をつける
が考えられます。

テキストに背景色と角を丸く

サンプル


これはHTMLの記述自体が異なります。
テキスト部分のみに背景色をつける場合は以下のようにspanで括ってあげる必要があります。

<p><span class="txt_bg_blue_white">SPF</span></p>

テキストの段落に背景色をつける場合はspanで括らずpやdivに直接クラスをあてます。

<p class="txt_bg_blue_white">SPF</p>

cssは以下のようにします。
これは背景色を指定し、背景色を表示した部分に余白を持たせて大きくしたいのでpaddingで増やしています。
角を丸くしているのはborder-radiusで2pxが角の丸みの指定です。数値を大きくするともっと丸くなります。
テキストは見やすく白にしました。

.txt_bg_blue_white{
	background:#58A7D2;
	padding:0.35em;
	border-radius:2px;
	color:white
}

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*