CSSでテキストの背景に色をつける方法

今回は、HTMLとCSSだけで文字の背景に色をつけて角丸にして強調する方法をを説明していきます。

テキスト背景に色を入れ角丸にする方法

【例1:角丸吹き出し】

【HTML】

<div class="balloon">
  <p>こんにちは、角丸です。</p></div>

【CSS】

.balloon {

	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
	background: #e0edff;
	border-radius: 15px;

}

【例1:表示例】





こんにちは、角丸です。

⬆︎このコードの表示は以下のようになります。「border-radius」により丸みをつけることができます。

最後に

以上がCSSでテキストの背景に色をつけ強調させる方法の説明になります。
このようにテキストの背景を強調させることでを使うことで重要な箇所や注目して欲しい箇所を見てもらえる確率が上がると思います。
テキストのデザインをより豊富にするために覚えておくと良いでしょう。

他にもHTML、CSSには多くの要素があります。これからもHTML、CSSについて記事を掲載していきます。

投稿タグ
, , ,