サイト内検索
...スタイルシート(css)...
フィルタ
フィルタの指定方法
- フィルタは、filterプロパティを指定します。
- 画像や文字に対して、影をつけたり輝かせたりと色々なことができます。
- 基本的な書き方
- filter: フィルタ名(属性=値);
- filter: に続けて フィルタ名を指定して、( )内に 属性=値 を記述します。
- ファイル名・・・フィルタの種類を指定します。
- (属性=値)・・・色、長さ、方向、他、細かい設定を行います。
- [使い方]
- .sample{
filter: shadow(color=blue, direction=45);
}
属性と値
- 属性と値の指定方法
- 例えばfilter: shadow(color=blue);
- 属性=その値と指定します。
- 上記の場合、色を指定する属性（color）と、その値に青（blue）を指定しています。
- filter: shadow(color=blue,direction=45);
- 複数の属性値を指定する場合は、カンマ（ , ）で区切って記述します。
div・span
- ボックスのサイズ指定（divとspanの場合）
- <div style="width: 100%;filter: fliph();">〜</div>
- div要素やspan要素にフィルタを指定する場合
- widthプロパティまたはheightプロパティで
ボックスのサイズを指定しておく必要があります。 - （または プロパティpositionで absolute を指定しておきます）
- この指定をしていないと、フィルタは適用されません。
余白の指定
- 余白の指定
- 影・ブレさせる・輝かせる・波状などのフィルタを指定するときは、
- その効果が表示される領域が必要です。
- サイズを調節するか、パディングを指定するなどして余白を作っておきます。
- paddingについては、こちらをご覧ください。
- [使い方]
- .sample{
padding-bottom:10px;
filter: shadow(color=blue, direction=45);
}
注意
- フィルタはＩＥで対応している機能です。
- filterを使用したページを、filterに対応していないブラウザ
- （Netscape Communicator 4.xなど）で表示すると
- 表示が崩れることがあるので注意してください。
- Internet Explorerで表示させる場合に
- タグの閉じ忘れ等の記述ミスをすると
ブラウザ自体が閉じてしまうことがあります。
