20200626 おさらいナビゲーションの奮闘② background-position: 0 0 text-indent:-9999px
CSSスプライトを使ったアイコン表示
引き続きナビゲーション作成
炭酸飲料っぽい名であるが簡単に言うとマウスカーソルを合わせた時の表示の切り替えがimgフォルダに入っている１枚の画像だけで済む方法。
（今まではボタンの背景画像１枚、切り替わった時の画像が１枚、最低２枚必要だった）
やり方としてはbackground-positionを使って表示する画像の座標を示して
あげれば良いだけ。
ナビゲーションの背景色
nav{
background-color: black;
}
いつものリストスタイルのリセット
.nav ul{
list-style: none;
text-decoration: none;
padding-left:0;
margin: 0;
display: flex;
justify-content: center;
}
ここからリンクボタンの背景画像の設定
.nav a{
display: block;
width: 150px;
height: 40px;
margin-top: 10px;
text-indent: -9999px;→リンクタグの中に書き込まれている文字を消す
background-image: url(img/s_btn.gif);→背景画像
background-position: 0 0;→背景画像の中で表示させたい部分の座標
background-repeat: no-repeat;
}
.nav .menu1 a{
background-position:0 0px;→背景画像の中で表示させたい部分の座標（背景は灰色のボタンサンプル）
}
.nav .menu1 a:hover{
background-position:0 -50px;→オンマウス時に切り替わった時に表示させる画像の表示部分の指定座標（背景は黒色のボタンサンプル）
}
.nav .menu2 a{
background-position:-160px 0px;
}
.nav .menu2 a:hover{
background-position:-160px -50px;
}
.nav .menu3 a{
background-position:-320px 0px;
}
.nav .menu3 a:hover{
background-position:-320px -50px;
}
.nav .menu4 a{
background-position:-480px 0px;
}
.nav .menu4 a:hover{
background-position:-480px -50px;
}
.nav .menu5 a{
background-position:-640px 0px;
}
.nav .menu5 a:hover{
background-position:-640px -50px;
}
ーー疑問ーー
background-image: url(img/s_btn.gif)；
background-position: 0 0;
background-repeat: no-repeat;
この３点セットを.nav ul liに書き込むのか.nav aで迷った。
おそらく正解は.nav a
なぜなら.nav ul liに上記３点を書き込んだときは背景画像は表示されたがオンマウス時に画像が切り替わらなかった。
.nav a で書き込ん際には正しく表示された。
a:hovorに対応するのはaタグ内に書き込んでいるものだけになるからなのか？
ーー課題 CSSで文章の文字を消す方法-ーー
リンクタグに書き込まれている文章のみを消したくて方法を模索したが言うことを聞かなくて大変だった。
試み1
メニューの文字が消えたがなんとリンク機能まできれいさっぱり
.nav .menu1 {
background-image: url(img/s_btn01.gif);
background-size: 100%;
background-repeat:no-repeat;
text-indent:100%;
white-space: nowrap;
overflow: hidden;
}
試み2
メニューの文字どころじゃなく背景画像ごと吹っ飛んだ
.nav .menu1 {
background-image: url(img/s_btn01.gif);
background-size: 100%;
background-repeat:no-repeat;
text-indent:-9999px
結局文字だけ消す方法ってどうすりゃいいのよ
答え
.nav a{
display:block;
width: 150px;
height: 40px;
text-indent:-9999px;
}
使用しているプロパティを間違えていたのではなく、指定するタグを間違えていた。
.menu1を指定するとそのエリア全域が消し飛ぶ対象になってしまうので、文字だけ消したかったら文字が入力されているaタグを指定すること。
検証ツールを使ってタグの役割と位置を正確に調べた上で打ち込まないととんでもない動きをしてしまうことを学習した。
