• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：HTMLについて）

HTML画像配置についての質問

このQ&Aのポイント
  • HTMLを勉強している際に、画像の配置についてわからないことがあります。特に、緑の画像が意図した位置よりも下に表示されてしまいます。どのように修正すればいいでしょうか？
  • HTML画像配置に関する質問です。緑の画像が意図した位置よりも下に表示されてしまう問題があります。どのようにすれば正しい位置に配置できるでしょうか？
  • HTMLの画像配置について質問があります。特に、緑の画像が下にずれてしまう問題に対処する方法を教えてください。
  • HTML
  • 回答数3
  • ありがとう数1

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

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

＞黒の部分はテーブルの部分です。 　想像通りだったようです。 　急ぎませんので、No.1,No.2を徹底的に読んで理解してから、画像サイズやalt(画像が表示されないユーザー、視覚弱者に読み上げる、検索エンジンに伝える)９つすべてについて補足してください。 　No.2のHTMLをとりあえず表示してみると、No.1,No.2で言っていることがわかるはずです。 　⇒ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HTML/nav/navigation1.html ) 　のサイトを(Chrome以外の)ブラウザで表示して、メニュー⇒スタイルシート⇒で色々なスタイルを選択してみてください。文書構造だけをHTMLに書きなさいといった意味が分かるかと・・ 　それさえしてあければ、くっつけようが離そうが他の背景画像を使おうが自由自在になるのですから・・・tableは使ったらダメです。 　

DreamyLife_615
質問者

お礼

ありがとうございます＾＾ 無事にできました！

その他の回答 (2)

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

No.1です。 ＞すなわち赤い四角の真下に緑の四角を表示したいということです説明不足になってしまいすみませんでした 　説明が不味くきちんと伝わってないようです。 　あなたの書かれたHTMLソースには都合９個のIMG要素がありますが、添付図には黒を含めて６個しかありません。 　必ずalt属性と、width,height属性値を書いてください。 　<a href=""></a>は重要な構成要素ですから実際のものと異なって構いませんので、セレクタに使用しますから書いたほうが良いです。 　簡単なサンプル上げておきますので、No.1の回答と合わせてよく読んでください。 なお、補足にて!! ★必ず９つすべての画像のalt属性と、width,height属性値を書いてください。どうせ必須ですから 　サンプルは適当に想像して配置してあります。 [サンプル] ※タブは＿に置換してあるので戻す。 ※文字コードはShift_JISです。 ★リキッドでスマホから幅広まで対応しています。 ★サンプルを見られてわかるように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"> <!-- html,body{margin:0;padding:0;} div.header,div.section,div.footer{ width:90%;min-width:640px;max-width:900px; margin:0 auto; } div.header{height:100px;position:relative;} div.header h1{margin:0;background-color:black;color:white;height:100px;text-align:center;line-height:100px;} div.header div.nav{width:200px;position:absolute;top:100px;left:0;} div.nav ul,div.nav ul li{list-style:none;padding:0;margin:0;} div.header div.nav ul li{width:200px;height:50px;margin-bottom:10px;position:relative;} div.header div.nav ul li a{display:block;width:100%;height:100%;background-size;cover;text-indent:-10em;overflow:hidden;background-color:gray;} div.header div.nav ul li a[href="/series"]{background-image:url(img/siri-zu.gif);} div.header div.nav ul li a[href="/soup"]{background-image:url(img/sekkenn.gif);} div.header div.nav ul li a[href="/oil"]{background-image:url(img/oiru.gif);} div.header div.nav ul li a[href="/gel"]{background-image:url(img/jeru.gif);} div.header div.nav ul li a[href="/set"]{background-image:url(img/set.gif);} div.header div.nav ul li a[href="/mini"]{background-image:url(img/mini.gif);} div.section{position:relative;min-height:400px;} div.section h2{margin:0 200px;background:red url(img/3.gif);height:200px;text-indent:-10em;overflow:hidden;} div.section div.nav{margin:0 200px;background:lime url();} div.section div.aside{width:200px;height:100%;position:absolute;top:0;right:0;background:yellow;url(img/rank.jpg);} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<div class="nav"><!-- サイトナビ --> ＿＿＿<ul> ＿＿＿＿<li><a href="/series">series</a></li> ＿＿＿＿<li><a href="/soup">Soap</a></li> ＿＿＿＿<li><a href="/oil">Oil</a></li> ＿＿＿＿<li><a href="/gel">Gel</a></li> ＿＿＿＿<li><a href="/set">Set</a></li> ＿＿＿＿<li><a href="/mini">Mini</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文記事</h2> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/series">series</a></li> ＿＿＿＿<li><a href="/soup">Soap</a></li> ＿＿＿＿<li><a href="/oil">Oil</a></li> ＿＿＿＿<li><a href="/gel">Gel</a></li> ＿＿＿＿<li><a href="/set">Set</a></li> ＿＿＿＿<li><a href="/mini">Mini</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>本文と直接関係ない補足</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

