FireWorksで画像をTABLE化でもズレる

2023/09/04 18:05

このQ&Aのポイント

ネットショッピングモールでページ作成に挑戦中。画像をFireWorksで切り分けてTABLE化するが、モールサーバ内でレイアウトがズレる。
<a href>で囲んだ画像の高さが増えてしまう可能性がある。モールサーバ内での表示が他の環境と異なる可能性がある。
CSS経験はないが、HTMLとプログラムの基礎は理解できる。CSSのコーディングが未経験であるため、解決方法を教えてほしい。

ベストアンサー

FireWorksで画像をTABLE化　でもズレる

2013/03/11 10:46

お世話になります。HTMLの記述について質問があります。 HTML系の質問が初めてですが、よろしくお願いします。現在ネットショッピングモールに出店していましてそこでページ作りに挑戦しています。ある画像をPhotoShopで作成したのち、その画像内の位置によって様々なページにリンクを飛ばしたいため FireWorksにバトンタッチしてスライスで切り分け、画像を分割してTABLE化し、リンク先を振り分けました。ブラウザで確認をしてもうまく行きます。 (IE ver.9.0.13,FireFOX ver.19.0.2で確認) しかし、それをモールサーバに転記すると、このサーバ内ではレイアウトがズレてしまいます。tdで分けられた横の画像同士の縦サイズに差が出来て横並びの画像が上下にズレる状態です。ただし、各画像の縦サイズをソース確認しても同じです。ちなみにリンク先がある画像は一部分だけでそこをコメントアウトしたところ解消され横並びの画像が上下にズレることはなくなりました。つまり、<a href="">　で囲ってしまうと画像は縦に少し高さが増えてしまうのではないかと推測しました。リンク先がある画像の部分だけが横の画像に比べて縦にスペースを食っているようにモールサーバ内では見えるからです。ちなみに<a href="">で囲っている画像は<img src="" border="0">と境界線が0になるような制御はしています。他に制御する必要があるのでしょうか？どうも通常なら細かく制御しなくても自動調整のようなものがかかりうまく表示される所が上記モールサーバ内ではそういう調整がかからない環境で、表示のされ方に差が出てしまうのかと感じています。ちなみに、CSS経験はありません。 SQLやVBの経験はあるのでプログラムの基礎はわかりますが、HTMLやCSSでのソース読解はある程度出来ても自身でコーディングとなると HTMLはなんとか、CSSは未経験という状況です。解決方法をご教示頂ければ幸いです。よろしくお願いいたします。

ARIES10
お礼率96% (84/87)

ホームページ作成ソフト
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/03/11 18:08 回答No.1

アプローチが根本的に間違っているようです。原因はリンクのある画像にborderかpaddingがつくためでしょう。ブラウザによって処理も対策も異なります。折角、HTMLの知識をお持ちなので、その方向で進めましょう。 HTMLは、『構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )←とっても重要なので読んでおくこと』が必要です。　また、「テキストを画像に置き換えて表現する。」「ページレイアウトの目的で表を用いる。」「HTMLでページを作らずにプログラムに頼る。」も避けたほうが良いです。　⇒スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ★特に画像を切り貼りしてTABLEで並べていくのは最悪です。　率直にHTMLを書きます。たぶん、その部分は文書内のヘッダーブロックにおかれているナビゲーションのリストだと思いますから、 <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href="/">トップ</a></li> 　　　　<li><a href="/Products">製品</a></li> 　　　　<li><a href="/Books">書籍</a></li> 　　　　<li><a href="/Profile">プロフィール</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section"> ・・・【以下略】・・・　というHTML/マークアップになるかと思います。 ★とっても簡単でしょ!!なにせデザインは考えずにひたすら文書構造をマークアップすれば良いのですから。。divのclass名は『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』を正直に踏襲しています。class名とその使い道は、HTML5の「新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」を参考にしています。　このHTMLをスタイルシートでデザインしていくわけですが、fireworksを使っても良いのですが--位置とかサイズを知るには便利かも---ここはシンプルにテキストエディタで書いてみます。(サイズはIllustratorを使って取得しました) 　このナビゲーションの背景となる画像をphotoshop(写真の場合)やIllastrator(イラスト)で作成します。fireworksでしたら、適当な画像フォルダーに入れておきます。　ここでは添付の画像(420×314)でとりあえず代用してください。(print Screenでキャプチャして02.jpgと言う名前で./images/background内に保存) [スタイルシート] 　下記ソースに記述　 ★後方互換を考える場合は、a一つ一つにclass名をつけると良いでしょう。以下が、このHTML/CSSの全文です。 ★HTMLは、Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA ★CSSは、W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) 　でチェック済み ★ウィンドウ幅がどのサイズでも中央に表示されます。 ★わかりやすくするため、ポインターが乗ると赤枠が出るようにしてあります。　これは、ボタンのように浮き出させたりクリックすると凹ませたり、訪問済みはチェックをつけたり自由にデザイン出来ます。 ★参考サイト　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="/">トップ</a></li> ＿＿＿＿<li><a href="/Products">製品</a></li> ＿＿＿＿<li><a href="/Books">書籍</a></li> ＿＿＿＿<li><a href="/Profile">プロフィール</a></li> ＿＿＿</ol> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/03/11 18:38

