ホームページビルダー/スタイルシート編
スタイルシートの利用例
- 指定したサイズでテキストを表示させる(インラインフレームのように表示させる)
- 壁紙(背景画像)を繰り返さないで表示
- 背景画像を固定して表示
- リンクの下線を表示しない
- リンクを設定した文字にマウスを乗せると文字の位置がズレるようにする
- リンクを設定した文字にマウスを乗せると上下の線が表示される
- リンクを設定した文字にマウスを乗せると背景色と前景色が変わる
- リンクのスタイルを特定箇所だけ別のスタイルにしたい
- カーソル表示を変更する
- テーブル枠の表示<基本編>
- ウィンドウ内の余白を無くす
- ウィンドウを囲むような枠線を表示する
- 行間隔、文字間隔を調整する
- 縦書きにする
- フィルタを使って半透明にする
- フィルタで出来ること
- 色付きスクロールバー<小技編>
フィルタを使って半透明にする(IEのみ表示。IE4以上)
ビルダーのスタイル設定画面では出来ないので、HTMLソースでの書き込みが必要です。
filter:alpha(opacity=50)というタグをスタイルシート設定部分に付け加えます。
(opacity=50)という箇所が透明度を設定する数値です。100に近づく程、不透明になります。また、文字も同じように半透明になるのでご注意を!
▼サンプル
全くスタイルを設定していない場合は、 ピンク色の中のタグをコピーして貼り付けてください。
ページ編集画面では変わりありませんので、プレビュー画面で確認してください。
●既にスタイルを設定している場合。
スタイルの箇所を見つけて、HTMLソースで 下のソースの様になるように filter:alpha(opacity=50); を挿入しましょう。
特定の部分だけにスタイルを設定したい場合は、クラスで設定します。
| ◆表を半透明にする。(こんな感じになります。) 透明度50 背景色 #ff80c0 に設定しています。 <STYLE type="text/css"> <!-- TD{ filter:alpha(opacity=50); background-color : #ff80c0;} --> </STYLE> |
フィルタでこんなこともできます
|
|
フィルタでこんなこともできます
|
|
|
フィルタでこんなこともできます
|
フィルタで出来ること
一つの画像から、フィルタのスタイルを追加するだけで色んな感じに表示されます
下のスタイルは埋込スタイルシートを使っています
どうしてもHTMLソースでの作業が必要ですが、ソースを覗くのはちょっと苦手という方は少し無理矢理ですがこんな方法もあります。
●特定の個所のみに適用するスタイルを利用する場合
画像を右クリック→スタイル設定→編集(4)→(ホントは何も設定する必要はないのですが、何か設定しないとスタイルシートマネージャーが働かないので)フォント 「文字飾り」 なしをチェック→OK
そのままカーソルを移動せず、HTMLソース画面にするとカーソルは先ほど設定した画像のタグの所にあります。
<IMG src="***.gif" width="**" height="**"
border="0" style="text-decoration : none;">などとなっているので、その中のstyle="text-decoration : none;" 部分を変更します。(text-decoration
: none;のスタイルは「文字飾りなし」のスタイルで特に必要ないので削除します。)
例えば、透明度設定の場合は、<IMG src="***.gif" width="**" height="**"
border="0" style="FILTER:alpha(opacity=50);">と変更します。
文字に適用するときはレイアウト枠を作成し、Layer枠にフィルターを設定します。HTMLソースに直接スタイルを追加してください。
![]() |
■元の画像 | ||||||||||||||||||||
![]() |
■透明度 FILTER:alpha(opacity=50); 「opacity=**」 **の所には不透明度を決める数値 |
||||||||||||||||||||
![]() |
■ブレ FILTER: Blur(Add=0, Direction=0, Strength=10); 「Direction=**」 **の所にはブレる方向
|
||||||||||||||||||||
![]() |
■影をつける FILTER: DropShadow(Color=#999999, OffX=3, OffY=5, Positive=10); ●色と数値を変更して色々試してみてください |
||||||||||||||||||||
![]() |
■ウェーブ FILTER: Wave(Add=0, Freq=5, LightStrength=5, Phase=5, Strength=5); ●数値を変更して色々試してみてください |
||||||||||||||||||||
![]() |
■発光 FILTER: Glow(Color=#ffff66, Strength=5); ●色と数値を変更して色々試してみてください |
||||||||||||||||||||
![]() |
■白黒 FILTER: Gray; |
||||||||||||||||||||
![]() |
■上下反対 FILTER: FlipV; |
||||||||||||||||||||
![]() |
■左右反対 FILTER: FlipH; |
