CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでフォールバックカラー（代替色）を宣言する方法

フォールバックカラー（代替色）とは、ブラウザがRGBAカラーフォーマットに対応していない場合に表示される色を指します。RGBAに対応していない代表的なブラウザとしては、Opera 9以前やInternet Explorer 8以前などが挙げられます。

フォールバックカラーの仕組み

RGBAカラーを指定する前に、あらかじめ単一色（ソリッドカラー）を宣言しておくのがポイントです。CSSでは同一プロパティへの後続の宣言が優先されるため、モダンブラウザではRGBAカラーが適用されます。一方、RGBA非対応のブラウザではその宣言が無効として無視され、直前に指定された単一色が自動的に使われます。

サンプルコード

以下は、CSSでフォールバックカラーを宣言する例です。

<!DOCTYPE html>
<html>
<head>
<style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
    padding:20px;
    font-size: 24px;
    background-color: purple; /* フォールバックカラー */
    background-color: rgba(128, 0, 128, 0.527);
    color:white;
}
</style>
</head>
<body>
<h1>Fallback color example</h1>
<div>Some random text inside this div</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

CSSでフォールバックカラー（代替色）を宣言する方法

  1. CSSでリンクの色を設定する方法｜colorプロパティと疑似クラスの使い方

    CSSを使えば、リンクのテキストに自由に色を付けることができます。要素内のテキストの色を指定するには、color プロパティを使用します。さらに、リンクの状態に応じて色を変えたい場合は、疑似クラスを活用します。疑似クラスは :link → :visited → :hover → :active の順序で記述するのが基本です。これは「LVHAルール」とも呼ばれており、この順序を守ることで各スタイルが意図どおりに適用されます。構文CSSの color プロパティの基本構文は以下のとおりです。Selector {    color: /*値*/ }サンプルコード1次の例では、リン

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp