Webmaster: 1版をインポートしました

2019-10-06T01:05:14Z

1版をインポートしました

新規ページ

{{Documentation subpage}}


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

== 使用法 ==

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

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

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

== 技術的情報 ==

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

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

== 例 ==

{{see also|en:Template:Linear-gradient/testcases}}

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

<div style="{{linear-gradient|left|#ffdddd, #ddddff}}">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>

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

<div style="{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">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>

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

<div style="{{linear-gradient|top|#ffdddd, #ddddff}}">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>

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

== 互換性 ==
* Mozilla Developer Networkの[https://developer.mozilla.org/en-US/docs/CSS/linear-gradient#Browser_compatibility linear-gradient]ですべてのブラウザでの互換性の詳細が確認できます。

== 関連項目 ==

* {{tl|gradient}}とはやや差異があります。
* {{tl|radial-gradient}}
* {{tl|border-radius}}
* {{tl|box-shadow}}

<includeonly>

[[Category:クロスブラウザ互換性テンプレート]]

</includeonly>

テンプレート:Linear-gradient/doc - 版の履歴

Webmaster: 1版 をインポートしました

Webmaster: 1版をインポートしました