https://www.analogcircuit.net/index.php?action=history&feed=atom&title=%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%3ABox-shadow%2Fdoc
テンプレート:Box-shadow/doc - 版の履歴
2026-05-12T11:52:45Z
このウィキのこのページに関する変更履歴
MediaWiki 1.43.8
https://www.analogcircuit.net/index.php?title=%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88:Box-shadow/doc&diff=1086&oldid=prev
Webmaster: 1版 をインポートしました
2019-10-06T04:41:53Z
<p>1版 をインポートしました</p>
<p><b>新規ページ</b></p><div>{{Documentation subpage}}<br />
<!-- PLEASE ADD CATEGORIES AND INTERWIKIS AT THE BOTTOM OF THIS PAGE --><br />
<br />
このテンプレートは影を生成するために使用します。様々な[[ブラウザー]]に対応したCSSを一括生成します。現在のところ、サポートしているブラウザは[[Opera]], [[Firefox]], [[Safari]], [[Google Chrome|Chrome]]および[[Internet Explorer]] 9です。<br />
<br />
== 使用方法 ==<br />
<br />
任意の要素の<code>style</code>属性内にテンプレートを埋め込みます:<br />
<br />
<pre><nowiki>{{box-shadow | Xオフセット | Yオフセット | ぼかし径 | 色 }}</nowiki></pre><br />
<br />
; <code style="font-style:italic;">Xオフセット</code> および <code style="font-style:italic;">Yオフセット</code><br />
: 影の位置を指定します。正の値を与えればそれぞれ右または下方向に、負の値を与えれば左または上方向に影がつきます。デフォルトは <code>4px</code> です。<br />
; <code style="font-style:italic;">ぼかし径</code><br />
: 影をどれだけぼかすか指定します。デフォルトは <code>4px</code> です。<br />
; <code style="font-style:italic;">色</code><br />
: 影の色を指定します。デフォルトは <code>#ccc</code> です。<br />
<br />
== 例 ==<br />
<br />
* <code>&lt;div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; '''<nowiki>{{box-shadow}}</nowiki>'''">Lorem ipsum...&lt;/div></code><br />これは以下のような影を生成します: <br />
<br />
<div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow}}">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><br />
<br />
* <code>&lt;div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; '''<nowiki>{{box-shadow|4px|4px|8px|#A0A080}}</nowiki>'''">Lorem ipsum...&lt;/div></code><br />これは以下のように、はっきりとした色つきの影を生成します: <br />
<br />
<div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow|4px|4px|8px|#A0A080}}">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><br />
<br />
== 関連項目 ==<br />
<br />
* {{tl|Border-radius}}<br />
* {{tl|Linear-gradient}}<br />
<br />
<includeonly><br />
<!-- CATEGORIES AND INTERWIKIS HERE, THANKS --><br />
[[Category:クロスブラウザ互換性テンプレート]]<br />
</includeonly></div>
Webmaster