WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

隠し文字

HTML+CSS

ナビゲーションを画像にする場合、気をつけたいのがliに記述している文字の扱いです。今回は文字も含めて画像にしているので、このままでは画像の文字とliに記述している文字がダブってしまい、画像の文字が読めなくなってしまいます。

ここで絶対にやってはいけなのが画像の文字を見せる為にliに記述している文字を消すという行為です。表示的にはダブっている文字が消えて綺麗に見えますが、文章構造上liの中身が空という事になってしまうので、絶対にNG


文章構造上liの中身は必須なので、CSSの方で文字を見えなくさせる記述をします。
方法はいくつかあります。以前は「text-indent: -999em;」と指定し、ものすごく左の方に文字を移動させる、という方法もありましたが、
現在最も使われている方法は、文字を右にずらし見えなくさせるという方法です。

右にずらす方法

#nav li a {
  display: block;
  width: ボタン幅;
  height: ボタン高さ;
  background: url(背景画像のパス) no-repeat;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}

white-spaceプロパティは、ソース中の半角スペース・タブ・改行の表示の仕方を指定する際に使用します。
「 nowrap」はソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示し、ボックスの大きさが指定されている場合にも、自動的に改行されません。

ナビゲーションボタンの作成

HTML+CSS

今回はボタンを1つ1つ画像にして背景画像で指定します。hover時の画像も別に制作してみましょう。

home.png
f:id:yachin29:20161007210802p:plain


home_h.png
f:id:yachin29:20161007210752p:plain


<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーションの作成</title>
<style>
html,body,ul,li {
margin:0;
padding:0;
line-height:1.0;
}
a {
text-decoration:none;
color:#FFFFFF;
}
ul {
list-style:none;
}

/*レイアウト部分*/

ul {
width:800px;
height:50px;
overflow:hidden;
}
li {
width:200px;
height:50px;
float:left;

}
li a {
display:block;
text-align:center;
line-height:50px;
background: #06F;
border-right: 1px solid #000;
text-indent:100%; /*要素の外の右隣に移動させる*/
white-space:nowrap; /*改行を無効にする*/
overflow:hidden; /*はみ出した文字を隠す*/
}
li#home a {
background:url(img/home.png) no-repeat;
} 
li#food a {
background:url(img/food.png) no-repeat;
} 
li#access a {
background:url(img/access.png) no-repeat;
} 
li#info a {
background:url(img/info.png) no-repeat;
} 

li#home a:hover {
background:url(img/home_h.png) no-repeat;
} 
li#food a:hover {
background:url(img/food_h.png) no-repeat;
} 
li#access a:hover {
background:url(img/access_h.png) no-repeat;
} 
li#info a:hover {
background:url(img/info_h.png) no-repeat;
} 

li:last-child a {
border-right:none;
}

li a:hover {
background:#000033;
color:#EEE;
}
</style>
</head>

<body>
<ul>
<li id="home"><a href="#">home</a></li>
<li id="food"><a href="#">food</a></li>
<li id="access"><a href="#">access</a></li>
<li id="info"><a href="#">info</a></li>
</ul>
</body>
</html>