スマートフォン向けのグローバルナビゲーションを作成したい
スマートフォン向けのデザインでは、多くの場合グローバルナビゲーションを横ではなく縦に並べます。スマートフォン向けのグローバルナビゲーションを作る場合は、画面サイズに合わせて全体が伸縮するように、<nav>や<ul>に幅を指定しないでおくことがポイントです。また、ナビゲーションのリンクになる<a>タグに適用するスタイルも重要です。<li>タグに含まれる<a>タグには、「display:block」と「width:100%」を指定します。それから、これは必須ではありませんが、クリックできる領域を増やすためにパディングも設定するとよいでしょう。そうすることで、ナビゲーションの各項目を「ボタン」のように見せることができます。
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>floatプロパティ</title>
<style>
body{
margin: 0;
}
nav{
border-top:8px solid #34589e;
background: #2a6fb7;
}
nav ul{
list-style: none;
margin: 0;
padding: 0;
}
nav li{
border-bottom:1px solid #34589e;
}
nav li a{
display: block;
width: 100%;
padding: 20px 0;
text-decoration: none;
text-align: center;
font-size: 14px;
color: #ffffff;
}
nav li a:hover{
background: #34589e;
}
</style>
</head>
<body>
<nav>
<ul id="localnav">
<li><a href="#">HOME</a></li>
<li><a href="#">会社概要</a></li>
<li><a href="#">業務内容</a></li>
<li><a href="#">アクセス</a></li>
<li><a href="#">問い合わせ</a></li>
</ul>
</nav>
</body>
</html>実行結果
