作成した画像
本日のコード
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>css-sprite</title> <style> html,body,ul,li{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } .g-nav{ width: 800px; height: 50px; margin: 50px auto 0;/*上、左右、下*/ } .g-nav>ul{ display: flex; } .g-nav li{ width: 25%; height: 50px; } .g-nav a{ display: block; text-align: center; line-height: 50px; background: url(img/btn.png)no-repeat 0 0; color: black; text-indent: 100%;/*隠し文字の処理３つでセット*/ white-space: nowrap;/*隠し文字の処理３つでセット*/ overflow: hidden;/*隠し文字の処理３つでセット*/ } .g-nav li.js>a{ background: url(img/btn.png)no-repeat -200px 0; } .g-nav li.wp>a{ background: url(img/btn.png)no-repeat -400px 0; } .g-nav li.php>a{ background: url(img/btn.png)no-repeat -600px 0; } .g-nav a:hover{ background:url(img/btn.png)no-repeat 0 -60px; } .g-nav li.js>a:hover{ background: url(img/btn.png)no-repeat -200px -60px; } .g-nav li.wp>a:hover{ background: url(img/btn.png)no-repeat -400px -60px; } .g-nav li.php>a:hover{ background: url(img/btn.png)no-repeat -600px -60px; } </style> </head> <body> <nav class="g-nav"> <ul> <li class="html"><a href="#">HTML</a></li> <li class="js"><a href="#">Javascript</a></li> <li class="wp"><a href="#">Wordpress</a></li> <li class="php"><a href="#">PHPqwweerttyyuuui</a></li> </nav> </body> </html>
