スワップイメージが出来ないのでしょうか？

質問

IllustratorCSでホームページに使うメニューなどの画像を作成していますが、スライスツールのCSS出力を使用しているのですが、その後ホームページ作成ソフトでスワップイメージを作ろうとするのですがうまく出来ません。

CSSで出力した画像などには、スワップイメージ（ロールオーバー）などは適用できないのでしょうか？

経験のある方ご指導をお願いいたします。

回答No.2

Joh_Taka · ベストアンサー

#1です。
補足を拝見致しました。

他に回答が無いようですが、それも致し方ないと思います。

まず、こちらは「グラフィックソフト」のカテゴリーですから、Illustrator CS の不具合によってCSSの出力自体にエラーが生じたため、その解決方法に対するご質問ということでしたら、こちらが適切なカテゴリーですから、経験者から何らかのアドバイスが寄せられたことと思います。
しかし、問題点はグラフィックソフトである Illustrator CS では無く、出力されたCSSが記述されたHTMLと、スライスによって分割された各画像を扱うWebPage作成ソフトの Dreamweaver MX が、独自の解釈によってソースが改変されてしまい、CSS-Layer に対して何らかの不具合を起こしている可能性があります。
少なくとも、Illustrator には何も問題は無いはずです
その点では、コンピューター [家庭向け] > ソフトウェア > ホームページ作成ソフト がご質問に対する適切なカテゴリーです。

しかし、ホームページ作成ソフトのカテゴリーでご質問されてたとしても、解答が得られる可能性は高くは無いでしょう。
ANo.1の通り、CSS-Layer の position は、大変不安定なものです。
言わば、Pageの上を各画像が浮いているようなものです。
CSSは、その使用用途によって適、不適があります。
様々なOSやブラウザの種類でユーザはWebSiteを閲覧しています。
W3Cの勧告通りに、盲目的にレイアウトを片っ端からCSSだけを使ってWebPageを作成していたのでは、表示の不具合でクレームの集中砲火を浴びるなど、後々痛い目に遭う現実があります。
（W3Cの奨励する方法のみでWebSiteを構築していたのでは、超ダサダサの味も素っ気もないSiteしか出来ないでしょう）
大手の商用サイトでも、いや、企業イメージを大切にする商用サイトであるからこそ、CSSも用途によって使い分け、安全のためTableでレイアウトするべきところは今でもしっかりTableを使っています。
（余談ですが、より安定した動的Contentsの作成にFlashを利用し、それと共にユーザ環境により動作にばらつきのあるJavaScript全般の使用が控えられている現状は、私自身は良いことと思っています）
そのような現状ですから、CSSがもてはやされている中で、私のように（質問者さんの状況を鑑みて）敢えてTableの使用を勧めることは、Web制作者は心の中で思っていても、それをQ&Aサイトでわざわざ回答として投稿はしないでしょう。
CSSの盲目的な崇拝者からバッシングを浴びることは、火を見るより明らかですから。

それでも、どうしてもCSSで作成したいのでしたら、的確な解答を得るためにはソースコードを公開していただく必要があります。
禅問答のように文章だけでの状況説明や推測解答では、問題の核心に至るまでに大きく紆余曲折を繰り返してしまうでしょう。
不明な点はJavaScriptやHTMLの専門カテゴリーでご質問されることをお勧め致します。

お礼

Joh_Takaさん、度々ありがとう御座います。

CSS・・・、難しいですね！私も少し過剰な反応を示していたかもしれません。安全を考えれば、使うところではtableを使う、それを見極めるのも仕事なんですね。

大変勉強になりました。ありがとう御座います。

回答No.1

Joh_Taka

色々と不明な点がありますので、今後私が追加回答出来るかは分かりませんが、このご質問を目にする他の回答者の方々からの回答やアドバイスを受けやすいように、以下の点の詳細を補足願います。

>スライスツールのCSS出力を使用しているのです

何故わざわざCSSで出力する必要があるのでしょうか？
Illustrator CS のメニューから「ファイル」→「Web用に保存」で表示されるWeb用に保存ダイアログの「設定」→「▲」→「出力設定の編集」→「スライス」を「CSSを生成」にすると、生成されるHTMLはCSSの position 属性で absolute ＝ 絶対位置指定 するものです。 http://www.tohoho-web.com/css/reference.htm#position

この position:absolute は、実に曲者で、各ブラウザの種類によって（OSの種類も含めて）表示状態が大きく異なり、閲覧者環境によっては正常に表示されないことがあります。
よくあるトラブルとして有名な、HP作成ソフト「ホームページビルダー」の「どこでも配置モード」を使用して作成されたページが、閲覧者環境によっては表示がぐちゃぐちゃになってしまうのも、この CSS-Layer の position:absolute が原因です。http://beginners.atompro.net/htm/smpcss/divgrph.shtml

