感謝のプログラミング 10000時間

たどり着いた結果(さき)は、感謝でした。

リンクを横並びにして、メニューバーみたいな形で表示するためのHTMLとCSS

スポンサーリンク

ずっと前にこんな記事を書いたが、なんかわかりづらかったのでもう一度まとめたい。
メニューを上の方、つまりヘッダーあたりで、横並びにして表示しているようなサイトはたくさんある。

これは単純にHTMLのリストを、CSSを使って横並びにしているだけなのだが、最初はどうやったらいいかさっぱりわからなかった。

画面のイメージはこんな感じで、カーソルを合わせると色が変わるようにしている。
f:id:sho322:20131108193814p:plain

このような画面を作るためには、以下のようなCSSを用意する。

.menu {
	font-size: 1.5em;
	width : auto; /* リキッドデザインにするため*/
	height : 30px;
	background-color : midnightblue;
}

.menu ul {
	margin; 0;
	padding: 0;
	width: 700px; /* 横幅の最小値 */
}

.menu li {
	list-style-type: none;
	float: left;
}

.menu li a {
	display: block;
	width: 120px;
	line-height: 30px;
	border-right: solid 1px #ffffff;
	color: #ffffff;
	text-align: center;
	text-decoration: none;
	background-color: midnightblue;
}
.menu li a:hover {
	background-color: seagreen;
}

「.menu」というのは、後述するHTMLの

<div class="menu"></div>

のこと。
ここに表示されるリストに対して、CSSを適用している。

さて、このmenuのところに表示させるHTMLはこんな感じ。
menu.html

<ul>
<li><a href="menu1.html">メニュー1</a></li>
<li><a href="menu2.html">メニュー2</a></li>
<li><a href="menu3.html">メニュー3</a></li>
<li><a href="menu4.html">メニュー4</a></li>
<li><a href="menu5.html">メニュー5</a></li>
</ul>

この「menu.html」は色んなHTMLでメニューとして使うことになると思うので、menu.htmlとして外出しする。
で、この外出ししたHTMLは、jQueryを使って取り込むようにする。
それはこのように実装する。
test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メニューリストを横並びで表示する</title>
<link rel="stylesheet" type="text/css" href="./css/common-style.css">
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
$(function() {
	const MENU_HTML = "menu.html";
	function setNavi () {
		$.get(
			MENU_HTML,
			function (data) {
				$('.menu').html(data)
			}
		);
	}
	setNavi();
});
</script>
</head>
<body>
<div class="menu"></div>
</body>
</html>

このsetNavi()という関数で、menu.htmlを取り込んで、div class="menu"のところに表示させている。

こうやってmenu.htmlを別出しすることで、同じようなタグを色んなHTMLに書く必要がなくなる。
変更したいときは、menu.htmlだけ変更すればよくなる。

この知識を得るために読んだ本

XHTML/HTML+CSSスーパーレシピブック

XHTML/HTML+CSSスーパーレシピブック

結局この本が一番実践的で、サンプルが豊富で、しかもわかりやすくて役に立つ。
手元に置いておくと絶対に得する本。