CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

CSSHEXカラー


16進色は、#RRGGBBで指定されます。ここで、RR(赤)、GG(緑)、およびBB(青)の16進整数は、色のコンポーネントを指定します。


HEX値

CSSでは、次の形式の16進値を使用して色を指定できます。

#rrggbb _

ここで、rr(赤)、gg(緑)、およびbb(青)は、00からffまでの16進値です(10進数の0から255と同じ)。

たとえば、赤は最大値(ff)に設定され、その他は最小値(00)に設定されているため、#ff0000は赤として表示されます。

黒を表示するには、次のようにすべての値を00に設定します:#000000。

白を表示するには、次のようにすべての値をffに設定します:#ffffff。  

以下のHEX値を組み合わせて実験してください。

#ff6347

ff

63

青い

47

#ff0000
#0000ff
#3cb371
#ee82ee
#ffa500
#6a5acd

灰色の色合いは、多くの場合、3つの光源すべてに等しい値を使用して定義されます。

#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9


3桁のHEX値

CSSソースに3桁の16進コードが表示される場合があります。

3桁の16進コードは、一部の6桁の16進コードの省略形です。

3桁の16進コードの形式は次のとおりです。

#rgb _

ここで、r、g、およびbは、0〜fの値を持つ赤、緑、および青のコンポーネントを表します。

3桁の16進コードは、両方の値(RR、GG、およびBB)が各コンポーネントで同じである場合にのみ使用できます。したがって、#ff00ccがある場合は、次のように記述できます:#f0c。

次に例を示します。

body {
  background-color: #fc9; /* same as #ffcc99 */
}

h1 {
  color: #f0f; /* same as #ff00ff */
}

p {
  color: #b58; /* same as #bb5588 */
}