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

Question

お世話になります。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は未経験という状況です。

解決方法をご教示頂ければ幸いです。

よろしくお願いいたします。

ORUKA1951 · Accepted Answer

アプローチが根本的に間違っているようです。原因はリンクのある画像に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を書きます。たぶん、その部分は文書内のヘッダーブロックにおかれているナビゲーションのリストだと思いますから、　　

・・・【以下略】・・・　という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 ) ＿＿サンプル＿＿＿＿＿＿＿

＿＿

見出し

＿＿

・・・

＿

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

アプローチが根本的に間違っているようです。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

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