html5 でグローバルナビを作ってみます。ホームページでヘッダー部分にある。横並びの物です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" href="style.css" media="all"> <!-- スタイルシート -->
</head>
<body>
<nav>
<ul>
<li><a href="#"></a>nav1</li>
<li><a href="#"></a>nav2</li>
<li><a href="#"></a>nav3</li>
<li><a href="#"></a>nav4</li>
<li><a href="#"></a>nav5</li>
</ul>
</nav>
</body>
</html>
ブラウザで表示すると
これだとホームページには使いづらいので、ちょっと変更します。最初にナビの左端にある「・」をなくす為、スタイルシートに下記追加します。
nav ul {
list-style-type: none;
}
ブラウザで表示すると
左端にあった「・」がなくなりました。
補足ですが、他のlist-style-typeについてです。
list-style-type : none; /* マークを使用しない */
list-style-type : disc; /* 黒い丸、デフォルト */
list-style-type : circle; /* 白い丸 */
list-style-type : square; /* 黒い四角 */
list-style-type : decimal; /* 数字 */
list-style-type : decimal-leading-zero; /* 数字(zero-fill) */
list-style-type : lower-roman; /* ローマ数字(小文字) */
list-style-type : upper-roman; /* ローマ数字(大文字) */
list-style-type : lower-greek; /* ギリシア文字(小文字) */
list-style-type : lower-alpha; /* アルファベット(小文字) */
list-style-type : upper-alpha; /* アルファベット(大文字) */
list-style-type : lower-latin; /* アルファベット(小文字) */
list-style-type : upper-latin; /* アルファベット(大文字) */
list-style-type : cjk-ideographic; /* 漢数字 */
list-style-type : hiragana; /* ひらがな */
list-style-type : katakana; /* かたかな */
webword様 サイト記事 引用
目次
ナビを横並びにする
nav li { float: left;
}
スタイルシートに上記コードを追加します。
ブラウザで表示すると
よこ並びにはなりますが、隙間がなく見づらいです。
ナビに隙間を作る
スタイルシートに下記コードを追加します。
nav li { float: left;
padding-right: 13px; <!-- この行を追加するだけでも大丈夫です -->
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
}
ブラウザで表示すると
見やすくはなりましたが、あまり見た目がよくないので、次回はこのナビを装飾してみたいと思います
グローバルナビ続き
その他グローバルナビ
html5追加タグまんさいテンプレ
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8" /> <title>none</title> <link rel="stylesheet" href="style.css" /> </head> <body> <section> <header> <nav> </nav> </header> </section> <article> </article> <aside> </aside> <footer> </footer> </body> </html>