DreamyLife_615
質問者

補足

すみません！！ 黒の部分はテーブルの部分です��� 分割にするのを忘れていました 重ね重ねすみません........

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

　Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) でチェックされたらわかるように、画像にaltもないしサイズ指定もないため、どの画像がどれを指すのかがわからないです。緑、赤と言われてもどの部分を指すかがさっぱりわからないのでアドバイスしようがないです。 　数年後に御自身がメンテナンスするときにも「わけわかめ」になってしまうのじゃないかと。 　だふん、HTMLは <body> 　<div class="header"> 　　<h1>タイトル</h1> 　　<div class="nav"> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</div> 　</div> ・・・・になるべきじゃないかと。 ※スタイルシートを使用するのは、構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )ためで、HTMLにはプレゼンテーションに関わることじゃなく文書構造を書きます。「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ために使用します。<div id="wrapper"><div class="menu_block">とか<table class="menu_left">としてはなりません。 　ちなみにHTML5では、 <body> 　<header><!-- 文書の導入やナビゲーション --> 　　<h1>タイトル</h1> 　　<nav><!-- ナビゲーション --> 　　　<ul> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　　<li><a href=""></a></li> 　　　</ul> 　　</nav> 　</header> となりますね。 　これだと、誰(他人・検索エンジン・将来の自分)が見ても、わかりますよね。 　そのうえで、コンテンツの内容としての画像は<img>や<object>でマークアップし、必ず代替テキストを書く。背景としての画像はスタイルシートで指定します。 【必読】 ⇒14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 　悪い例としてあげられている ・メーカー独自拡張のHTMLを使う。 ★テキストを画像に置き換えて表現する。 ★余白制御のために画像を用いる。 ★ページレイアウトの目的で表を用いる。 ・HTMLでページを作らずにプログラムに頼る。 　になってませんか???。 　下記サンプルのように、HTMLには文書構造だけを記述して、それをこのようにプレゼンテーションしたいと図示されるとわかりやすいです。デザインは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=UTF-8"> ＿<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"><!-- サイトナビ --> ＿＿＿<ul> ＿＿＿＿<li><a href="/series">series</a></li> ＿＿＿＿<li><a href="/soup"></a>Soao</li> ＿＿＿＿<li><a href="/oil">Oil</a></li> ＿＿＿＿<li><a href="/gel"></a>Gel</li> ＿＿＿＿<li><a href="/set">Set</a></li> ＿＿＿＿<li><a href="/mini">Mini</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="section"> ＿＿<h2>本文記事</h2> ＿＿<p>ここに本文となる記事を記述する。</p> ＿＿<div class="nav"> ＿＿＿<ul> ＿＿＿＿<li><a href="/series">series</a></li> ＿＿＿＿<li><a href="/soup"></a>Soao</li> ＿＿＿＿<li><a href="/oil">Oil</a></li> ＿＿＿＿<li><a href="/gel"></a>Gel</li> ＿＿＿＿<li><a href="/set">Set</a></li> ＿＿＿＿<li><a href="/mini">Mini</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>本文と直接関係ない補足</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

画像を拡大する
DreamyLife_615
質問者

補足

<a href>などはあとでつけようと思っております ここでつけるとごちゃごちゃなって見ずらいと思いまして。。。 添付画像について 白い部分は余白です 黒、赤、黄、緑の四角は画像とお考えください すなわち赤い四角の真下に緑の四角を表示したいということです 説明不足になってしまいすみませんでした＞＜

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

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する