共通スタイルを使って、フォントの色、背景色、ボーダー色を指定する事が出来ます。
色指定系クラス指定のヒント
文字の色を共通スタイルを使って変更する
文字の色を変えたい箇所のHTMLタグに次の様に指定します。
タイトルタグの場合
<h5 class="fcGreen"> つれづれなるままに </h5>
段落タグの場合
<p class="fcGreen"> 日暮らし硯に向かひて </p>
リストタグの場合
<p class="fcGreen"> 心にうつりゆくよしなしごとを </p>
文章の途中だけ変えたい場合は、次の様にspanやstrongなどのインライン要素タグを使って指定します。
通常は、<span>タグを使う
<p> つれづれなるままに、<span class="fcGreen">日暮らし</span>、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
強調(太字)にしたい場合は、<strong>タグを使う
<p> つれづれなるままに、<strong class="fcGreen">日暮らし</strong>、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
背景の色を共通スタイルを使って変更する
文章の途中だけ変えたい場合は、次の様にspanやstrongなどのインライン要素タグを使って指定します。
<p> つれづれなるままに、<span class="bgPink">日暮らし</span>、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
文字色指定のクラスと合わせて使う事で、背景色で文字が沈んでしまうのを防ぎます。
<p> つれづれなるままに、<span class="fcWh bgPink">日暮らし</span>、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
枠全体の色を変えたい場合は、divなどブロックレベル要素に対してクラス指定します。
<div class="bgPink">
<p>つれづれなるままに、日暮らし、硯すずりにむかひて</p>
</div>
つれづれなるままに、日暮らし、硯すずりにむかひて
文字色指定のクラスと合わせて使う事で、背景色で文字が沈んでしまうのを防ぎます。
<div class="bgPink fcWh">
<p>つれづれなるままに、日暮らし、硯すずりにむかひて</p>
</div>
つれづれなるままに、日暮らし、硯すずりにむかひて
枠線の色を共通スタイルを使って変更する
枠線色用のclassは、単体では使えません。
枠線の指定のスタイルと組み合わせてご利用ください。
<p class="bdGreen bdSolid"> つれづれなるままに、日暮らし、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
<p> つれづれなるままに、<span class=bdGreen bdSolid">日暮らし</span>、硯すずりにむかひて </p>
つれづれなるままに、日暮らし、硯すずりにむかひて
既に枠線が設定されている場合
既に枠線が設定されている箇所の枠線色を変えたい場合は、反映されない場合が多いです。これは、スタイルの優先順位が関係してきます。