共通スタイル 色の指定

HTMLコーディング

色指定系クラス指定のヒント

文字の色を共通スタイルを使って変更する

文字の色を変えたい箇所の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>
 

つれづれなるままに、日暮らし、硯すずりにむかひて

既に枠線が設定されている場合

既に枠線が設定されている箇所の枠線色を変えたい場合は、反映されない場合が多いです。これは、スタイルの優先順位が関係してきます。

 

このページの関連記事

この記事には、以下の関連記事がございます。合わせてご覧ください。

HTML Snippets Powered By : XYZScripts.com