未分類

html5 nav グローバルナビ・テンプレート

この記事の最終更新日は2018年1月31日ですので、古い情報を掲載している可能性があります。その点ご理解のうえ読んでいただけると助かります。


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
これだとホームページには使いづらいので、ちょっと変更します。最初にナビの左端にある「・」をなくす為、スタイルシートに下記追加します。

nav ul {
              list-style-type: none;
}

ブラウザで表示すると

nav2
左端にあった「・」がなくなりました。
補足ですが、他の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;
}

スタイルシートに上記コードを追加します。

ブラウザで表示すると

nav3
よこ並びにはなりますが、隙間がなく見づらいです。

ナビに隙間を作る

スタイルシートに下記コードを追加します。

nav li {      float: left;
              padding-right: 13px; <!-- この行を追加するだけでも大丈夫です -->
	     padding-bottom: 0px;
              padding-top: 0px;
              padding-left: 0px;
}

ブラウザで表示すると

nav4
見やすくはなりましたが、あまり見た目がよくないので、次回はこのナビを装飾してみたいと思います
グローバルナビ続き

その他グローバルナビ

プルダウンメニュー付き、ナビはこちら

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>

-未分類