読者です 読者をやめる 読者になる 読者になる

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

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

Webページにサイドナビやトップナビをつけるサンプル

HTML / CSS
<スポンサーリンク>

■HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title> TEST </title>
<link rel="stylesheet" type="text/css" href="navi_test.css" media="screen,print">
</head>
<body>

<div id="logo"><img src="images/logotest.gif" width="140" height="45" alt="CSS-JS"></div>

<form action="" method="get">
<!-- 検索ボックス -->
<div>
<input type="text" name="seach" size="22">
<input type="submit" value="検索">
</div>
</form>

<!-- ここがトップナビゲータ(上の部分) -->
<ul id="topnav">
  <li><a href="./01_03.html">ホーム</a></li>
  <li><a href="./kabu.html"></a></li>
  <li><a href="./kawase.html">為替</a></li>
  <li><a href="./saiken.html">債券</a></li>
</ul>

<div id="sidenav">
<ul>
  <li><a href="./chart.html">チャート</a></li>
  <li><a href="./ita.html"></a></li>
  <li><a href="./tick.html">ティック</a></li>
</ul>
</div>

</body>
</html>

■CSS

@charset "Shift_JIS";

body {
	margin: 0;
	padding: 0;
	color: #000000;
	background: #ffffff;
}

/*-----左のロゴのデザイン ---*/

#logo {
	margin: 0;
	width: 140px;
	float: left;
}

form {
	width: 60%;
	float: right;
	text-align: right;
	margin-top: 12px;
	margin-right: 12px;
}

ul#topnav {
	clear: both;
	margin: 0;
	padding: 0;
	font-size: small;
	line-height: 1.4;
	color: #aaaaaa;
	background: #666666;
}

ul#topnav li {
	display: inline;
	padding: 0 0.8em;
	border-right: 2px groove #999999;
}

/* ---- 左横のナビゲーションバー ---*/

div #sidenav {
	position: absolute;
	left : 0;
	width: 9em;
	font-size: medium;
	color: #000000;
	background: #eeeeee url(images/rond.gif) no-repeat right bottom;
}

div #sienav ul {
	margin: 0;
	padding: 0.8em 0 0.8em 2em;
	/* list-styleプロパティは、リストの先頭に表示するマーカーに関する指定をまとめて行う際に使用 */
	list-style: url(images/triangle.gif);
}

div#sidenav li {
	margin: 0.5em 0;
	font-size: small;
}

■結果