mozilla
Your Search Results

    この文書では、CSS 中でどのように色を指定するかについて詳細に説明します。

    サンプルスタイルシートに、背景色を指定出来るようになります。

    解説: 色

    このチュートリアルでは、限られた名前付きの色だけを利用してきました。 CSS 2 では 17 個しか名前付きの色が定義されていません。 それらのいくつかの名前は、想像と異なるかもしれません。

      black   gray   silver   white  
    プライマリー red   lime   blue  
    セカンダリー yellow   aqua   fuchsia  
      maroon   orange   olive   purple   green   navy   teal  

     

    詳細情報
    ブラウザが上記以上の名前付きの色をサポートしている可能性もあります
    dodgerblue   peachpuff   tan   firebrick   aquamarine  

    拡張された色の名前リストについては、CSS 3 カラーモジュールの SVG 色キーワード を参照してください。利用者のブラウザがサポートしていない色を利用しないように注意してください。

    より広い色空間を利用するためには、赤、緑、青の各色の割合を、# の後に 3 文字の 16 進数 、0 – 9 か a – f、a – f は 10 – 15 を意味します、で指定してください。

    black   #000
    pure red   #f00
    pure green   #0f0
    pure blue   #00f
    white   #fff

    完全な色空間を利用するためには、それぞれの色について 2 文字の 16 進数を利用します。

    black   #000000
    pure red   #ff0000
    pure green   #00ff00
    pure blue   #0000ff
    white   #ffffff

    これらの 6 桁の 16 進数は画像ソフトやその他のツールで取得可能です。

    Examples
    少し練習すると、ほとんどの場面で 3 文字色指定は手動で調整できるようになります。
    赤から始めます   #f00
    桃色に近づけるため、緑・青を追加   #f77
    橙に近づけるため、緑を追加   #fa7
    暗くするため、全ての色を減らす   #c74
    飽和を減らすため、色の値を近づける   #c98
    色同士を完全に同じにすると、灰色   #ccc
    空色のようなパステル調を出すには:
    白から始めます:   #fff
    他の色の値を少し減らします:   #eef

     

    More details
    色の指定は、上記以外にでも、RGB 値を 0 – 255 の 10 進数やパーセント値で指定できます。

    たとえば、次の色はマロン (濃い赤) になります :

    rgb(128, 0, 0)
    


    色指定の詳細については、CSS 仕様書の をご覧ください。

    メニューや ThreeDFace のようなシステム色とあわせるための情報として、CSS 仕様書の CSS2 システム色 があります。


    色のプロパティー

    color プロパティーをすでに利用しました。

    同様に background-color プロパティーを指定することで、要素の背景色を変えることができます。

    背景色には transparent を指定でき、明示的に親要素の背景色を透過して、明示的に上書きすることも可能です。

    Example
    このチュートリアルの サンプル ボックスは、このような 淡黄色を背景色にしています。
    background-color: #fffff4;
    

    より詳細は のボックスは淡灰色を使っています。

    background-color: #f4f4f4;
    

    試してみましょう: カラーコードを利用する

    CSS ファイルを編集します。 以下で太字で書かれている変更を付け加え、最初の文字を淡青色の背景にしてください。 (ファイルのレイアウトとコメントは以下のものとは異なるとは思いますが、 好みのレイアウトやコメントの形式を利用してください。)

    /*** CSS Tutorial: Color page ***/
     
    /* page font */
    body {font: 16px "Comic Sans MS", cursive;}
     
    /* paragraphs */
    p {color: blue;}
    #first {font-style: italic;}
     
    /* initial letters */
    strong {
      color: red;
      background-color: #ddf;
      font: 200% serif;
      }
     
    .carrot {color: red;}
    .spinach {color: green;}
    

    ブラウザを再読み込みして結果を見てみましょう。

    Cascading Style Sheets
    Cascading Style Sheets

     

    Challenge
    結果を変えずに、CSS ファイルの全ての色の名前を 3 桁の数字のカラーコードにしてみましょう。

    (完全に同じに出来ないかもしれませんが、近い色にできると思います。 完全に同じにするには 6 桁のカラーコードが必要ですが、選択には CSS 仕様書を参照するか、画像ツールを利用する必要があるかもしれません。)


    次は ?

    あなたのサンプルは完全にスタイルと中身に分離されました。

    次のページでは、この完全分離の状態に例外を作る方法を説明します。 Content

    ドキュメントのタグと貢献者

    Contributors to this page: ethertank, teoli
    最終更新者: teoli,