HTML画像配置についての質問
- HTMLを勉強している際に、画像の配置についてわからないことがあります。特に、緑の画像が意図した位置よりも下に表示されてしまいます。どのように修正すればいいでしょうか？
- HTML画像配置に関する質問です。緑の画像が意図した位置よりも下に表示されてしまう問題があります。どのようにすれば正しい位置に配置できるでしょうか？
- HTMLの画像配置について質問があります。特に、緑の画像が下にずれてしまう問題に対処する方法を教えてください。
- ベストアンサー
HTMLについて
現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です
- DreamyLife_615
- お礼率12% (16/124)
- HTML
- 回答数3
- ありがとう数1
- みんなの回答 （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は使ったらダメです。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
すみません！！ 黒の部分はテーブルの部分です��� 分割にするのを忘れていました 重ね重ねすみません........
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>
補足
<a href>などはあとでつけようと思っております ここでつけるとごちゃごちゃなって見ずらいと思いまして。。。 添付画像について 白い部分は余白です 黒、赤、黄、緑の四角は画像とお考えください すなわち赤い四角の真下に緑の四角を表示したいということです 説明不足になってしまいすみませんでした＞＜
関連するQ&A
- スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSでのマウスオーバーの画像切り替えについて
現在横型のメニューをCSSで作成しています。 配置はうまく出来たのですが、ロールオーバーがうまくいきません。 マウスオーバーしても画像が切り替わりません。 CSSの記述をどのようにすればいいでしょうか？ 以下ソース ◇HTML <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <ul id="hnavi"> <li id="hnavili1"><a href="#"><img src="img/top-menu-1.gif" width="149" height="60"></a></li> <li id="hnavili2"><img src="img/top-menu-2.gif" width="150" height="60"></li> <li id="hnavili3"><img src="img/top-menu-3.gif" width="151" height="60"></li> <li id="hnavili4"><img src="img/top-menu-4.gif" width="149" height="60"></li> <li id="hnavili5"><img src="img/top-menu-5.gif" width="150" height="60"></li> <li id="hnavili6"><img src="img/top-menu-6.gif" width="151" height="60"></li> </ul> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } #hnavi { margin: 0; padding: 0; } #hnavili1 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili1 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili2 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili2 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili3 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili3 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili4 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili4 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili5 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili5 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } .hnavili6 { display: inline; list-style:none; float: left; margin: 0; padding: 0; } #hnavili6 a:hover {background-image : url(../img/top-menu-1o.gif); background-position : left top; } 宜しくお願いします。
- 締切済み
- HTML
- HTML、ＣＳＳ が、なかなかうまくいきません。
お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。
- 締切済み
- CSS
- HTML いじったらデザインが崩れました。
ホームページ作成について。初心者です。大変困っています。 初心者ながらも空いた時間を使い、コツコツ作成してきたのですが、ある日なにをどういじったのかデザインがガラッと崩れてしまい、修復不能なまま１週間戦い続けましたがもう駄目です。どなたかお分かりになる方、どうかどうかご教授願います。 テーブルとテーブルの間に <p style="font-family: MS 明朝;font-size: 20pt">ＰＩＣＵＰ<span> / 注目商品</span></p></div>を入れたいのと、サブメニューがかなり下にずれこんでしまったので、上に戻したいです。 ＨＴＭＬ↓（文字数が多いので一部省略しています） <std{border: 1px botted #000000;} .uenashi td{border-top:0px;} .hidarinasi td{border-reft:0px;} {width:230px;height:230px} </style> <STYLE> TABLE.dotBorder { border-collapse: collapse; border-style: dotted frame: void magin-left: 100px; } TABLE.dotBorder TD{ width: 200px; height: 50px; border: 1px dimgray dotted; } </STYLE> <body> <div align="center"> <div id="field_spc"> <div id="logo_mono"> <img src="img/monochrom5.png" alt="monochrom" style="margin: 0; paddin:0;"> </div> <!-- トップ枠 --> <div id="top_waku"> <img src="img/bords.jpg" width="950" height="500" alt="モノクローム"> </div> <!-- メインコンテンツ --> <div id="main_spc"> <Table class="dotBorder"> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1.新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2.新商品</td> </tr> <tr align="right" valign="bottom"> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 1新商品</td> <td><img src="img/monochrom3.png" width="200" height="200" border="0" alt="新商品 ７月３０日～発売予定"> 2新商品</td> <!-- サブコンテンツ --> <div id="sub_spc"> <img src="img/menu.png"> <div class="midashi"> <span class="big">ＭＥＮＵ</span> </div> <div class="column"> <a href="./index.html">1.トップページ</a><br> <span class="hutomoji">2.テーマ</span><br> <a href="./link.html">3.リンク</a> </div> どなたかお願いします・・・ ＣＳＳはこちらです↓ body { background-image: url(); margin-top: 0px; margin-bottom: 0px; margin-left: 0%; margin-right: 0%; padding: 0px; text-align: center; line-height: 150%; font-family: ＭＳ ゴシック,sans-serif; color: #333333; font-size: 14px; } #field_spc{ width: 1000px; margin: 0px 0px; background-image: url(img/.jpg); padding: 0px 10px; } #logo_mono { width: 70px; height: 70px; margin: 0; margin-bottom: 0; padding: 0; } #top_waku { width: 950px; line-height: 350px; margin-top: 0px; margin-bottom: 20px; border: 3px ridge #ffff00; background-color: #ffffff; padding: 0px 0px 0px 0px; text-align:; } #menu_block { margin-top: 10px; font-size: 25px; font-family: cursive; } #news_1 { margin-top: 40px; margin-left: 20px; text-align: left; } #main_spc { width: 40%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } #sub_spc { width: 22%; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 20px; padding: 0px 0px; text-align: left; float: right; } #tb2 { width: 70%; margin-top: 0px; margin-bottom: 20px; margin-left: 60px; margin-right: ; padding: 0px 10px; text-align: left; float: left; } .fe { clear: both; } .ao_waku { background-color:gray; margin-top: 10; padding-bottom: 5; h2 { font-size: 18px; color: #ffffff; display: inline; } p { margin-top: 0px; } strong { font-size: larger; background-color: green; color: white; padding: 3px 5px; } .hutomoji { font-weight: 700; } .black { color: #000000; } .red { color: #ff0000; } .blue { color: #0000ff; } .gray { color: #808080; } .green { color: #008000; } .big { font-size: 18px; font-weight: 700; } .midashi { width: 90%; background-color: #dd9900; padding: 5px; border: 2px solid #dd9900; text-align: center; color: #ffffff; } .column { width: 90%; margin-bottom: 20px; background-color: #ffffff; padding: 5px; border: 2px solid #dd9900; text-align: left; line-height: 120%; color: #333333; } a:link { text-decoration: underline; color: #0000ff; } a:visited { text-decoration: underline; color: #0000ff; } a:hover { text-decoration: underline; position: relati
- ベストアンサー
- HTML
- タグの修正に力をかしてください
ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>
- ベストアンサー
- HTML
- CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px; margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
- ４枚の画像を均等間隔で一列に並べる
４枚の画像を一列に並べようと思います。 ４枚に与えられたスペースは550pxです。画像の下のコンテンツも550pxを基準に配置するので、４枚のうちの両側の２枚は550pxの両端に配置しようと思います。 この趣旨でコーディングしたのが下記URLです。 http://makoji.web.fc2.com/test/test_18/test.html 他の画像を margin-right: 14px; とすると綺麗に並びました。ただ確認をとったのは最近のブラウザだけで、古いブラウザでどうなっているのか分かりません。過去の例でうまく並んだと思ったらIE6.0で４枚目が２列目に改行されてしまっていたことがあります。 そこでmarginをブラウザに自動割り振りさせることが出来ないものかと思案するのですが・・・ とりあえず右端の画像を右端に寄せるために margin-right: 0px; margin-left: auto; としてみましたがダメでした。でも width: 125px; もしくは float: right; を挿入すれば解決できます。 しかしながら真ん中の２枚をどうすれば均等に配置できるかが分かりません。 この場合、古いブラウザを試せる環境を全部揃えて片っ端からチェックを入れるしかないのでしょうか。 -------------------------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- * { font-size: 14px; font-wight: 100; color: #000000; } .wrap { margin: 0px auto; width: 700px; } .logo { border: solid 1px #FF0099; } .main { padding-top: 15px; padding-bottom: 15px; border: solid 1px #FF0099; } .main img { margin-right: 2px; float:left; display: block; } .menu { float: left; margin-top: 0px; margin-left: 10px; padding-left: 0px; } .menu li { margin-bottom: 2px; padding-top: 5px; padding-bottom: 5px; padding-left: 10px; width: 100px; list-style-type: none; background-color: #FFCCFF; } .list span { color: #FF0099; } .menu a:link { color: #FF0099; } .menu a:visited { color: #FF0099; } .menu a:active { color: #FF0099; } .menu a:hover { color: #FF0099; } .clear { clear: both; } /* インデックス */ .index_body { margin-top: 15px; padding-left: 133px; } .sample { margin-bottom: 10px; width: 550px; text-align:center; background-color: yellow; } .sample a { text-decoration: none; } .sample img { border: solid 1px #FF0099; float: none; } .sample .left { float: left; margin: auto auto auto 0px; text-align: center; } .sample .middle { float: left; margin: auto; text-align: center; } .sample .right { margin-right: 0px; margin-left: auto; text-align: center; } --> </style> </head> <body> <div class="wrap"> <div class="logo"> <img src="dot_999999.gif" width="698" height="120"> </div><!-- end of "logo"--> <div class="main"> <ul class="menu"> <li>ああ</li> </ul><!-- end of menu --> <div class="index_body"> <div class="sample"> <div class="left"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "left" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 1of"middle" --> <div class="middle"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of 2of"middle" --> <div class="right"> <img src="dot_999999.gif" width="123" height="170" alt="ああああ"> <div>aaaaa</div> </div><!-- end of "right" --> </div><!-- end of "sample" --> <div><img src="dot_999999.gif" width="550" height="450" alt="" /></div> <div class="clear"></div> </div><!-- end of "index_body" --> </div><!-- end of "main" --> </div><!-- end of "wrap" --> </body> </html>
- 締切済み
- HTML
- ツリー型の目次作成
ツリー型の目次を作成しているのですが、IEでは動作するのですが、ネスケではエラーになってしまいます。 うまく動作させる方法はないでしょうか？ 下記がソースです。 <html> <head> <title>目次</title> <style type="text/css"> div.h_ {margin-left:0px;margin-top:6px;} div.h {margin-left:28px;margin-top:6px;} div.sy_ {margin-left:28px;margin-top:6px;} div.sy {margin-left:56px;margin-top:6px;} div.st_ {margin-left:56px;margin-top:6px;} div.st {margin-left:84px;margin-top:6px;} div.k_ {margin-left:84px;margin-top:6px;} div.k {margin-left:112px;margin-top:6px;} } </style> <script language="JavaScript"> <!--// function displayMokuji(obj, img) { alert("displayMokuji"); if (!obj || !img) alert("bbb"); return; } if (obj.style.display == "none") { obj.style.display =""; img.src ="./open.gif"; } else { obj.style.display ="none"; img.src = "./close.gif"; } return; } //--> </script> </head> <body text="#000000" link="#0000ff" alink="#ff0000" vlink="#0000ff"> <div class="h_"> <a onclick="javascript:displayMokuji(hi0100000000, ii01000000);" href="#"> <img id="ii01000000" src="./close.gif" border="0"></a> <b>第１編 </b> </div> <div id="bbb" style="display:none"> <div class="sy"> <b>第１章</b> </div> <div class="sy"> <b>第２章</b> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- FireFoxでのレイアウト表示崩れについて
現在ホームページを作成しています。 CSSでのレイアウトに挑戦しており、ページ上部に横型のメニューを設置しました。 IEではうまく表示が出来たのですが、FireFoxで表示した際、横にメニューが並ばずに縦に並んでしまいます。google等で検索し調べたのですがうまくいきません。 よろしくお願いします。 以下ソース ◇HTML部分◇ <body> <div id = "wrap"> <div class = "header"> <div id = "h_wrap"> </div> <div id = "u_wrap"> <u class="hnavi"> <li><img src="img/top-menu-1.gif" alt="会社概要" width="149" height="60"</li> <li><img src="img/top-menu-2.gif" alt="業務内容" width="150" height="60"</li> <li><img src="img/top-menu-3.gif" alt="実績" width="151" height="60"</li> <li><img src="img/top-menu-4.gif" alt="店舗案内" width="149" height="60"</li> <li><img src="img/top-menu-5.gif" alt="採用情報" width="150" height="60"</li> <li><img src="img/top-menu-6.gif" alt="お問合せ" width="151" height="60"</li> </u> </div> </div><!-- /header --> <div class = "topwrap"> topimg </div><!-- /topwrap --> <div id = "inner"> <div = "mainwrap"> mainwrap </div><!-- /mainwrap --> <div = "sidewrap"> sidewrap </div><!-- /sidewrap --> <div class = "clear"><hr /></div> </div><!-- /inner --> <div id = "footer"> footer </div><!-- /footer --> </div><!-- /wrap --> </body> ◇CSS部分◇ body {text-align:center;} #wrap {width:900px; margin:0 auto; text-align:left; } .header {height:130px; } .topwrap {height: 300px;} #inner { margin:0 10px; } #mainwrap {width:690px; float:left; } #sidewrap {width:170px; float:right;} .clear {clear: both;} .clear hr {display: none;} .footer {height:118px;} /*----------------------------------------------------- headder ---------------------------------------------------- */ #h_wrap {height: 80px;} #u_wrap { height: 60px; margin: 0; padding: 0; } .hnavi { margin: 0; padding: 0; } .hnavi li { display: inline; list-style:none; float: left; margin: 0; padding: 0; } 以上です。 宜しくお願いします。
- ベストアンサー
- HTML
- CSSの左横に隙間ができてしまいます。
画像の左横に謎の隙間(8mmほど)ができて埋まりません。 そのため、4枚収めたい画像のうち、最後の1枚が改行されてしまっています。 padding や vartical-align、text-alignなど試してみましたが、ダメでした。 とても困っています、どなたかご教示くださいますようお願いいたします。 << CSS >> #header { width:940px; height:59px; margin: 0 0 20px 0; } #logo { width:300px; height:59px; float:left; margin: 0 20px 0 0; } #menu { width:620px; height: 59px; padding: 0; margin: 0; float:right; } #menu img { padding-top:8px; border:none; } #menu ul { margin:0; } #menu ul li { margin: 0px; padding: 0px; list-style-type: none; display:inline; float:left; } << HTML >> <div id="header"> <div id="logo"> <img src="img/logo.gif" width="298" height="59" alt="ロゴ"> </div><!-- /#logo --> <div id="menu"> <ul> <li><img src="img/btn_A.gif" width="194" height="51"></li> <li><img src="img/btn_B.gif" width="140" height="51"></li> <li><img src="img/btn_C.gif" width="149" height="51"></li> <li><img src="img/btn_D.gif" width="137" height="51"></li> </ul> </div><!-- /#menu --> </div><!-- /#header -->
- ベストアンサー
- CSS
お礼
ありがとうございます＾＾ 無事にできました！