CSS:グローバルナビのテキストが表示されません

2013/12/13 01:16

このQ&Aのポイント

グローバルナビの各項目の背景色を異なる色にし、マウスオーバー時にも変えたいが、テキストが表示されない。
index.html、style_main.css、style_topNavi.cssの3つのファイルから構成される。
グローバルナビのテキストが表示されない問題を解決する方法を指導してほしい。

CSS:グローバルナビのテキストが表示されません

グローバルナビの各項目の背景色をそれぞれ異なる色にし、またマウスオーバーの時にも変えたいと思います。背景色を変える事は出来たのですが、テキスト部分が表示されません。下記の３つファイルから構成されています。【index.html】 <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=Shift_JIS'> <title>テスト</title> <link href='./style_main.css' rel='stylesheet' type='text/css'> <link href='./style_topNavi.css' rel='stylesheet' type='text/css'> </head> <body> <div id='wrapper'> <ul id='globalnavi'> <li class='gnavi01'><a href='index.html'>Home</a></li> <li class='gnavi02'><a href='navi1.html'>Navi1</a></li> <li class='gnavi03'><a href='navi2.html'>Navi2</a></li> <li class='gnavi04'><a href='navi3.html'>Navi3</a></li> </ul> </div> </body> </html> 【style_main.css】 * {padding:0; margin:0;} body{ font-family: 'MS UI Gothic'; text-align: center; } img{border-style:none;} a:link{color:#000000; text-decoration:underline;} a:visited{color:#990099; text-decoration:underline;} a:hover{color:#ff0000; text-decoration:underline;} #wrapper{ text-align: left; margin: 1em auto 0; width: 800px; border: 1px solid #cccccc; } 【style_topNavi.css】 #globalnavi{ width: 850px; height: 40px; } #globalnavi li{float:left;} #globalnavi li a{ width: 150px; height: 30px; display: block; text-indent: -9999px; overflow: hidden; border-left: 10px solid #ffffff; color:#000000; } /* globalNavi: 背景色を変える */ .gnavi01 a{background-color:#cc6672;} .gnavi02 a{background-color:#bf66cc;} .gnavi03 a{background-color:#6672cc;} .gnavi04 a{background-color:#66ccbf;} .gnavi01 a:hover{background-color:#ffd8dd;} .gnavi02 a:hover{background-color:#fad8ff;} .gnavi03 a:hover{background-color:#d8ddff;} .gnavi04 a:hover{background-color:#d8fffa;} 何が問題なのかご指導頂けますでしょうか。どうぞ宜しくお願い致します。

svgrnaqa
お礼率75% (6/8)

CSS
回答数2
ありがとう数2

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

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

ベストアンサー

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

2013/12/13 10:05 回答No.2

