ALT属性に見出しタグをつけると画像がズレる問題について

前へ 次へ
このQ&Aのポイント
  • HTMLで見出しタグを使用し、画像のALT属性を設定すると、画像がずれてしまう問題が発生します。
  • 画像の位置固定をCSSなどで行わず、HTML内で完結する方法を模索しています。
  • HTML4.01ではalignタグは非推奨であり、もっと適切な解決方法を探しています。
回答を見る
  • ベストアンサー

ALT属性に見出しタグをつけると画像がズレます。

見出しタグをHTMLで製作後、画像とALT属性に採用すると 画像がずれてしまいます。 <img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> を <h2><img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> </h2> 以下のコーディングにすると画像がずれます。 HTMLバージョンは、DTD HTML 4.01 Transitional　となります。 CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 どのように変えれば良いでしょうか また、alignタグなどは、HTML4.01非推奨で使えません。 バグで探したのですが見付かりませんでした。 よろしくお願いします。

  • HTML
  • 回答数8
  • ありがとう数4

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

  • ベストアンサー
  • outbrave
  • ベストアンサー率60% (231/380)
回答No.7

>画像とALT属性にスタイルシートを外部ファイルとして採用しようとしていますが、こうなると画像を背景に指定するしかないのでしょうか？ 何を心配されているのかがよくわかりません。 まず、alt属性は関係ないので今だけ忘れてください。 alt属性は画像が表示されなかったときに表示させる文字列で、alt属性にスタイルシートを適用するとかはできません。 次に、Hタグで imgタグを囲むのも問題ありません。 もちろん、Hタグの background（背景）として画像を表示させても大丈夫です。 background を使用するときのメリットは文字列を画像の上に表示できることで、画像だけを表示するときは、imgタグを使用するのが一般的じゃないですかね。

k_berry
質問者

お礼

この記事を投稿した後に失敗したかな...なんて思っていたのですが、親切な回答を頂き気が晴れる思いでした。 スタイルシートの適用に自信が持て 迷いが吹き飛んだ気がします。 親切な回答を頂きありがとうございました。

その他の回答 (7)

回答No.8

>それと幾通りかやってみたのですがh1～h6までに外部ファイルとしてmargin:0の設定を施してもSEOには問題なさそうです。 私の経験上ですが、クローラーはCSSをほぼ読みません。(外部・内部・インライン問わず) タグのみ判断します。 >画像とALT属性にスタイルシートを外部ファイルとして採用しようとしていますが、こうなると画像を背景に指定するしかないのでしょうか？ 意味的にはimg要素を使ったほうが正しい、背景を画像に見せかけるのはあくまで代換手段。 SEO的にはどちらも一緒。

k_berry
質問者

お礼

HTMLのみならず完成度を高める上で確信が持てるととても助かりますね。 目から鱗のような気がします。 完成まで迷いがなくなりそうです。

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.6

ANo.3 です。 H2 のデフォルトマージンでずれたように見えたと考えられます、画像ファイルを表示させているので文字サイズは関係ありません。 margin:0 もスタイルシートです、デフォルトマージンはブラウザが持っているものなので、HTML の規格ではないですし、マージンを変更しても SEO には関係ないです。 スタイルシートで文字を見えなくしたり隠したりしなければ、問題ありません。

k_berry
質問者

お礼

確かにおっしゃるようにmarginのようです。 HTML4.01では、あらかじめ見出しの企画のようなものがあるようですので それと幾通りかやってみたのですがh1～h6までに外部ファイルとしてmargin:0の設定を施してもSEOには問題なさそうです。 画像とALT属性にスタイルシートを外部ファイルとして採用しようとしていますが、こうなると画像を背景に指定するしかないのでしょうか？

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.5

画像忘れてました。

画像を拡大する
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

＞にて、div要素などに赤枠が出来、他の画像位置まで狂います。 ＞単純に画像にalt属性を設定したものに見出しｈ1～を適用するのは不可能という ＞事のサンプルでしょうか？ 実際の表示例は・・添付のようになるはず・・・ 　altの有無は無関係です。・・・ 　

  • outbrave
  • ベストアンサー率60% (231/380)
