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

関連記事

cellpadding と cellspacing

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

htmlで行間を変える方法

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

表(テーブル)をcssで作る

ホームページ作成時に、テーブルを作る場合も多くあると思いますが、htmlに実装するよりもスタイルシートで簡単にテーブル(表)をデザインすることができます。cssでデザインするので、htmlもスッキリし …

<p> <div> <span>の使い方

htmlで文章を書く際に<p><div><span>を使い分けられたら、htmlの半分以上を制したと言えるでしょうネ。 頻繁に使うこの3個のタグ<p>& …

HTMLタグの基本構造・head要素

HTMLタグの構造 htmlの構造は以下のようになっています。 ホームページの基本的な構造です。 htmlファイルは大きく分けるとヘッダ<head>部分とボディ<body>部分 …

スポンサーリンク

スポンサーリンク