- ベストアンサー
CSS初心者によるHP制作で困っています
- CSS初心者がHP制作に挑戦中ですが、いくつかの問題が発生しています。
- 具体的には、サイト全体を中央表示させる方法と、CSSでロールオーバー表示する方法がわかりません。
- Macromedia Dreamweaver MXを使用しているので、CSSの修正がHTMLに反映されない場合の対処方法も知りたいです。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
tdではなくａにつけるというのはhoverは a:hoverになってるからです。 tdにhoverはついてない。 aタグにhoverがついてる事になってます。（上のでは・・・） tdにhoverを使えたような気がしますが、 こういう場合は基本的にaにhoverを充てaにブロック要素を付与するのが一般的ですね！ ですので この場合ブロック要素はtdなのにaにはなにも施されていないので 画像は表示されない事になります。 多分ですが、シンプルに書きたいのであれば .nav｛ ｝ .nav a｛ background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static float:left; ←これ追加 } .nav a:hover{ background-image:url(img/top2.gif) } と書いて、 HTMLは <ul class="nav"> <li> <a href="">TOP</a> <li> <li> <a href="">お問い合わせ</a> <li> <li> <a href="">・・・</a> <li> <ul> って書くのがメンテナンス性があると思います。 画像は流用し、文字だけ表示させ、Bgで画像を同じものを使うという形ですね。 まぁ昔はよくつかわれてたCSSロールですが最近ではめっきり使わなくなりました＾＾； また@charset "Shift_JIS";ですがこれはコードの種類です。 Shift_JISで描かれている事になります。 importというのはCSSを引っ張ってきてますよって意味になります。 URLに注目してみてくださいな！ ../・・・・cssってないのでそれが書かれたCSSを同ディレクトリ内にあると思います。 またスタイルを見たい時はFireFoxのFirebugとかを使うとかなり楽に見れますよ！
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
物事を学ぶには順番があります。どうもHTMLの基本が出来ていないようです。 HT<L4.01が勧告されて以来、「HTMLは文書構造だけを記述し、プレゼンテーションはスタイルに任せる」とそれてきました。 →「スタイルシートはHTMLのマーク付けを簡素化し、またHTMLをプレゼンテーションの負担から大きく解放する。スタイルシートは、著者とユーザに対し、フォント情報、配置、色等の文書のプレゼンテーションを制御する手段を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.3.5 )」 あなたの書かれているHTMLは、複雑怪奇で読むのも大変です。 ★デザインのためにtableを使うべきではありません。 →『単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )』 →『ページレイアウトの目的で表を用いる。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )』 ★可能な限りjavascriptは使わない!!特にナビゲーションなど →『JavaScript、などの特殊な機能が使用されているためにサイトの一部がテキスト ブラウザで表示されない場合、検索エンジンのスパイダーがサイトをうまくクロールできない可能性があります。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )』 単純に <body> <div class="header"> <h1>熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</h1> <div class="nav"> <ul> <li><a href="/">TOP</a></li> <li><a href="/books">BOOKS</a> <ul> <li><a href="/books/1">著書1</a></li> <li><a href="/books/2">著書2</a></li> </ul> </li> <li><a href="/profile">Profila</a></li> </ul> </div> </div> <div class="section"> <h2>見出し</h2> ・・・【中略】・・・ </div> <div class="footer"> </div> </body> でよいです。これ以外一切記述する必要はありません。 HTML5で書くと <body> <header id="TOP"> <h1>熊本県でお風呂のリフォーム・修理をお考えの方はお気軽にご相談ください。</h1> <nav> <ul> <li><a href="/">TOP</a></li> <li><a href="/books">BOOKS</a> <ul> <li><a href="/books/1">著書1</a></li> <li><a href="/books/2">著書2</a></li> </ul> </li> <li><a href="/profile">Profila</a></li> </ul> </nav> </header> <section> <h2>見出し</h2> ・・・【中略】・・・ </section> <footer> </footer> </body> です。class名は『id属性及び class属性と併用することで、文書に構造を付加するため ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』です。 これだと、文書構造が一目でわかりますよね。HTML5の『新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』が、どのようなclass名をつけるかの具体的な参考になるでしょう。 HTMLがきちんと書かれていたら、スタイルシートも簡単になります。 div.header, div.section, div.footer{ margin:0 auto; width:70%;min-width:480px;max-width:800px; } div.nav ul,div.nav ul li{ display:block;list-style-type:none; margin:0;padding:0; text-align:center; } div.nav ul li{width:25%;float:left;position:relative;} div.nav ul li ul li{float:none;width:100%;} div.nav ul li ul{display:none;} div.nav ul li:hover ul{display:block;} div.nav ul li a{display:block;text-decoration:none;width:100%;height:100%;} とかで済むはずです。 id(一意セレクタ#)は、できるだけ使わない--スタイルシートを煩雑にする大きな原因です。きちんとセレクタを書きましょう。 ★ですが、まずHTMLを基礎から復習すること。 ★それが出来るようになったら、スタイルシートをきちんと学びましょう。 あやふやなサイトで勉強したってダメです。 一番確実なのは仕様書を読むこと。 ★最初はシンプルなスタイルシートを書いて、fontとかcolorとか細かい指定は後回しです。
お礼
ご丁寧に回答をいただきありがとうございました！ どうやらMacromedia Dreamweaver MXに頼りすぎていた部分があるようですね…。 10年近く前HP制作会社に勤めてHPを作っていたのですが、その時はまだまだtableが支流の時代だったせいか、今のHP事情を見て驚愕しています。 今の時代、直接書けないとダメですね。 また、「最初はシンプルなSCCから～」というのも、なるほどと思いました！確かに、HPをデザインするときも、ベースとなるデザインを考えてからアイコンや色を決めていきますもんね。 納得です。 本当にありがとうございました！
- oyukitya-n
- ベストアンサー率41% (17/41)
センター寄せが出来ないのは、 #bg { margin: 0 auto; margin-top: 0px;←これじゃないですか？ もしくは対応ブラウザによって text-align: center; を入れないと中央寄せができなかったり reset.cssの種類やドキュメント宣言によって違う動きをする場合があります （詳しくは解らないですが経験上・・・です） また、ロールですが、tdではなくaに振らないといけないと思います。 .menutop { background-image: url(img/top.gif); background-repeat: no-repeat; display: block; height: 37px; width: 78px; position: static; } またナビゲーションにtableを使うのはあまりよくないと思います。 ulなどのタグをおすすめします。 CSSでやるといろいろめんどくさいですから、 のようなJS入れてやった方が楽です。 「名称+off.jpg」「名称+on.jpg」の二つをimgのフォルダに入れるだけですので…。 function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } あと、見出しタグがないのもいかがなものかと・・・・ そういうページより大手のサイトのHP構成を見た方がよっぽど勉強になりますよ！
お礼
ありがとうございます！参考になりました！ 「margin-top: 0px;」を消したのですがダメでした…。色々試してみます。 ロールオーバーですが…あの…「tdではなくaに振らないといけない」とは、どういう意味でしょうか…？ 本当にアホですみません！ご回答いただいた後調べたのですが、的を得た言葉が見つかりませんでした…。 大手のHPのソースを開いて参考にしていたらoyukitya-n様がおっしゃってるようにulが確かに使われていました。まだ上手く使いこなせないので、色々ためしてみます！ 情けない事に今だに見出しタグの重要性が理解できてないので… 大手のHPソースを見て思うのですが、本当にシンプルですよね。 シンプルすぎて、CSSを拝見したいのにアドレス直打ちで開いても @charset "Shift_JIS"; @import "home.css"; @import "main.css"; @import "hasei.css"; @import "text.css"; だけ…。 どうやって拝見できるのか疑問でたまりません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
Firbugすごいです!!!感動しました！思わず「おおおおお!!」と発してしまいました！ 先程DLさせていただいたのですが、凄いです!! こんな事が出来るブラウザがあるとは!!本当にありがとうございます!! しっかり使わせていただきます！ <a>タグ、納得しました。 確かにCSSを確認した所、<a>タグが抜けていました。気付かないとは…。 ありがとうございます！ 未だに<ul><il>タグを使うとMacromedia Dreamweaver MXのプレビューで文字が出てしまいますが、そのあたりも勉強し直しと、教えていただいたFirbugを使いながら解決していきたいと思います！ 本当にありがとうございました！