文字や文章に背景色をつける
文章全体や文章の一部分に背景色をつけます
文字に背景色をつける文中の一部分の文字に背景色をつけたい時は下記のように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<!--
.orange {background-color:#ffcc99;}
-->
</style>
文字に<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
<!--
.orange {background-color:#ffcc99;}
.violet {background-color:#6633cc; color:#ffffff;}
-->
</style>
ホームページ作成は<span class="orange">簡単</span>!スタイルシートでデザインが
<span class="violet">自由自在</span>です。
実際のウェブ上での見え方です。
ホームページ作成は簡単!スタイルシートでデザインが自由自在です。
<div>と<span>の違い コメント(メモ) 見出しをつける 段落をつける 位置を決める
●当サイトのソースは、IE6.0+のみ動作確認をしております。 それ以外のブラウザでは同じように表示されない場合がございます。ご了承下さい。
★skip ページtop