• ベストアンサー

div　にリンク

a:hover { 　　　　　　　　background-color: #e0ffff; } div#input { 　　　　　　　　font-size:15px; 　　　　　　　　width:140; 　　　　　　　　border:solid 2px #000000; 　　　　　　　　padding:2px; 　　　　　　　　margin:3px; 　　　　　　　　list-style : none; } <div id="input"><a href="http://～" target="_blank">ＭＡＩＬ</a></div> 中の文字だけにリンクをしているところを、 <a href="http://～" target="_blank"><div id="input">ＭＡＩＬ</div></a> ・・と div 全体にリンクをすると、マウスポインタが変になります。 カーソルを合わせた時に指マークになりませんし、色も変化しません。 １クリックでリンク先には行けます。 どうしてでしょうか？また、通常どうりにはならないのでしょうか？

  • HTML
  • 回答数3
  • ありがとう数1

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

  • ベストアンサー
  • naokita
  • ベストアンサー率57% (1008/1745)
回答No.1

正式には文法ミスになります。 ブラウザが無理やり合わせてくれていますｗｗ <a href～>　</a> で囲めるのは、インライン要素なので文字かテキスト。 <body>　<table>　<div>　<form>　<p>　<h>等の ブロックタグをリンクしてはいけません… 質問の最初に書いてある <div id="input"><a href="http://～" target="_blank">ＭＡＩＬ</a></div> これが正しいのでリンク<a>タグは内側に入れましょう。 （他のインライン要素を<a>で囲んでもＯＫです） id　と　target="_blank"　の利用にも注意して下さい。

ame-sanc
質問者

お礼

そうなのですか・・。知りませんでした。m(__)m ＞id　と　target="_blank"　の利用にも注意 これについてもいろいろと調べてみます。ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (2)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.3

こういう場合はaタグをブロック要素として表示する のが常道です。 <style type="text/css"> a:hover { background-color: #e0ffff; } a#input { display:block; font-size:15px; width:140; border:solid 2px #000000; padding:2px; margin:3px; list-style : none; } </style> <div ><a href="http://～" target="_blank" id="input">ＭＡＩＬ</a></div>

全文を見る
すると、全ての回答が全文表示されます。
回答No.2

aタグの中にdivタグを入れる目的は何でしょうか。 スタイルシートを適用したいということでしたら、 以下のようにaタグにidを付けてはいかがでしょう。 <a href="..." target="_blank" id="input">MAIL</a> 規約的には一つのHTMLで同じidを複数のタグに適用できないので、 スタイルシートを適用する対象が複数になる可能性があれば、 以下のようにclassを使ったほうがいいかもしれません。 a.input { ... } <a href="..." target="_blank" class="input">MAIL</a>

全文を見る
すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSでa要素全体をリンク出来るようにしたいのですが

    CSSでa要素全体をリンク出来るようにしたいのですが、 Firefoxなら出来るもののIE8、Sleipnirでは文字の上しかリンクされません。（文字の上にマウスを当てると全体の色は変わったりするのですが。） 5時間くらい迷ってるので少しでも分かる方、いらっしゃいましたら 何でもお願いします。。 色々検索してソースに付け加えたりしてるので適切ではないものが多々あるかと思いますが、とにかくCSSソースをそのまま載せます。 div#link ul { list-style: none outside; overflow : hidden; padding: 0; margin: 0; letter-spacing:7px; font-weight: bold; } div#link li a { display: block; width: 100%; overflow : hidden; padding: 5px; padding-left: 20px; padding-right: 0px; font-size: 14px; color: #0000ff; } div#link li a:hover { display: block; overflow : hidden; background-color: #ffff33; color: #000; } HTMLは <div id="link"> <ul> <li><a href=".html">あいうえお</a></li></ul></div>です。 なにとぞ宜しくお願い致します。

    • ベストアンサー
    • HTML
  • divの間にすき間ができる

    入れ子にされたdivとdivの間で隙間ができて困っております。 構造は<div id="header2">内に企業ロゴイメージ部を<h1>タグで設置し、 入れ子で<div class="headnavi">を入れ、隙間なく<div id="navi"> を表示させるつもりですが、<div id="header2">と<div id="navi">の間に ブラウザで見たときに隙間ができてしまいます。 どうすれば隙間無く表示させることができるでしょうか？ <div style="clear:both"></div>を入れてみては？と言われましたので 入れてみましたが効果はなく困っております。 【html部】 <div id="header2"> <h1><a href="index.html"><img src="images/logo.jpg" alt="" width="270" height="80" border="0" /></a></h1> <div class="headnavi"> <ul> <li id="access"><a href="access/index.html">地図・連絡先</a></li> <li id="inquiry"><a href="inquiry/index.html">お問い合わせ</a></li><li id="sitemap"><a href="#">サイトマップ</a></li> </ul> </div> <div style="clear:both"></div> </div> <div id="navi"> <ul> <li id="aboutus"><a href="about_us/index.html">会社案内</a></li> <li id="works"><a href="works/index.html">業務紹介</a></li> <li id="enviro"><a href="enviroment/index.html">環境方針</a></li> <li id="carrier"><a href="carriers/index.html">採用情報</a></li> </ul> </div> 【スタイルシート】 #header2 { height: 80px; margin-bottom: 0px; padding-bottom: 0px; } #header2 h1 { padding-top: 0px; margin: 0px; float: left; padding-bottom: 0px; padding-left: 14px; } #header2 .headnavi { height: 24px; margin-right: 14px; } #header2 .headnavi ul { padding-top: 0px; padding-bottom: 0px; margin-top: 0px; margin-bottom: 0px; float: right; height: 24px; } #header2 .headnavi li { text-indent: -9999px; display: inline; list-style-type: none; } #header2 .headnavi li a { text-decoration: none; display: block; height: 24px; overflow:hidden; float: left; } /*------off----- */ #header2 .headnavi li#access a { width:124px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; } #header2 .headnavi li#inquiry a { width:125px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px 0px; } #header2 .headnavi li#sitemap a { width:121px; height: 24px; background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px 0px; } /*------hover------- */ #header2 .headnavi li#access a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: 0px -24px; } #header2 .headnavi li#inquiry a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -124px -24px; } #header2 .headnavi li#sitemap a:hover { background-image: url(../images/head_navi.jpg); background-repeat: no-repeat; background-position: -249px -24px; } <div style="clear:both"></div>

  • <div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari

    はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual">　←　※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!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" id="sixapart-standard"> ※ヘッダー部分は省略しています。 <!-- サイトボディー部分ここから --> <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div> <!-- パン屑リスト --> <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------

    • ベストアンサー
    • HTML
  • テキストの揃え方について

    CSSの勉強を始めて間もないのですが、下記のようにホームページを作成し、左右に均等の間隔を指定して、テキストも中央揃えになっています。<div id="01">を5段、<div id="02">で1段、この後<div id="03">と<div id="04">で合わせて2段にしたいと考えています。そのうえで、<div id="03">以降は左右に均等の間隔になっている幅の中(<div id="01">や<div id="02">が配置されている400pxの位置)で、テキストを左揃えにして配置したいと考えています。text-align: left;をCSSのいろいろなところに書いているのですが、ウィンドウの左端に配置されてしまいます。どのようにCSSに書いたら実現できるのでしょうか。CSSレベル2までの書き方でお教えください。 【HTMLの<body>内】 <div id="01_05"> <div id="01"> <ul> <li><a href="link01.html">リンク01</a></li> <li><a href="link02.html">リンク02</a></li> <li><a href="link03.html">リンク03</a></li> <li><a href="link04.html">リンク04</a></li> <li><a href="link05.html">リンク05</a></li> </ul> </div> <div id="02"> <img src="gazou01.jpg" alt="画像01" width="400" height="300" border="0"> </div> <div id="03"> </div> <div id="04"> </div> </div> 【CSS】 body { margin: 0; padding: 0; width: 100%; text-align: center; overflow: hidden; } #01_05 { margin: 0 auto; padding: 0; width: 400px; } #01 { position: relative; margin: 0; width: 100%; } ul { position: relative; left: 50%; float: left; margin: 0; padding: 0; } li { position: relative; left: -50%; float: left; display: inline; margin: 0; padding: 0; } li a { float: left; width: 80px; display: block; margin: 15px 0; padding: 15px 0; } #02 { clear: left; width: 100%; } #03 { float: left; margin: 0; width: 200px; } #04 { float: left; margin: 0; width: 200px; }

    • ベストアンサー
    • CSS
  • PHPのプログラム

    初心者でPHPのプログラムを組んでもレイアウトが崩れてしまいます。 どのようにすれば直るのでしょうか？詳しい方、どうかよろしくお願いします。 <!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>sugoweb</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="topimg"> </div> <div id="left_navi"> <div id="menu"> <ul> <li><a href="index.html">XXXXX</a></li> <li><a href="grudge.html">当社のこだわり</a></li> <li><a href="question.html">Q&A</a></li> <li><a href="plan.html">PLAN</a></li> <li><a href="flow.html">FLOW</a></li> <li><a href="inquiry.php">問い合わせ</a></li> <li><a href="blog.html">ブログ</a></li> </ul> </div> </div> <div id="contents"> <form method="POST" action="inquiry_check.php"> <p class="form">氏名</p> <input type="text" name="name" size="40"><br> <p class="form">電話番号</p> <input type="text" name="tel" size="40"><br> <p class="form">Eメール</p> <input type="text" name="email" size="40"><br> <input type="radio" name="sex" value="男" checked>男 <input type="radio" name="sex" value="女">女 <textarea name="bikou" cols="50" rows="10"></textarea> <input type="submit" value="確認"> <input type="reset" value="リセット"> <form method="POST" action="inquiry_check.php"> </div> <div id="footer"> </div> </body> </html> CSS部分 *{margin:0; padding:0; } body { text-align:center; } #container{ width:900px; height:auto; margin:0 auto; text-align:left; } #header{ width:900px; height:90px; border:solid 1px gray; background-image:url("images/header/header_bg.jpg"); position:relative; } .inquiry_btn{ position:absolute; top:8px; left:660px; border:none; } .logo{ border:none; } #topimg{ width:900px; height:250px; } #left_navi{ width:180px; height:1000px; float:left; } #contents{ width:680px; float:right; padding-top:20px; padding-right:20px; } .right{ float:right; margin-left:15px; margin-bottom:20px; } .left{ float:left; margin-right:15px; margin-bottom:20px; } h2{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:18px; padding-bottom:3px; margin-bottom:30px; } h3{ width:100%; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-left:10px; font-size:15px; padding-bottom:3px; margin-bottom:10px; margin-top:10px; } #footer{ width:900px; height:50px; border:solid 1px gray; clear:both; text-align: center; padding-top: 10px; } #footer ul{ list-style-image:url(images/listmark.gif); } #footer li{ display:inline; } #footer a{ display:inline; font-size:12px; padding:10px; text-decoration:none; color:#333; width:auto; } #footer a:hover{ color:red; } #contents p{ line-height:150%; letter-spacing:1px; font-size:13px; margin-bottom:70px; } dl.qa{ margin-bottom:20px; } dt.question{ font-size: 15px; margin-bottom:20px; font-weight:bold; border-left:solid 3px navy; border-bottom:solid 1px navy; padding-bottom:2px; padding-left:5px; } dd.answer{ margin-bottom:25px; } #menu ul{ margin; 0; padding: 0; list-style: none; } #menu li{ display: inline; padding: 0; margin: 0; } #menu a{ display: block; border-top: 1px solid #9F99A3; border-left: 5px solid blue; border-right: 1px solid #9F99A3; background-color: #EEEEEE; font-size: small; padding: 3px 10px; text-decoration: none; color: #333; width: 150px; margin: 0px; text-align: left; } #menu a:hover{ text-decoration: underline; border-top: 1px solid #8593A9; border-left: 5px solid gray; border-right: 1px solid #8593A9; background-color: pink; } #left_navi{ margin-top: 20px; } P.form{ margin-bottom:10px; }

    • ベストアンサー
    • PHP
  • 訪問済リンクを未訪問の状態に再び戻す方法

    質問お願いします。 フレームで上部に組んだメニューボタンの訪問済リンクが、 ページを移動するごとに訪問済みが増えて、 どのページを現在、訪問しているのかわからなくなります。 訪問済リンクを未訪問の状態に再び戻す方法を教えてください。 CSS部分 body { background-color: #FFFFFF; margin:0; padding:0; } #menu{ position:absolute; top:0px; width:800px; height:219px; left:-1px; margin:0; padding:0; background-image:url(../topimage/title.gif); background-repeat:no-repeat; } #menu #bottom{ position:absolute; float:left; top:149px; width:800px; height:70px; left:0px; } #bottom ul{ list-style:none; padding:0; margin:0; } #bottom ul li{ padding:0; margin:0; float:left; } #bottom a.c,#bottom a.c:link { display:block; width: 115px; height:70px; background-image:url(../top/img/menu/b1.gif); background-repeat:no-repeat; background-position:0% 0%; } #bottom a.c:visited { background-position:100% 0%; } #bottom a.c:hover { background-position:33% 0%; } #bottom a.c:active { background-position:66% 0%; } 以下ボタン７つのソースがほぼ同じ為、省略します。 HTML部分 <div id="menu"> <div id="bottom"> <ul> 　<li><a href="../new/top.html" target="main" class="c"></a></li>　 <li><a href="../product/top.html" target="main" class="d"></a></li> <li><a href="../example/top.html" target="main" class="e"></a></li> <li><a href="../company/top.html" target="main" class="f"></a></li> <li><a href="../rinen/top.html" target="main" class="j"></a></li> <li><a href="../faq/top.html" target="main" class="g"></a></li> <li><a href="../info/top.html" target="main" class="h"></a></li> <li><a href="../recruit/top.html" target="main" class="i"></a></li> </ul> </div> </div>

  • DIV内の padding について

    下記のようなCSSとHTMLファイルにてデザインをしています。 main 内にてpaddingを上下左右に10px　有効にしたいのですが、下記のような記述をCSSにした場合、padding が top (bottom?)にしか適用されません。左右に適用させるにはどうすればよいのでしょうか？ よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <head> <link rel="stylesheet" media="all" type="text/css" href="index.css" /> </head> <body> <div id=wrapper> <div id=header></div> <div id=face></div> <div id=navi></div> <div id=main></div> <div id=footer></div> </div> </body> </html> body { background: url(img/bg.gif); margin: 0 auto; text-align: center; } #wrapper { width: 800; margin: 0 auto; background: #EEE; } #header { clear: both; height: 50px; text-align: left; background: #009 url(img/header.gif) no-repeat; border-bottom: 1px solid #FFF; } #face { clear: both; height: 200px; text-align: left; background: url(img/face.jpg) no-repeat; border-bottom: 1px solid #FFF; } #navi { float: left; width: 130px; height: 550px; background: #009; text-align: center; border-right: 1px solid #FFF; } #main { font-family: Maiandra GD, Verdana, Arial; font-size: 14px; line-height: 20px; text-align: left; padding: 10px; } #footer { clear: both; height: 50px; background: #009 url(img/footer.gif) no-repeat; border-top: 1px solid #FFF; }

    • ベストアンサー
    • HTML
  • HTMLでトップページの画像およびリンクのランダム表示について

    どなたかお力を貸して下さい。 現在ＨＰを作成中なのですがそのＨＰのトップページに表示される画像と、 それとセットで商品名、購入ページへのリンクを更新する度にランダム表示になるようにできればと思っています。 添付画像の販売ページへ飛ぶという所でリンクをつけたいと思っています。 HTMLは <h2>New!!新着製品</h2> <div class="itemlist"> <div class="img"><a href="#"><img src="images/sampleimg1.jpg" alt="item name" width="250" height="188" /></a></div> <h3>機種名</h3> <p>販売ページへ飛ぶ</p> </div> スタイルシートは #main .itemlist { border: 1px solid #CCCCCC; /*１個あたりのボックスのボーダー設定*/ padding: 5px; overflow: hidden; margin-bottom: 0.5em; width: 673px; /*段落タグ（p）の横幅とサイズを合わせる設定です。この下二つのmarginも。*/ margin-right: auto; margin-left: auto; } #main .itemlist h3 { color: #000000; border-bottom: 1px solid #cccccc; border-left: 4px solid #CCCCCC; padding: 0px 0px 0px 5px; margin-bottom: 0.5em; font-size: 100%; } #main .itemlist p { padding: 0px; } #main .itemlist p, #main .itemlist h3 { margin-left: 265px; /*画像の幅に合わせてここは変更する*/ } #main .itemlist a img { padding: 5px; /*写真と外線との余白*/ border: 1px solid #CCCCCC; } #main .itemlist a:hover img { border: 1px solid #999999; } #main .itemlist div.img { float: left; } なのですが相当難しいでしょうか？

    • ベストアンサー
    • HTML
  • 大divの中に小divを配置して回り込ませる方法。

    大divの中に小div3つを配置したいのですが、回り込み及び、小divの枠線の表示ができません。配置は大div　clearの中の左側にdiv menu、右側にdiv contents、下部にdiv footerを配置したいと思っていますが、回り込みができず、表示したい箇所は下記のように表示されてしまいます。 • xxxx • xxxxx • xxxxx xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxx 更にliタグの・を消したいのですが、cssにlist-style-type:noneと記述しても消すことができませんでした。 記述のどこに問題がありますか？ ご教授お願い致します。 (css) div#image {margin-left : auto ; margin-right : auto ;width:800px;border:solid 1px #660000;} div#container {margin-left : auto ; margin-right : auto ;width:800px;height:30px;background-color:#000000;border:solid 1px #660000;} h1 {margin:0px;color:#330000;font-family:Geogia,Times New Roman,sans-selif;} h2 {font-size:18px;padding-left:20px;padding- top:5px;margin:0px;color:#ffffff;font-family:Geogia,Times New Roman,sans-selif;} div#clear{border:solid 1px #660000;margin-left : auto ; margin-right : auto ;width:800px;height:1500px;background-color:#ffffff;] ul {border:1px solid #660000;} li {list-style-type:none;} h3 {font-color:#ffffff;} p {font-color:#ffffff;} div#menu {border:solid 1px #660000;width:100px;height:200px;float:left;} div#contents {border:solid 1px #660000;width:500px;height:700px;float:right;} div#footer {border:solid 1px #660000;width:700px;height:100px;clear:both;} (html) <!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=Shift_JIS"/> <title>xxxxxxx</title> <link href="./style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="image"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" /></h1> </div> <div id="container"> <h2>xxxxxxxxxxx </h2> </div> <br> <div id="clear"> <div id="menu"> <ul> <li> xxxxxx </li> <li> xxxxxx </li> <li> xxxxxx </li> </ul> </div> <div id="contents"> <h3>xxxxxxxxxx</h3> <p>xxxxxxxxxxx</p> <p>xxxxxxxxxxx</p> <br> <p>xxxxxxxxxxxxxxxxxx</p> </div> <div id="footer"> <p>xxxxxxxx</p> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • スタイルシート　DIVとDIVの間に隙間ができてしまいます。

    DIVとDIVの間に１０ピクセルほどの隙間ができるのはなぜでしょうか？ ｈｔｌｍは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 8.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>タイトル</TITLE> <link rel="stylesheet" href="style_1.css"　type="text/css"> </HEAD> <BODY> <DIV id=site> <DIV id=header> <DIV id=top-logo><IMG src="logo2.gif" border="0" alt="ロゴ"> </DIV> 　<hr color="#ffccff" width="750" height="2"> 　</DIV> </DIV> </BODY> </HTML> 上部の方はよくわからなくてホームページビルダーのをコピーして、残りはメモ帳で手打ちしました。 スタイルシートは、全て手打ちです。 *{ margin:0px; padding:0px; } #site { width: 760px; border: 2px solid pink; font-size: 90%; line-height: 150%; margin:0px; padding:0px; 　border: 1px solid red; } #header { width: 760px; border: 1px solid blue; } #top-logo { FLOAT: left; border: 1px solid green; } #siteと#headerの赤と青のボーダーはぴったりくっついているのに、#top-logoの上に隙間があります。 ｈｒの線の下にも１０ｐｘ分くらいの隙間があります。 なぜこのような隙間ができてしまうのでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する