b-essence

気になること★いろいろなジャンルで更新していきます。

css・html

htmlで色を設定する方法

2015-01-23

htmlで文字色や背景色を指定する場合、以前はhtmlに直接<font>タグを使って記述することもありましたが、<font>タグは「非推奨要素」となっています。またHTML5では廃止になったタグです。
フォントカラーに関する指定は、スタイルシートを使用しましょう。
スタイルシートで色を設定する方法は5通あります。

????????

色の3原色 R(red)、G(green)、B(blue)がベースにある事を覚えていて下さい。

#rrggbb これは、RGBの色の割合を、00~FFまでの2桁の16進数を使って表示する最もポピュラーな方法です。1,677,216色の指定ができます。
例 color: {#000000;}
rgb (r,g,b) r(red)、g(green)、b(blue)のそれぞれ、0~255まで表示でき1,677,216色の指定ができます。
例 color: rgb{0,0,0;}
#rgb これは1桁の16進数で表示する方法です。rgbの割合を、0~Fまでの16進数を使います。4,096色の指定ができます。
例 color: {#000;}
カラーネーム 色の名前で直接指定する方法です。ブラウザで名前が定義されているカラーネームでカラー指定ができます。
例 color: {black;}
rgb (r%,g%,b%) RGB色の割合を、0%~100%までの100段階で設定する方法です。
例 color: rgb{0%,0%,0%;}
カラーネームによる指定

色名によってはOSやブラウザによって正しく表示されないことがあります。

下記の設定は すべて黄色です。

color: {#ffff00;}
color: rgb{255,255,0;}
color: {#ff0;}
color: {yellow;}

カラーコード一覧

????????


 

-css・html

関連記事

htmlで行間を変える方法

行間(行の高さ)を指定するプロパティです。 line-height: 小さい文字で、行間もくっついて読みにくいサイト様に出くわすことがあります。私はそれだけで、直帰! 行間は、ある程度の余裕を持たせた …

cellpadding と cellspacing

cellpadding と cellspacingtmlの違い 「cellspacing」「cellpadding」は、テーブル内のスペースを設定するタグです。 紛らわしいですが、簡単ですからしっかり …

htmlでソースを非表示にするタグ

<!– –> ・・・・・上記のタグの中に入れた文字が非表示になります。 非表示にするタグ htmlソースの中にメモを入れられたら便利ですよネ ソース中にコメント・メモを入れることができ …

ホームページで文字の背景に色をつける

背景色を指定するプロパティです。 background-color: 文字を強調したい場合や、単調な黒文字の文章にアクセントをつけたい場合など、文字の背景に色をつけるとサイトが見栄えよくなります。 サ …

フォントをカスタマイズ

ブログやホームページのフォントを変更してイメージを変える タグで囲って個別にフォント変更はできますが、全体に適用させたい場合はcssスタイルシートのbodyに使用したいフォントを指定します。ユーザーの …

スポンサーリンク

スポンサーリンク