回答No.3

>見出しタグをHTMLで製作後、画像とALT属性に採用すると画像がずれてしまいます。 画像を<h2>タグで囲むと画像の表示位置が変わる...ということなら <h2 style="margin:0"> alt は関係ないと思いますけど。 意味が違うならスルーしてください。

k_berry
質問者

お礼

確かに画像のズレが全て回避されました。 HTML4.01では、見出しで指定される文字サイズが指定されていて、その影響で画像のズレがブラウザ上で現れていたのかもしれません。 スタイルシートに気を取られ margin:0 まで思い付きませんでした。 ただSEOの観点上4.01の規定をはずれｈ2タグの役割を損なわなければ良いのですがこのあたりは、どのようなものでしょう？ とても参考になりました。

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

＞画像がずれる要因はどうなるのでしょうか？ 　画像がずれると言う意味が何を基準にずれるのかわからないのですが、その要素によってmarginやpaddingが異なるので、表示は変わります。下記サンプルをテスト・・匿名ブロックはdivではなくpとして解釈されているようですね。 　 　もう一度、No.1の回答をよく読んでください。そして、「スタイルシート」を使わず・・ということは原理的に不可能(ブラウザ自身が持っているし、それは同じではない)なので、ブラウザの差を吸収するために最低限のスタイルシートを書くべきです。 <!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"> <!-- *{border:solid 1px red;} --> </style> </head> <body> <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">あ <h1><img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">い</h1> <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">う <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">え <h2><img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">お</h2> <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">か <p><img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">き</p> <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">く </body> </html>

k_berry
質問者

補足

組込んでみましたが無茶と思います。 以下の場合、画像が縦に２つ表示されるのみです。 <img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">あ <h1><img src="./images/sample1.jpg" width="240" height="169" alt="なんたらかんたら">い</h1> また、外部ファイルから読み込みましたが *{border:solid 1px red;} にて、div要素などに赤枠が出来、他の画像位置まで狂います。 単純に画像にalt属性を設定したものに見出しｈ1～を適用するのは不可能という事のサンプルでしょうか？ HTMLバージョンを故意に変えるしかないのでしょうか？

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

