- 締切済み
div内の classのリンクのつけ方
<body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div class="logo">店名</div> <h1>ようこそ</h1> </div> <!-- end #header --></div> ホームページの一番上の部分です。 http://www.goo.ne.jp/ 上記サイトのように左上にロゴが入っており、 お店ページのロゴをクリックしたら、上記ページと同じようにトップページに戻るようにしたいのですが、 class="logo"にリンクをつけても反応してくれません。 それ以外にググって色々調べましたが、どうしても方法が分りません。 初歩的な質問かもしれず、恐縮ですがご教授いただければ幸いです。
- ahoutori
- お礼率33% (1/3)
- ホームページ作成ソフト
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- nbafreak
- ベストアンサー率63% (12/19)
<div style="float:left;">ロゴ画像</div><div style="float:right;">ようそこ</div> <div style="clear:both;"></div> としてください。 <div style="clear:both;"></div> を忘れると何かとぶっ壊れますので注意です^^
- ORUKA1951
- ベストアンサー率45% (5062/11036)
bodyにclassは不要でしょう。HTML内にはbodyは一つ(かつ必須)しかないので。 A要素は、inline要素しかないようにもてません。次にブロック要素が現れるとその直前で閉じられていると解釈しなければならない事になっています。 すなわち、<a href="[URL]"><div></div>と書かれていた場合は、 <a href="[URL]"></a> <div></div> と解釈することが決められています。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから <!ELEMENT A - - (%inline;)* -(A) -- anchor --> ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Links in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#edef-A )］より これは、この要素には(inline要素)のみ含みうると読みます。 また、 7.5.3 ブロックレベル要素と行内要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.3 )はHTML作成で最初に学ぶべき最も重要な概念です。【この説明がないマニュアルはゴミ箱直行だね】 ★？と思ったら、仕様書に目を通す癖をつけましょう。そしたら覚えられる。 ★下記で検証済みHTML4.01strictです。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) <!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 http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- html,body{ margin:0px;padding:0px;background-color:rgb(200,200,200); } body>div{ width:70%;min-width:600px;max-width:900px;margin-left:auto; margin-right:auto;background-color:white;padding:10px; border:none;position:relative;} p{text-indent:1em;} img.Logo{position:absolute;top:18px;left:0px;border:none;} body>div>h1{text-align:center;margin:20px 0px;;} p.test{position:absolute;font-size:12px;height:18px;top:-12px; left:0px;border:1px solid gray;width:100%;text-align:center; background-color:rgb(200,200,200);padding-top:2px;} --> </style> </head> <body> <div> <a href="./index.html"><img src="http://www.goo.ne.jp/img2/logo/gh_logo2.gif" width="115" height="63" alt="ロゴ" class="Logo" ></a> <h1>サンプル</h1> <p>こんな感じです。幅60％、ウィンドウ幅を変えると、ウィンドウ幅によって最小500px、最大800px内で変化する。ログは左上に絶対配置となっている。</p> <p class="test">ブラウザの横幅を変更しても、内容が左右真中に表示されています</p> </div> </body> </html>
- jun04151
- ベストアンサー率60% (3/5)
検討違いなら申し訳ない。 <a href="リンク先"><img src="画像アドレス"></a> のやり方ではだめなのでしょうか？？ 無理にdivタグにclassを持たせるまでもないかと思いました。
お礼
御回答ありがとうございます。 こんなに早くアドバイスを頂き感謝いたします。 早速試してみます。
関連するQ&A
- ＣＳＳについて教えてください。ｉｄ，ｃｌａｓｓ
<body> <div class="style1" id="header"> <div id="logo"><img src="images/banner.gif" alt="見本1"/></div> <ul id="globalNav"> <li><a href="index.html">見本2</a></li> </ul> </div> <div id="contentWrapper"> <div id="content"> <div id="primary"> ※参考書に上記の様な書き出し記述があるのですが、1.まず素人考えでコンテナの様な土台となるボックスはないと考えていいですか？ 2.ｉｄがｄｉｖに包含されいくつも出てきますが，ｉｄは一つしか使用できないため慎重にって事は無いのですか？ 固有を確定するために便利なのですか？ 3.div classのあとｉｄが使われている様に思うのですが、ｃｌａｓｓにもｉｄは使えますか？？ 的外れですみません
- ベストアンサー
- レンタルサーバ・ASP
- CSS使用時のDIVにおける背景指定について
現在ホームページの作成でＣＳＳをメインに練習を行なっております。 テーブル配置を最小限にと思い、ＣＳＳにて制作を試みておりますが、 ヘッダー部分だけがどうしても上手くいかずつまずいてます。 色々なＣＳＳに関するページも検索しましたが、いまいちピンと来るものもなく、もしかしたら出来ないのかな？とも考え始めております。 でも、大手のサイトなどを拝見する限り見栄え的にも出来ている様なので自分にＣＳＳに対する理解が低いのかとも思いますが、どうかご教授 をお願いいたします。 先ず構想図から… －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-top" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="h-cate" ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ ｜ ｜ ｜ ｜ ｜ ｜DIV ｜ DIV ｜ ｜id="index"｜ id="main" ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ －－－－－－－－－－－－－－－－－－－－－－ ｜ DIV id="footer" ｜ －－－－－－－－－－－－－－－－－－－－－－ 上記のようなありがちなレイアウトのＨＰを考えています。 DIV id="h-top",id="H-cate"においては通常のヘッダーとしています。 質問は、上記のDIV内容の記述についてなのですが、 ●DIV id="h-top"は、 横100%に対し、横20PX、縦100PXの背景画像を並べ、中央に横740PX、 縦100PXのメイン画像画像を入れたいと思っております。 ●DIV id="h-cate"には、 横100%に同じく背景画像として横20PX、縦43PXの画像を並べ、中には 横740PXに合わせたナビボタン（w123*h40）を６つ配置したいと考えています。 共に画像とナビボタンは配置可能なのですが、背景画像が表示できなく 困っております。 現状でのHTML文では以下の通りとなっております。 <body> <DIV id="header"> <DIV id="h-top"> <img src="hoge" width"740" height"100" alt""> </DIV> <DIV id="h-cate"> <ul class="h-navi"> <li class="h-navi01"> <A href="index.html"> <span class="span1">トップページ </span></A> </li> <li class="h-navi02"> <A href="web/index.html"> <span class="span1">取扱商品一覧 </span></A> </li> ・ ・ ・ </ul> </DIV> </DIV> </body> ＣＳＳも書こうと思いましたが、色々とやりくりして今では表示も 配置もおかしくなってしまいましたので、控えさせて頂きました。 また説明文が下手で分かりづらいかと思いますが、どうぞ宜しくお願いします。
- ベストアンサー
- CSS
- ブログのタイトルにFlashを表示したい
</head> <body> <div id="base"> <div id="header"> <h1><a href="<$MTBlogURL$>" title="<$MTBlogName encode_html="1"$>" name="top" id="top"><$MTBlogName encode_html="1"$></a></h1> </div> <div id="wrapper"> <div id="header2"> <p><$MTBlogDescription$></p> </div> と、なっていて <div id="header2">のheader2がjpegファイルとなっています。 このjpeg画像の部分にFlashを埋めたいのですが、そのまま書くと左上に乗ってしまいます。 この場合どう書いたら、ブログのタイトルがFlashで表示されるでしょうか？ （この質問のしかたで伝わるでしょうか？）
- ベストアンサー
- ブログ
- セクションをdivで囲むと見出しのランクは下がるの
例えば <body> <header> <h1>サイトタイトル</h1> </header> <section> <h2>ページタイトル</h2> </section> </body> をdivで囲むと <body> <div> <header> <h2>サイトタイトル</h2> </header> <section> <h3>ページタイトル</h3> </section> </div> </body> に書き換えるべきですか？ それともdivで囲んでもdivが存在しないものとして振舞いますか？ ちなみにスタイルシートを無効にして実際に書き換えずにやってみるとh1の大きさが変わりませんでした やっぱり書き換えなくてもいいんでしょうか？ ご回答よろしくおねがいします ここから下は関係ないですけど html5とcssってホントにややこしいですね。見出しのランクなんてcssがあればもはや何の意味もないし(だからh1で統一できるようにしたんでしょうｋど)、cssでは特にpositonとfloatは頭がおかしいと思うし、この二つがクソなので結局シマンティックセクションとか関係なくdivで囲まざるを得ない。html5のセクションはユーザーじゃなくてロボットに対して役に立つもの なんでもっと柔軟に直感的なレイアウトができるようにしなかったんでしょうね？ じゃあhtml4使えよってのはなしで あとjavascriptで各セクションの高さを取得して足し合わせたものを左サイドバーの高さに代入してレイアウトを綺麗にするのとかもどれか1つのセクションにposition:absoluteがあるとおかしくなるしブラウザによってはいけたりするし本当に頭がおかしい
- 締切済み
- HTML
- Dreamweaverのh1についておしえてください
Dreamweaverのh1についておしえてください。 Dreamweaverの付属のテンプレートを見たら、ヘッダーにh1を使い、コンテンツにもh1が使用されているのですが、h1は1ページ1回と認識していたのですが、ヘッダーとコンテンツなら大丈夫なのでしょうか？ CSSは、下記のようになっています。 <body class="thrColHybHdr"> <div id="container"> <div id="header"> <h1>見出し</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>sidebar1 コンテンツ</h3> <p>省略。 </p> <p>省略 </p> <!-- end #sidebar1 --></div> <div id="sidebar2"> <h3>sidebar2 コンテンツ</h3> <p>省略 </p> <p>省略 </p> <!-- end #sidebar2 --></div> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>省略 </p> <p>省略 </p> <h2>H2 レベルの見出し </h2> よろしくご指導お願いします。
- 締切済み
- ホームページ作成ソフト
- ヘッダーのみ固定について
ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。 開かなくする為にはどうすればいいでしょうか？ CSS * html body { overflow: hidden; } body{ margin: 0px; padding: 0px; } .clear { overflow: hidden; display: block !important; display: inline-block; } #wrapper { width: 900px; margin: 0 auto; } #header { width: 900px; height: 100px; position: fixed !important; position: absolute; } * html div#header{ position: absolute; top: expression(eval(document.documentElement.scrollTop+0)); } #content { width: 900px; padding-bottom: 25px; background: #fff; padding-top: 135px; overflow: auto; } #global_navi { display: block !important; display: inline-block; overflow: hidden; position: fixed !important; padding-top: 100px; } HTML <div id="wrapper"> <div id="header"> <h1>○○○○</h1> <div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div> </div> <ul id="global_navi"> <li class="gn01"><a href="index.html">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> <li class="gn02"><a href="#">○○○○</a></li> </ul> <div id="content" class="clear"> <div class="index_left"> </div> <div class="index_right"> </div> </div> <div id="footer" class="clear"> </div> </div>
- ベストアンサー
- 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
- divについて。
<html lang="ja"> <head>省略</head> <body> <div id="header">headerの内容</div> <div id="main"> <div id="left">左側の内容</div> <div id="right">右側の内容</div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> <div id="footer">footerの内容</div> </body> </html> といった感じのトップページをCSS+htmlで作りました。見てわかる通り、<br>が無駄にたくさんあります。 でもこの無駄<br>がないと<div id="left">の内容を無視して、<div id="main">の縦の長さが0みたいに表示されてしまいます。 だから<div id="main">の縦の大きさを数値で指定すると上手くいくのですが、可変するようにしたいのでautoにして、結果無駄<br>をたくさん記述するはめになっています。 以前こちらで<div>の入れ子が上手くいかない時に clear: bothを入れると良いと聞いて入れ子構造は出来たのですが、今度は無駄<br>がないと入れ子にした際に（縦をautoにした場合）外側のdivが表示されないという状況です。 わかりづらい説明で申し訳ないのですが、何かが間違ってるせいだと思うのでわかる方宜しくお願いします。
- ベストアンサー
- CSS
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
- マージンの基点について
以下のような記述にてFirefox、Chromeですと"footer_contents"にマージンを指定しても うまく反映されません。 "footer"を基点としてマージンが適応されるものと考えておるのですが実際はその上の"maincontents_end"もしくは"header"の下部からマージンが適応されてしまっています。IE7ではこのようなことは起こりません。 どなたかご教授いただければ幸いです。 もし足りない情報がある場合、言っていただければ可能な限りお出しします。 ※sidebarとmaincontentsは特殊な枠を使いたいためこのような記述の仕方しています。ややセオリーに反した記述かとも思います。 <body> <div id="header"> <div id="topcontainer"></div> <div id="menu" ></div> <div id="container"> <div id="sidebar_top"> <div id="sidebar_contents"> </div> <div id="sidebar_end"></div> </div> <div id="maincontents_top"></div> <div id="maincontents"></div> <div id="maincontents_end"></div> <!-- end #container --></div> <!-- end #header --></div> <div id="footerbg"> <div id="footer"> <div id="footer_contents"> </div></div></div> <div id="endfooter"></div> </body>
- ベストアンサー
- HTML
補足
大変詳細なアドバイスを頂き深く感謝いたします。 ご教授に従い早速変更を進めておりますが、もう少しのところで詰まっております。 下記のように変更したのですが、今までと表示が逆になってしましました。 前 ロゴ ようこそ 改編後 ようこそ ロゴ <div>の場所を変更してたり<div align="left">を入れたりしたのですが、 いちばん左にロゴ その右横にようこそという文章にしたいのですが、 お手数ですがご教授いただければ幸いです。 知識不足を痛感しORUKA1951様のよりお教えいただきましたアドレスをもとに、勉強に励みたいと思います。 <body class="thrColFixHdr"> <div id="header"> <div id="headerIn"> <div><a href="http://www.yahoo.com/"><img src="../new/img/logo.gif" border="0" alt="ロゴ"></a> <h1>ようこそ</h1> </div> <!-- end #header --></div>