みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

グローバルナビの各項目の背景色をそれぞれ異なる色にし、またマウスオーバーの時にも変えたいと思います。

背景色を変える事は出来たのですが、テキスト部分が表示されません。

下記の3つファイルから構成されています。

【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;}


何が問題なのかご指導頂けますでしょうか。
どうぞ宜しくお願い致します。

投稿日時 - 2013-12-13 01:16:35

QNo.8384211

困ってます

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

 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',"MS Pゴシック",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-13 10:05:19

お礼

バージョン別の違いまで細かく御指導頂きありがとうございます。

wrapperは、ページをglovalnavi、sidemenu、main contents等と分割し配置するために、やはりサンプルのコードを参考としました。

ですが、HTML5からは原則使用しないようになるのですね。

記述して頂いたようなHTML5のやり方は殆ど見たことがないので、なんとなくは判りますが時間をかけてゆっくり勉強させて頂きたいと思います。

質問した件だけでなく、その他の当方の不適切な点や正しい解決策をご丁寧に教えて下さり本当にありがとうございました。

投稿日時 - 2013-12-14 01:38:15

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

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

投稿日時 - 2013-12-13 09:43:11

お礼

ご回答頂きありがとうございます。

「こういうものを作りたい」と思い、色々検索した中で分かり易いサンプルに手を加えたのですが…。

確かにサンプルコードに

>text-indent: -9999px; //テキストを画面外に指定

とあり、そういうもの技があるんだとそのまま疑わず使っていました。

仰るとおり、コピペしただけでコードの意味を正しく理解しようという姿勢が欠如しておりました。お恥ずかしい限りです。

コードの間違いだけでなく、当方自身の取り組み方の問題点もご指摘頂きありがとうございました。

今後はきちんと意味を理解しながら学んでいきたいと思います。

投稿日時 - 2013-12-14 01:20:05

あなたにオススメの質問