いくつか重要な誤解があります。 ＞<img src="images/img6.jpg" alt="●●●●●●●●●●●●" width="745" height="511"> 　IMGはインライン要素です。(ブロック要素とインライン要素については説明しません) 　IMGがもしルート(BODY直下にあれば、それはHTMLの仕様上ありえないので、匿名ボックスが作成されます。DOM的には 　BODY 　　|-- 匿名ブロック 　　|　　|-- IMG 　　|　　 　　|-- ●●●●●●●(テキスト) と解釈されます。 　よって、 　BODY 　　|-- H2 　　|　　|-- IMG 　　|　　 　　|-- ●●●●●●●(テキスト) とは、異なります。この差が次とあいまって表示が変化します。 ＞CSSなどで画像の位置固定をするのではなく、そのままHTML内で完結したいと考えています。 　残念ですが、ブラウザはスタイルシートを持っていますから、著者が指定していなくても、そのスタイルシートが適用されます。CSS2.1の仕様書にも、そのスタイルシートの例が書かれています。 　よって「HTML内で完結したいと考えています。」は不可能です。 　　　　　　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 検索エンジンの代替としてよく使われるLynxでさえスタイルシートを持っています。 ・Author.・・・【中略】・・・ ↓ ・User・・・【中略】・・・ ↓ ・User agent: Conforming user agents must apply a default style sheet (or behave as if they did). 　(HTML4に)適合したユーザーエージェントは、まずデフォルトスタイルシート（default style sheet）を適用しなければならない 　参照→Default style sheet for HTML 4 ( http://www.w3.org/TR/CSS2/sample.html ) 　そこには、 h2 { font-size: 1.5em; margin: .75em 0 } 　と書かれています。一方pは h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } 　です。

k_berry
質問者

補足

しかし見出しの重要性の観点より、見出し（h1，h2，h3など ）alt属性の代替テキストが、構造的には見出しになる。 とあります。 構造の順番であるh2であれば、画像がずれるのと因果関係がないのではないでしょうか？ 画像がずれる要因はどうなるのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • JavaScript - 月ごとに画像変化

    <script type="text/javascript"> <!-- var myimg = new Array(); myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">'; myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">'; myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">'; myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">'; myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">'; myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">'; myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">'; myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">'; myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">'; myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">'; myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">'; myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">'; var mynow = new Date(); var mymonth = mynow.getMonth(); document.write("<center><img 'src="+myimg[mymonth ]+"'></center>"); // --></script> このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。 画像の変化自体はうまくいってますが、ブラウザの多くは [a.jpg]'> （"["と"]"は画像の端）という風に、右端に文字が出てしまいます。 試しに、2つの"'"を消せば []> という風に、画像が見つからない×印がついて表示も出来ません。 文字が出ないようにするにはどう対応するのでしょうか。 詳しい方アドバイスお願いします。 ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

  • ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ

    ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>

  • 一瞬画像が

    現在、jQueryを使って、以下のようなフラッシュもどきのギャラリー表示を作っていますが このソースをSleipnirというブラウザで実行し、リロードをすると、一瞬画像が縦に並んでしまい 一瞬とはいえ、見た目がくずれてしまいます。 これをくずれないように表示するにはどうしたらよいのでしょうか？ どなたか、よいお知恵をお願いいたします。 <!doctype html> <html> <head> <title>JQuery Cycle Plugin - Example Slideshow</title> <!-- include jQuery library --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <!-- include Cycle plugin --> <script type="text/javascript" src="jquery.cycle.all.min.js"></script> <!-- initialize the slideshow when the DOM is ready --> <script type="text/javascript"> $(document).ready(function() { $('.slideshow').cycle({ fx: 'fade' , timeout: 8000 , speed: 500 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow2').cycle({ fx: 'fade' , timeout: 4000 , speed: 4000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); $('.slideshow3').cycle({ fx: 'fade' , timeout: 2000 , speed: 8000 // choose your transition type, ex: fade, scrollUp, shuffle, etc... }); }); </script> </head> <body> <div style="width:900px;"> <div class="slideshow2" style="float:left;"> <img src="images/common/a1.jpg" width="300" height="300" /> <img src="images/common/a2.jpg" width="300" height="300" /> <img src="images/common/a3.jpg" width="300" height="300" /> <img src="images/common/a4.jpg" width="300" height="300" /> <img src="images/common/a5.jpg" width="300" height="300" /> <img src="images/common/a6.jpg" width="300" height="300" /> <img src="images/common/a7.jpg" width="300" height="300" /> <img src="images/common/a8.jpg" width="300" height="300" /> <img src="images/common/a9.jpg" width="300" height="300" /> <img src="images/common/a10.jpg" width="300" height="300" /> <img src="images/common/a11.jpg" width="300" height="300" /> </div> <div class="slideshow" style="float:left;"> <img src="images/common/b1.jpg" width="300" height="300" /> <img src="images/common/b2.jpg" width="300" height="300" /> <img src="images/common/b3.jpg" width="300" height="300" /> <img src="images/common/b4.jpg" width="300" height="300" /> <img src="images/common/b5.jpg" width="300" height="300" /> <img src="images/common/b6.jpg" width="300" height="300" /> <img src="images/common/b7.jpg" width="300" height="300" /> <img src="images/common/b8.jpg" width="300" height="300" /> <img src="images/common/b9.jpg" width="300" height="300" /> <img src="images/common/b10.jpg" width="300" height="300" /> <img src="images/common/b11.jpg" width="300" height="300" /> <img src="images/common/b12.jpg" width="300" height="300" /> </div> <div class="slideshow3" style="float:right;"> <img src="images/common/c1.jpg" width="300" height="300" /> <img src="images/common/c2.jpg" width="300" height="300" /> <img src="images/common/c3.jpg" width="300" height="300" /> <img src="images/common/c4.jpg" width="300" height="300" /> <img src="images/common/c5.jpg" width="300" height="300" /> <img src="images/common/c6.jpg" width="300" height="300" /> <img src="images/common/c7.jpg" width="300" height="300" /> <img src="images/common/c8.jpg" width="300" height="300" /> <img src="images/common/c9.jpg" width="300" height="300" /> <img src="images/common/c10.jpg" width="300" height="300" /> <img src="images/common/c11.jpg" width="300" height="300" /> </div> </div> </body> </html>

  • テーブル高さ指定タグについて

    テーブル高さ指定タグについて サイズがバラバラの４枚の画像をテーブルを使って同じ幅・高さ縦横各２枚並べて表示したいと思っています。 下記のとおり高さ・幅300と指定をしているにもかかわらず、400×400pixの画像が高さを超えて目いっぱい表示してしまいます。 <table border="1" width="600" height="600" cellspacing="0" cellpadding="0"> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_1.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_2.jpg"></td> </tr> <tr> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_3.jpg"></td> <td width="300" height="300" align="center"> <IMG border="0" src="http://○○○○/f000000_4.jpg"></td> </tr> </table> どうすれば、すべて300×300pixの範囲内におさめることができるのでしょうか？

    • ベストアンサー
    • HTML
  • 画像のフェードインについて・・・。

    現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • 画像のフェードインについて・・・。

    以前にも質問させていただいたのですが、解決に至らなかったので、再度質問させていただきました。 現在のホームページですが、サムネイル画像(4枚あります)をオンマウスすれば拡大部分の画像(4枚あります)が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン(徐々に画像がでるような感じ)で切替わるようにしたいと思っています。 下記は、現在のソースです。（あまり関係ないと思う部分は省いてます） こういうことに関してはまったくの素人です・・・。 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

  • CSSで縦長・横長の写真を一定に並べたい

    写真のギャラリーのようなものを作成しています。 写真のサムネイルが200×150pxのものと150×200pxのものがあり、並びはランダムです。 この写真を正方形の方眼紙に並べるように配置したいと思っています。 テーブルで作成すれば楽なのですが、文書構造的にCSSで行いたいと思っています。 リストでマークアップして、それぞれのli要素を200pxの正方形にしてから、その中央に画像を表示させたいのですが… 縦長の写真はtext-align:center;で処理ができるので、できましたが、横長写真の上下位置が中央になりません。 横長写真が入っているli要素だけに対してクラスを指定すればできそうなのですが、数が多いので、一括で処理できないか、と奮闘しております。 試しにli要素に対してline-heightを200pxで指定し、img要素に対してvertical-alignをmiddleで指定してみたのですが、Firefoxではうまくいくものの、IE（8）でNGでした。 現在のソースは以下の通りです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ギャラリー</title> <style type="text/css"> <!-- #content { width: 612px; } #content ul { margin: 0px; padding: 0px; } #content li { list-style: none; line-height: 200px; float: left; height: 200px; width: 200px; text-align: center; border: 2px solid #009933; } #content li img { vertical-align: middle; } --> </style> </head> <body> <div id="content"> <ul> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/yoko.gif" alt="横" width="200" height="150" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> <li><img src="images/tate.gif" alt="縦" width="150" height="200" /></li> </ul> </div> </body> </html> どなたかお分かりになる方、いらっしゃいましたら、お知恵を拝借できれば幸いです。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 正方形のセルに縦画像、横画像を中央に配置

    よろしくお願いいたします。 テーブルを使って、写真のサムネイル一覧表を作成しています。 100x100 の２つのセルをペアとして横に並べ、横画像(100w x 75h)または縦画像(75w x 100h)を入れています。 この時、横画像だけを入れたペアは、セルの高さが画像と同じ(75)になってしまいます。 常にセルの高さを 100に保つにはどのようにしたらよいのでしょうか。 現在は次のように記述しています。 <TR><!---- 高さ 100 ＯＫ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="H_100.jpg" width="75" height="100" border="0"></TD> </TR> <TR><!---- 高さ 75 ＮＧ！！ --> <TD width="100" hight="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> <TD width="100" align="center"><IMG src="W_100.jpg" width="100" height="75" border="0"></TD> </TR>

    • ベストアンサー
    • HTML
  • 画像のサムネール+フォトアルバムを制作中で困っています

    こんにちは。 HTML + CSS + Javascriptを使用して、「サムネール画像+フォトアルバム」を作っています。 Javascriptの知識が乏しいため、質問させていただきました。 よろしくお願いいたします。 サムネール画像の並ぶ A.html 拡大画像の並ぶ B.html CSS外部をリンクさせている C.css Javascriptを外部リンクさせている D.js の4つのファイルがあります。 A.htmlでクリックした際に数字を記憶させて B.htmlに入れ込むことがしたいです。 □A.htmlは下記で画像を並べています。 <img src="images/photo1.jpg" alt="Photo" width="120" height="120" > <img src="images/photo2.jpg" alt="Photo" width="120" height="120" > <img src="images/photo3.jpg" alt="Photo" width="120" height="120" > <img src="images/photo4.jpg" alt="Photo" width="120" height="120" > 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　　　　　　・ 　　　　　40枚くらいあります。 □B.htmlは下記で画像を表示しています。 <div id="mainPhoto"> <img src="images/photo1.jpg" id="slidePhoto" /> </div> <div id="mainPhotoNavi"> <script type="text/javascript">count = 0; imageLength = 9; baseuri = 'images'</script> <script src="js/slideshow.js" type="text/javascript"></script> </div> ※A.htmlのphoto3.jpgをクリックしたら、3という数字が記憶されて、 　B .htmlの"mainPhoto"内部のphoto(x).jpg、(x)に当てはまる。 　　　　　　"mainPhotoNavi"内部のcount = (x)、(x)に当てはまる。 上記のような方法をとりたいです。 どうか、よろしくお願いいたします。

  • 画像のフェードイン・フェードアウト

    現在のホームページですが、サムネイル画像をオンマウスすれば拡大部分の画像が切替わるようになっています。 画像がパッと切替わるのを、サムネイル画像をクリックすれば、フェードイン・フェードアウトで切替わるようにしたいと思っています。 下記は、現在のファイルです。（あまり関係ないと思う部分は省いてます） 回答の方、宜しくお願い致します。 <!-- InstanceBeginEditable name="head" --> <script type="text/javascript" src="../js/layer.js"></script> <script type='text/javascript'> <!-- //--すべてを隠す function hideALL(){ hideLAYER('img0') hideLAYER('img1') hideLAYER('img2') hideLAYER('img3') } //--> </script> <!-- InstanceEndEditable --> <link href="../css/original.css" rel="stylesheet" type="text/css" media="all"> </head> <!-- InstanceBeginEditable name="main-images" --> <div><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img0"><img src="../img_画像_001.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img1"><img src="../img_画像_002.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img2"><img src="../img_画像_003.jpg" alt="画像説明" width="600" height="400" /></div> <div class="images-layer" id="img3"><img src="../img_画像_004.jpg" alt="画像説明" width="600" height="400" /></div> <!-- InstanceEndEditable --> </div> <!--work-left --> <div class="work-bottom"> <!-- InstanceBeginEditable name="sumnail" --> <a href="#" onmouseover="hideALL();showLAYER('img0')"><img src="../img_works/icon/画像_001_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img1')"><img src="../img_works/icon/画像_002_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img2')"><img src="../img_works/icon/画像_003_s.jpg" alt="画像説明" width="45" height="45" /></a><a href="#" onmouseover="hideALL();showLAYER('img3')"><img src="../img_works/icon/画像_004_s.jpg" alt="画像説明" width="45" height="45" /></a> <!-- InstanceEndEditable --> </div> <!--work-bottom --> </div><!--work-shosai --> </div><!--main終了 --> </div><!--contents終了 -->

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する