文字や文章に背景色をつける

文章全体や文章の一部分に背景色をつけます

文字に背景色をつける

文中の一部分の文字に背景色をつけたい時は下記のようにhtmlを記述します。

文字に<span style="background-color:">背景色</span>をつける
上記のソース コピーして使用して下さい




段落の文章全体に背景色をつける。

<p style="background-color:">段落の文章全体に背景色をつける。</p>
上記のソース コピーして使用して下さい



スタイルシートに設定

例えば、orangeというクラス名で属性を記述し、あらかじめスタイルシートに設定しておくと、文字の背景色文字色を変えるなどが簡単にできます。(.orangeは任意のクラス名です)
<head>と</head>の間に下記のように記述します。

htmlでspanに囲まれた文字に背景色がつきます。

<style type="text/css">
<!--
.orange {background-color:#ffcc99;}
-->
</style>
html
文字に<span class="orange">背景色</span>をつける。
html
<p class="orange">文字に背景色をつける。</p>



文字に背景色をつけて、文字の色も変える

<head>と</head>の間に下記のように記述します。
htmlでspanに囲まれた文字に背景色がつきます。

<style type="text/css">
<!--
.orange {background-color:#ffcc99;}
.violet {background-color:#6633cc; color:#ffffff;}
-->
</style>
html
ホームページ作成は<span class="orange">簡単</span>!スタイルシートでデザインが <span class="violet">自由自在</span>です。
実際のウェブ上での見え方です。
ホームページ作成は簡単!スタイルシートでデザインが自由自在です。


関連項目・関連ページ
<div>と<span>の違い コメント(メモ) 見出しをつける 段落をつける 位置を決める



●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。


★skip ページtop



テキスト・フォント

フォント・文字

ページ全般

カラーコード表




ホームページを小粋に
css
java
home