ベストアンサー

cssファイルへリンクできないです。

2009/12/06 11:51

今回からCSSファイルでホームページを作り出している超初心者なので、専門用語の使い方など間違っているかも分かりませんが知恵を貸してください。 Dreamweaverを使用して、上部に固定ヘッダーのソースをhtmlファイル内に打ち込んで作業をしてます。ヘッダーの下部分の作業をし始めてDreamweaverのデザイン部分の画面で、ヘッダー画像の下に載せる画像や文字が入り込んで隠れてしまうので、作業がしにくいです。そのため固定ヘッダーデータをcssファイルにした方がいいのかなと思い、リンクさせようとしたのですが反映されないです。リンクした方がいいのか、その他より効率がいい方法があるのか分からないのでよろしく御願いいたします。 htmlファイルには <body> <link rel="stylesheet" type="text/css" href="banner.css"> と入力してます。 cssファイルには <div id="header"> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../house/img/b01-.gif" onmouseout="this.src='../house/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../house/img/b02-.gif'" onmouseout="this.src='../house/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../house/img/b03-.gif'" onmouseout="this.src='../house/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../house/img/b04-.gif'" onmouseout="this.src='../house/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../house/img/b05-.gif'" onmouseout="this.src='../house/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../house/img/b06-.gif'" onmouseout="this.src='../house/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../house/img/b07-.gif'" onmouseout="this.src='../house/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../house/img/b08-.gif'" onmouseout="this.src='../house/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../house/img/b09-.gif'" onmouseout="this.src='../house/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../house/img/b10-.gif'" onmouseout="this.src='../house/img/b10.gif'"> </div> と入力してます。よろしく御願いいたします。

poupou
お礼率29% (63/212)

HTML
回答数2
ありがとう数4

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2009/12/06 12:12 回答No.1

まったく間違ってます。 CSSを適用するためには、まずHTMLが正しくないとなりません。ヘッダー部分がサイト内リンクのリストだとするとHTMLのマークアップは <ol id="siteIndex"> 　<li><a href="./index.html">Home</a></li> 　<li><a href="./product/index.html">Product</a></li> 　<li><a href="./history.html">History</a></li> 　<li><a href="./contactUc.html">Contact</a></li> </ol> とかになるはずです。　ところがこれをトップページの最初にバナーラインとして表示したいなら CSSにて、 div#siteIndex{ display: block; position: absolute; height: 26px; width: 100%; padding: 0px; } div#siteIndex ol{ display: block; position: relative; width: 100%; margin: 0px; padding: 0px; } div#siteIndex li{ width: 13%; float:left; padding-top: 2px; margin: 0px 0px; display: block; position: relative; text-align: center; background-image: url(../images/background/Yellow.gif); } というふうに、リスト(ol>をブロックに、項目をfloatで並べるとか、好きにデザインします。　はっきり言って手で書くほうが早い。

質問者

お礼 2009/12/06 13:18

詳細なアドバイスありがとうございます！やはり間違っていたのですね。参考にさせていただいて作り直したいと思います。ありがとうございました！

その他の回答 (1)

kura07
ベストアンサー率50% (30/59)

2009/12/06 12:35 回答No.2

うーむ…cssの基本的な概念を誤解しているみたいですね…。参考URLにも示しましたが、cssは、ホームページの色や背景などを指定するもので、決して、内容の文字とか、画像を表現するものではないです。 cssの外部化は、ホームページのデザインをページ間で統一するときに便利なものです。たとえば、背景の色を一括で変えたい場合、そのcssファイルを変えるだけで、全てのページの背景色を変えることができます。 HTMLのタグそのものを外部ファイル化するには、SSIが便利だと思いますが、これは、ホームページのサーバーによって、(特に無料のやつだと)使えないところのほうが多いです。 (プログラミングにも関連してくるので、ちょっと難しいし) あと、JavaScriptで外部化という方法もありますが、これもプログラミングなので、少し難しいかもしれません。一応、JavaScriptでのサンプルを書いておきます。～～～html側～～～ <body> <script type="text/javascript" src="imgs.js"></script> </body> ～～～js側（ファイル名はimgs.jsにしてください）～～～ (function(){ var d2 = function(num){return (num<10)?"0"+num:num;}; document.write('<div id="header">'); for(var i=1;i<=10;i++){ document.write('<img src="img/b'+d2(i)+'.gif" border="0" onmouseover="this.src=\'../house/img/b'+d2(i)+'-.gif\'" onmouseout="this.src=\'../house/img/b'+d2(i)+'.gif\'">'); } document.write('</div>'); })(); でも、やはりORUKA1951さんの言うとおり、理解できないうちは直接書いた方が早いです。