テンプレート:Linear-gradient/doc

このテンプレートを使って、背景にグラデーションを設定できます。 現在、Firefox (3.6以上)、Opera (11.10以上)、Safari (5.1以上)、Google Chrome (10以上)とInternet Explorer 10に対応しています。

使用法

style属性のCSS内で使用します。 このテンプレートはbackground-image属性を使用しています。

<div style="{{linear-gradient | start position | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>

1. 開始位置 – 必須。left、top、right、bottomもしくはtop leftのような2つの組み合わせを指定します。これによって8種類の開始位置をサポートしています。
2. 色 – 必須。 コンマで区切っていくつでも指定できます。
3. 位置 – オプション。パーセンテージ(例:45%)やピクセル値(例:60px)を使ってそれぞれの色の位置を指定できます。

技術的情報

テンプレート:tlとは異なりこのテンプレートはデフォルト背景色を指定しないため、グラデーションをサポートしないブラウザへの自動フォールバックを提供しません。そのため、常にこのテンプレートの前にbackground-colorを指定するようにしてください。これによってデザインの柔軟性が増し、未サポートブラウザにも対応できます。

このテンプレートは新しいCSS3の属性を使用してグラデーションを実現しています。(-moz-linear-gradient、-ms-linear-gradient、-o-linear-gradient、-webkit-linear-gradient、linear-gradient) 過去の-webkit-gradientはその独特のフォーマットのため、サポートされていません。従ってSafariバージョン5.1より前とGoogle Chromeバージョン10より前には対応していません。

例

• <div style="{{linear-gradient|left|#ffdddd, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• <div style="{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• <div style="{{linear-gradient|top|#ffdddd, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

注意点

上の例では効果を分かりやすくするために対照的な色を使用しています。実用では、外見を向上させるためにも、未サポートブラウザでの表示の違いを減らす意味でも、微妙な色の組み合わせを使用ことが推奨されます。

互換性

• Mozilla Developer Networkのlinear-gradientですべてのブラウザでの互換性の詳細が確認できます。

関連項目

• テンプレート:tlとはやや差異があります。
• テンプレート:tl
• テンプレート:tl
• テンプレート:tl