ものすごく丁寧なアドバイスを頂き感動しております！確認環境を整えたり内容の理解をしたりを進めるために少し時間がかかりそうなので、まずはお礼を、と記入させて頂いております。環境を整えて確認したのち、不明な部分が出てくる場合のため(その可能性は高いかもしれません)に、補足入力枠は使わずにおきます。特に、アプローチや考え方というのは私が日々ネット部門を専門にしている担当ではないため小手先の知識やテクニックをネットで見つけては取り入れて対応という感じで進んでおりますのでご指導頂ける機会というのは皆無でして今回非常にありがたく感じております。ありがとうございました。

関連するQ&A

HTML字数制限対応の文字置換パスを変数化？
お世話になります。HTMLの記述について質問があります。 HTML系の質問が初めてですが、よろしくお願いします。現在ネットショッピングモールに出店していましてそこでページ作りに挑戦しています。そこで作りたいページが8000byteの字数制限にひっかかってしまいました。心当たりがあり、参照する多くの画像を絶対パスで表記しているからです。ただ、作業の都合上、同モールのサーバの相対パスで表現できる場所に画像を置くことができず、相対パスでの表記では代替できません。そこで思い付いたのが、「http://～～モールサーバ名～～～/当店店舗名/～～」と絶対パスながら同じ表記となる場所があります。ここが画像の分だけ字数を食うのがよくないのでここを変数化できないかというものです。 HTMLファイルの最初に zettaipath = http://～～モールサーバ名～～～/当店店舗名/～～的な感じで宣言して、それを各リンクの部分に挿入できないかと考えました。ちなみに、CSS経験はありません。 SQLやVBの経験はあるのでプログラムの基礎はわかりますが、HTMLやCSSでのソース読解はある程度出来ても自身でコーディングとなると HTMLはなんとか、CSSは未経験という状況です。解決方法をご教示頂ければ幸いです。そもそもこういった制御はHTMLでは出来ない、ですとかこういった代替方法がある、など、実現方法にこだわりはありません。よろしくお願いいたします。
- ベストアンサー
- ホームページ作成ソフト
リンクする画像とテキストをくっつけるには？
ブログでHTMLタグを使いたいのですがまだよく分かりません。テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像（写真）をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A>　私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか？ご教授願えませんか？
- ベストアンサー
- ブログ
FireworksでのHTML書き出しについて
HTML、CSSを勉強中の初心者です。初歩的な質問ですが、お答えいただけると幸いです。 Webページ制作について自分なりに色々調べていたところ、一般的にWebページを作る場合、FireworksでHPをレイアウトし、スライス→書き出しをした後に、書き出した画像を一つ一つ（手打ち、もしくはDreamweaverなどで）配置する、というのが主流のようです。しかし、実際にFireworks CS6を使ってみたところ、書き出し時に「HTMLと画像の書き出し」、「CSSと画像の書き出し」というものがありました。「HTMLと画像の書き出し」では、テーブルが使用されているため、現在は推奨されないと思いますので、使用されないのはわかるのですが、「CSSと画像の書き出し」では、現在主流となっているCSSでのレイアウトになっているようでした。書き出されたHTMLを確認してみたところ、表示・ソースも一見問題ないように見えたのですが、この機能があまり使われていないのはなぜでしょうか。 ※もちろん、この書き出しはただ一枚のページを作っただけで、そこから様々な動作をつけるのは自分でやらなければいけないのは理解しています。
- ベストアンサー
- その他Adobe製品
リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。どうやったら、切り分けられますでしょうか。現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
スタイルシートでのマウスオーバー時の画像について
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssというカスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ width:100px; height:25px; background-image:url(./pic/home.png); } a:hover.link1{ width:100px; height:25px; background-image:url(./pic/home_over.png); } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、困っております。どうか智恵をお貸し下さい。宜しくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
ブログでアフィリエイトなどのリンクや、画像などを組み込みやすいブログは、どこ?
ブログを自分なりに、ちょっと込み入って作り上げたい場合、画像を入れたり、リンクを張ったり、アフィリエイト広告を入れたり、背景を変えたり、って色々やりますよね。でも、HTMLやCSSなどを読めないとどこにどうやってやっていったらいいか、 HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→HTML・CSS編集→ブログ表示→という具合に、編集しては確認、編集しては確認と続きますよね。それが大変だなあと思うんです。ホームページビルダーみたいな簡単にスタイルを変えたり出来る気の効きすぎたブログサイトってないんでしょうか? あったら教えていただきたいなあ。ありますか？
- 締切済み
- ブログ
ＣＳＳとMacの関係
ＣＳＳの制御で、外部ＣＳＳマック用に css/style_mac.css に body {font-size: 12pt;} td {font-size: 12pt;} ウイン用に css/style_win.cssに body {font-size: 10pt;} td　　{font-size: 10pt;} と記述しています。がプラウザで確認したところ、 windows　IE5.0は制御されていますが、 Mac IE5.0で制御されません。 HTMLの呼び出しは、 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> と記述しています。そもそもjavaがわからないのでどこを直せばMacでも制御されるのでしょうか。よろしくお願いいたします。
- ベストアンサー
- HTML
「見出し画像+小見出し」と「見出し画像+小見出し」の並べ方
「見出し画像（文字と同じ大きさ程度）+小見出しのtext」をいくつか縦に並べたいのですが、その間隔をCSSで設定したいと思います。 ■画像A+小見出しtext （この間隔を制御したい） □画像B+小見出しtext （この間隔を制御したい） ★画像C+小見出しtext....以下同じ「画像+小見出し」をdivでまとめて、それに対して「下方向margin」を与えて間隔を制御したのですが、このやり方は間違った方法なのでしょうか？正しいCSSを学びたいのですが、どなたか教えていただけますか？
- ベストアンサー
- CSS
作りたいホームページのイメージ画像をつくりました。
作りたいホームページのイメージ画像をつくりました。ＨＰの横のほうに、縦に余白をつくり、真ん中のほうには画像のように縦に長くボックスのようなものをつくり表示するには、どうすればよいでしょうか? htmlとcssは一応軽くは勉強したのですが、どうするか思いつきません。ボックスのようなものはテーブルを使い挑戦してみたりしたのですが、うまくいかないです。また、HTMLとCSSだけで、このようなサイトは作れるでしょうか？
- ベストアンサー
- HTML
マウスオーバー時の画像とCSSについて
久しぶりにHTMLをいじってたんですが、すっかり忘れちゃって色々見てみたんですが、解決しなかったので教えて下さい。 indexと同じディレクトリにdesignというフォルダを作り中にmouse_over.cssというカスケードスタイルシートを作りました。 "mouse_over.css"の内容は a:link.link1{ display:block; width:100px; height:25px; background-image:url(./home.png); text-indent:-10000px; list-style:none; } a:hover.link1{ display:block; width:100px; height:25px; background-image:url(./home_over.png); text-indent:-10000px; list-style:none; } です。それと、上同ディレクトリにpicというフォルダを作り、homeとhome_overという2種類の画像を入れてあります。indexには、head内に <link rel="stylesheet" type="text/css" href="design/mouse_over.css" />というリンクを張り、 body内に<a href="リンク先URL" class="link1"></a>としましたが、画像が出ません。上記のCSSをindex内に<style>括りで書くと、画像も表示されちゃんとマウスオーバーで画像が変わるのですが、CSSを別に置くとindexは真っ白のまま何も表示されません。何処が間違っているのかかなり色々やったのですが、まったくわからなくなってしまい、困っております。どうか智恵をお貸し下さい。宜しくお願いします。
- 締切済み
- ブログ