TOP > Expression Web & FrontPage Users Forum
[リストへもどる]
一括表示
タイトル： レイヤーの背景をグラデーションにするには
記事No： 99
投稿日： 2008/04/04(Fri) 11:08
投稿者： みゆき
記事内容:[FrontPage 2003]　

レイヤー内の背景をグラデーションにしたいのですが、どのようなコードをどこに貼り付けてよいのかわかりません。おしえてください。


FP2003の英語版を使ってます。

タイトル： Re: レイヤーの背景をグラデーションにするには
記事No： 100
投稿日： 2008/04/04(Fri) 11:15
投稿者： wanichan
まず、グラデーションの背景画像を用意してください。
その背景画像をそのレイヤーの背景として設定します。

レイヤーの<div>タグ内に
style="background-image: url("画像ファイルへのパス")"
を入れてください。

どうぞよろしくお願いします。

クイックタグセレクタのレイヤーの<div>の▼をクリックして、
Edit Tag... を選択します。
すると、クイックタグエディタが起動します。

<div id="layer1" style="position: absolute; width: 100px; height: 100px; z-index: 1">
になっている場合は

<div id="layer1" style="position: absolute; width: 100px; height: 100px; z-index: 1; background-image: url("画像ファイルへのパス")">

といった感じに、styleの要素に背景画像を追加します。

どうぞよろしくお願いします。

タイトル： Re^2: レイヤーの背景をグラデーションにするには
記事No： 101
投稿日： 2008/04/04(Fri) 13:21
投稿者： みゆき
返信ありがとうございます。

グラデ画像をレイヤーの背景に設定するという工程は理解できました。ですがそのグラデ背景自体をFPでどのように作成するのかを質問しました。

FPではグラデーション画像を作成する事は可能でしょうか？、ファイヤーワークスのような別のソフトで画像ファイルをつくらないと出来ないのでしょうか？

どこかのサイトで、２色を指定すると自動的にグラデの背景のコードを生成してくれるサイトがあり、そこでソースをコピーして、ページ全体の背景はグラデにすることは出来たのですが、レイヤー内にそのソースコードを張ってみたのですが、うまくいきません。

ちなみにページ背景として貼り付けたコードは以下のものですがこれを　例えばレイヤー内に挿入する場合どのようにすればよいのでしょうか？よろしくお願いします。


</body>
<STYLE TYPE=text/css><!-- BODY{FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#E0FFFF, endColorstr=#000000, gradienttype=0)}--></STYLE>
<body>

タイトル： Re^3: レイヤーの背景をグラデーションにするには
記事No： 102
投稿日： 2008/04/04(Fri) 13:35
投稿者： wanichan
FrontPageはWebサイト管理機能が付いたホームページ作成ソフトにすぎません。
Fireworksというのはデザインをいじるためのツールであり、Dreamweaverとは別になってるはずです。
つまり、Dreamweaverだけでグラデーション画像の作成はできない、ということです。

他のエディタで編集する必要があります。

<STYLE TYPE=text/css><!-- BODY{FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#E0FFFF, endColorstr=#000000, gradienttype=0)}--></STYLE>

この記述自体、<body>〜</body>内に入れるべきではありません。
<head>〜</head>にいれるべきです。
そして、その記述自体、bodyタグにスタイルを指定しているだけです。
レイヤーの名前はどうなっていますか？


1. <body>〜</body>内ではなく、<head>〜</head>内に<style>タグのブロックを入れること
2. レイヤーに名前を付ける（例：#layer1 = id="layer1"）
3. レイヤーにそのスタイルが適用できるように記述を書き換える

スタイルシートで実装するには、それなりにCSSの知識が必要です。
Expression Webを利用されると、UIで簡単に作れますけど・・・。
ただし、Expression Webだけでグラデーション背景画像を作成することはできませんが。

どうぞよろしくお願いします。

タイトル： Re^4: レイヤーの背景をグラデーションにするには
記事No： 103
投稿日： 2008/04/04(Fri) 14:20
投稿者： みゆき
”ページ全体”の背景をグラデにしようとした時に<body>〜</body>の中に先ほどのコードを挿入しました。それで一応ページ全体の背景はグラデになりました。”ページ全体”の背景をグラデにする場合は<body>〜</body>にコードを記入してはいけないのでしょうか？？
----------------------------------------------------
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
</head>

</body>
<STYLE TYPE=text/css><!-- BODY{FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#E0FFFF, endColorstr=#000000, gradienttype=0)}--></STYLE>
<body>

<div style="position: absolute; width: 100px; height: 100px; z-index: 1; left: 387px; top: 99px" id="layer1">
　</div>

</html>


--------------------------------------------------
”レイヤー内”のグラデ背景の場合は
<div style〜</div>　の間に先ほどのコードを挿入する場合はどういった形で入れればよいのでしょうか。。

↑の全コードはグラデ背景のページに1つだけレイヤーが置いてあるシンプルなものです。

ファイヤーウォークスMXは一応PCに英語版のがPCを中古で購入した時から入っていて持っているのですが、何か簡易版？のようで、よくチュートリアルサイトをみたりするのですが、そこで載っているような機能が表示されないものがあるみたいで、今ひとつ使いこなせていません。ですからまた別のサイトでグラデーション背景なんかを自動的に作ってくれるサイトなどでソースをコピーして貼り付けてみたりしました。

たびたびすいません。

タイトル： Re^5: レイヤーの背景をグラデーションにするには
記事No： 104
投稿日： 2008/04/04(Fri) 14:32
投稿者： wanichan
<body>〜</body>の中に<style>タグを使うことは通常ありえません。

こちらが参考になるでしょう。
http://www.htmq.com/html/style.shtml
http://html.eweb-design.com/1001_css.html

http://www.a2ztutorial.com/Style/ （W3C 日本語訳）

もし、<body>〜</body>の中に書いてしまうと、
HTML文書においてエラーになります。

高度なことをするには、それなりに知識が必要です。

それに、上記の記述自体、HTML文書ではアウトですよ。
ちゃんと構成立てて記述してください。
タグが本当にぐちゃぐちゃになってます。

どうぞよろしくお願いします。

タイトル： Re^6: レイヤーの背景をグラデーションにするには
記事No： 105
投稿日： 2008/04/04(Fri) 14:40
投稿者： みゆき
わかりました。もう少しHTML　と　CSSについて見てみます。ありがとうございました。