- ベストアンサー
FireWorksで画像をTABLE化 でもズレる
- ネットショッピングモールでページ作成に挑戦中。画像をFireWorksで切り分けてTABLE化するが、モールサーバ内でレイアウトがズレる。
- <a href>で囲んだ画像の高さが増えてしまう可能性がある。モールサーバ内での表示が他の環境と異なる可能性がある。
- CSS経験はないが、HTMLとプログラムの基礎は理解できる。CSSのコーディングが未経験であるため、解決方法を教えてほしい。
- ARIES10
- お礼率96% (84/87)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （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"> <!-- div.header div.nav{ width:420px;height:314px;margin:0 auto; background:url(./images/background/02.jpg); position:relative; } div.header div.nav ol,div.header div.nav ol li{ display:block;margin:0;padding:0; } div.header div.nav ol li a{ display:block;position:absolute; text-indent:-20em; height:63px;overflow:hidden; } div.header div.nav ol li a[href="/"]{width:98px;top:18px;left:31px;} div.header div.nav ol li a[href="/Books"]{width:156px;top:66px;left:240px} div.header div.nav ol li a[href="/Products"]{width:228px;top:144px;left:13px;} div.header div.nav ol li a[href="/Profile"]{width:164px;top:228px;left:231px} div.header div.nav ol li a:hover{border:solid 1px red;} --> ＿</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>
お礼
ものすごく丁寧なアドバイスを頂き感動しております！ 確認環境を整えたり内容の理解をしたりを進めるために 少し時間がかかりそうなので、まずはお礼を、と 記入させて頂いております。 環境を整えて確認したのち、不明な部分が出てくる場合 のため(その可能性は高いかもしれません)に、 補足入力枠は使わずにおきます。 特に、アプローチや考え方というのは私が 日々ネット部門を専門にしている担当ではないため 小手先の知識やテクニックをネットで見つけては 取り入れて対応という感じで進んでおりますので ご指導頂ける機会というのは皆無でして 今回非常にありがたく感じております。 ありがとうございました。