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>