HTMLから復習ですね。そんなHTML書いてたらメンテナンスが大変になるしデザインの制約が大きくなるばっかりです。スタイルシートを使用してデザインする最大の目的は「構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」なのですよ。それなのにHTMLに構造以外のもの、デザイン的なものを書くことはしない。原則です。 ★原因はもちろん text-indent: -9999px; overflow: hidden; 　です。わざと消している。単純にHTML4.01でしたら <body> 　<div class="header"> 　　<h1>見出し</h1> 　　<div class="nav"> 　　　<ol> 　　　　<li><a href='index.html'>Home</a></li> 　　　　<li><a href='navi1.html'>Navi1</a></li> 　　　　<li><a href='navi2.html'>Navi2</a></li> 　　　　<li><a href='navi3.html'>Navi3</a></li> 　　　</ol> 　　</div> 　</div> 　<div class="section></section> 　<div class="footer"></div> </body> DIVやSAPNは「id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」のもので、wrapperとかはへん。HTML5では、代わりに「文書をよりよく構造化するために、( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」新しい要素が追加され、DIVは原則として使わなくなります。ちなみに、HTML5では、 <body> 　<header> 　　<h1>見出し</h1> 　　<nav> 　　　<ol> 　　　　<li><a href='index.html'>Home</a></li> 　　　　<li><a href='navi1.html'>Navi1</a></li> 　　　　<li><a href='navi2.html'>Navi2</a></li> 　　　　<li><a href='navi3.html'>Navi3</a></li> 　　　</ol> 　　</nav> 　</header> 　<section></section> 　<footer></footer> </body> そのうえで、スタイルシートはHTML4.01用でしたら <link href='./style_main.css' rel='stylesheet' type='text/css' media="screen"> <link href='./style_topNavi.css' rel='stylesheet' type='text/css' media="screen"> 　　印刷時には適用させたくないので・・ ★リキッドなのでスマホも幅広ウィンドウも対応してる。(ウィンドウ幅を変えて) ★HTMLの文書構造を見てセレクタを書くので、メンテナンスも楽なはず。　継承する物は親に、同じ指定はグループ化して・・ html,body{ margin:0;padding:0; } body{ font-family: 'MS UI Gothic',"ＭＳＰゴシック",sans-serif; /* 必ず総称ファミリ名を書く */ background-color:gray; } a:link{color:#000000;} /* underlineはデフォルトなので書かない! 書けばaに対して記述し継承させる */ a:visited{color:#990099;} a:hover{color:#ff0000;} div.header,div.section,div.footer{ margin: 0 auto;padding:5px; width: 80%; min-width:480px;max-width:900px; border-color:#cccccc; border-style:solid; background-color:white; } div.header{border-width:2px 2px 0 2px;} div.section{border-width:0 2px;} div.footer{border-width:0 2px 2px 2px;} /* --- nav ----*/ div.header div.nav{ position:relative; width:110%; height:40px; left:-5%;text-align:center; } div.header div.nav ol{list-style:none;font-size:18px;} div.header div.nav ol li{display:inline-block; width:20%;position:relative; line-height:40px; } div.header div.nav ol li a{ width: 100%;height:100%; display: block; color:#000000; } div.header div.nav ol li a[href='index.html']{background-color:#cc6672;} div.header div.nav ol li a[href='navi1.html']{background-color:#bf66cc;} div.header div.nav ol li a[href='navi2.html']{background-color:#6672cc;} div.header div.nav ol li a[href='navi3.html']{background-color:#66ccbf;} div.header div.nav ol li a[href='index.html']:hover{background-color:#ffd8dd;} div.header div.nav ol li a[href='navi1.html']:hover{background-color:#fad8ff;} div.header div.nav ol li a[href='navi2.html']:hover{background-color:#d8ddff;} div.header div.nav ol li a[href='navi3.html']:hover{background-color:#d8fffa;}

質問者

お礼 2013/12/14 01:38

バージョン別の違いまで細かく御指導頂きありがとうございます。 wrapperは、ページをglovalnavi、sidemenu、main contents等と分割し配置するために、やはりサンプルのコードを参考としました。ですが、HTML5からは原則使用しないようになるのですね。記述して頂いたようなHTML5のやり方は殆ど見たことがないので、なんとなくは判りますが時間をかけてゆっくり勉強させて頂きたいと思います。質問した件だけでなく、その他の当方の不適切な点や正しい解決策をご丁寧に教えて下さり本当にありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (1)

play_with_you
ベストアンサー率37% (112/301)

2013/12/13 09:43 回答No.1

＞text-indent: -9999px; ＞overflow: hidden; これ、何をしてるか分かります？「テキストを左に9999pxずらす」指定と、「領域からはみ出した部分を見えなくする」指定ですよ。見出しに画像を使いたいけどSEO上は見出しは文字のほうがいいから「テキストを画面外にぶっ飛ばして目には見えなくして画像を置く」という、過去に流行った馬鹿な「テクニック」で使われていました。まあそっちはともかく、明らかに「テキスト部分を表示されなくする」指定が入っているのにそういう質問をするということは、ちゃんと意味を理解せずになんとなくコピペなどでやっているということです。 HTMLやCSSはある種プログラミング言語と同じで「思ったように」は動かず「書いたように」しか表示されません。なんとなくじゃなくきちんと覚えないとだめですよ。

質問者

お礼 2013/12/14 01:20

ご回答頂きありがとうございます。「こういうものを作りたい」と思い、色々検索した中で分かり易いサンプルに手を加えたのですが…。確かにサンプルコードに＞text-indent: -9999px;　//テキストを画面外に指定とあり、そういうもの技があるんだとそのまま疑わず使っていました。仰るとおり、コピペしただけでコードの意味を正しく理解しようという姿勢が欠如しておりました。お恥ずかしい限りです。コードの間違いだけでなく、当方自身の取り組み方の問題点もご指摘頂きありがとうございました。今後はきちんと意味を理解しながら学んでいきたいと思います。

ログインすると、全ての回答が全文表示されます。