W3Cの勧告通り、Web制作に於ける最近の風潮として、「ページの体裁はHTMLではなくCSSで行う」ことに異論はありませんが、あたかもCSSが万能であり、まるでTableでのレイアウトが悪のように蔑視される風潮には疑問を感じます。
現実に目を据えれば、不安定な表示状態のCSSよりは、Tableを使用してのレイアウトの方が良い場合もあると思います。

>その後ホームページ作成ソフトでスワップイメージを作ろうとするのですが

ホームページ作成ソフトはDreamweaverですか？（違ったかな？）
ソフトの名前とバージョン、OS等の詳細情報を提示して下さい。

どこまでが出来て、どこから先が出来ないのかが不明です。
ロールオーバーを設定する以前に、正しい場所に正しく画像は表示されているのでしょうか？
Illustrator CS で生成されたHTMLの CSS-Layer - position:absolute の値は、ブラウザの左上を起点とした（左上に画像が隣接した）表示となっていますから、表示場所を変えるにはスライスで分割された各画像の値を、それぞれ正しく書き替えなければいけません。
その数値に矛盾はありませんか？

>CSSで出力した画像などには、スワップイメージ（ロールオーバー）などは適用できないのでしょうか？

出来ます。
JavaScriptでロールオーバーを設定する記述 http://java.misty.ne.jp/rollover.html に誤りがなければ、問題なく動作します。

Illustrator CS のスライス → Web用に保存で書き出されたJPEGやGIF（またはPNG）画像は、単なる極一般的にWebで使用可能な画像にしかすぎません。
JavaScriptのイベントハンドラ onmouseout と onmouseover 等、各マウスイベントで入れ替わるそれぞれの画像のサイズ（縦横の長さ）が同じであれば、使用する画像自体がロールオーバーに適さないということはあり得ません。

画像のサイズも画像形式にも問題は無く、それでも動作しないのであれば、原因は当然画像以外のところにあります。
HP作成ソフトの種類によって、生成されるJavaScriptやHTMLの記述はそれぞれ細かい部分で異なりますので、ソースを調べて手直しで修正することで問題解決に繋がる可能性が大きいと思います。
Illustrator CS で生成されたHTMLの、どの部分をどのように切り出してHP作成ソフトに適用したのか、その詳細を教えて下さい。

先ほど Illustrator CS で作成した画像をいくつかにスライスで分割して、その一部をロールオーバーで画像をチェンジするように試しに GoLive CS で作成してみましたが、GoLive CS の場合は CSS-Layer の position:absolute で絶対位置指定した各画像でロールオーバーを設定すると、何故か <img> の border 属性が付かなかったため手作業で border="0" の属性と値を追加記述するだけで、他には何も問題なく作成することが出来ました。
（CSSの絶対位置指定なので、ロールオーバーの機能は疎かブラウザの種類によっては正常に表示すらされませんでしたが、サーバにUPして表示チェックしても、Win.のIE等では問題ありませんでした）

もしかして、ロールオーバーもJavaScriptではなく、CSSのみで作成されているのでしょうか？
たとえそうであっても、正しい記述であれば問題なく動作するはずですが・・・？

お礼

Joh_Takaさん、貴重なご意見本当にありがとう御座います。色々と説明不足で申し訳ありませんでした。補足をさせていただいてよろしいでしょうか？

>何故わざわざCSSで出力する必要があるのでしょうか？

やはり、テーブルなど余分なタグを書きたくないのですが・・・。

>JavaScriptでロールオーバーを設定する記述 http://java.misty.ne.jp/rollover.html に誤りがなければ、問題なく動作します。

うーんやはり感知してくれませんねー？？？

>Illustrator CS で生成されたHTMLの、どの部分をどのように切り出してHP作成ソフトに適用したのか、その詳細を教えて下さい。

HP作成の使用ソフトは、DreamweaverMXです。まずIllustrator CSで作成します。そしてこのままスライスをかけます。出力はHTMLとimagesです。そして出力されたHTMLファイルをHP作成ソフトで立ち上げます。

次にスワップイメージに使用する画像を、同じimagesファイル内に置きます。そしてHP作成ソフトからスワップイメージを選択するのですが、完成を見ると反応がありません。ちなみにテーブルで作るときちんと作成できます！なのでCSSでは無理なのかなー？と思ったんですが・・・。

ちなみにnetscapeとfirefoxで動作確認をしてみたのですが、結構複雑なメニューなのですがきちんと表示されていました。しかし細かい部分が歯抜けになってしまって空白が出来る部分があります。

やはりテーブルで作った方がいいのでしょうか？