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

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

サイドバーにメニューをブロックにして表示する

<スポンサーリンク>

1.デモ

前の記事からの続きみたいなもので、今回はサイドバーにメニューを表示してみた。
前の記事→2段組の固定レイアウトを作成するCSS
サイドバーに色々とリンクを貼ったりすることはあるかと思うが、それをどうやってやればいいか、イメージを掴むことが目標。

今回のサンプルを見た結果はこんな感じになる。
f:id:sho322:20140131220406j:plain

2.サンプル

まず、HTMLはこんな感じ。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>メニュー</title>
<link rel="stylesheet" type="text/css" href="./css/sample2.css">
</head>
<body>
<div id="container">
	<div id="header">
		<p>ここはヘッダーです。</p>
	</div>

	<div id="content">
		<p>ここがコンテンツ部分</p>
	</div>

	<div id="sidebar">
		<div class="menu">
			<ul>
				<li><a href="#">メニュー1</a></li>
				<li><a href="#">メニュー2</a></li>
				<li><a href="#">メニュー3</a></li>
				<li><a href="#">メニュー4</a></li>
				<li><a href="#">メニュー5</a></li>
			</ul>
		</div>

		<div class="menu">
			<p>自己紹介です。私は名無しです。いつかBIGになりたいです</p>
		</div>

		<div class="menu">
			<p>最近書籍を出しました。書籍のリンクは→http:/~</p>
		</div>

	</div>

	<div id="footer">
		<p>ここはフッター</p>
	</div>

</div>
</body>
</html>

で、CSSはこんなものを読み込んでいる。
.menuのところが今回のポイント。
リンクをブロック要素として表示したり、マウスオーバーしたときの色の変更も行っている。

#container {
	width: 700px; /* 全体の横幅*/
	margin: auto; /* コンテナのまわりの余白のサイズ */
	border: medium solid DeepPink; /* わかりやすくするためにピンクで囲む */
}
#header {
	width: 700px;
	clear: both;
	border: medium solid Black;
}

#content {
	width: 500px;
	height: 300px;
	float: left; /* コンテンツの配置 */
	margin: 10px 0; /* ヘッダとのすきまの部分 */
	border: medium solid Blue;
}

#sidebar {
	width: 185px;
	height: 300px;
	float: right; /* コンテンツの配置 */
	margin: 10px 0; /* ヘッダとのスキマの部分 */
	border: medium solid DarkSlateBlue;
}


.menu {
	width: 185px;
	margin: 0;
	overflow: hidden;
}

.menu li{
	margin-bottom: 0; /* メニューの各項目の間隔を指定する*/
	list-style-type: none;
	line-height: 0;
	border-bottom: solid 1px DimGray;
}

.menu li a {
	display: block; /* リンクをブロック要素として表示するように指定する */
	line-height: 20px; /* リンクの高さを設定 */
	padding-left: 0; /* リンク内の左の余白のサイズを設定 */
}

.menu li a:hover {
	background-color: Yellow; /* リンクにカーソルを当てたときの色の変化 */
}

.menu ul {
	margin: 0;
	padding: 0;
	border-top: solid 1px Black;
}

.menu p {
	margin-top: 10px;
	margin-bottom: 3px;
	padding: 8px;
	border-top: solid 1px Black;
	border-bottom: solid 1px Black;
}

#footer {
	clear: both;
	border: medium solid Black;
}

3.参考

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

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

この本を参考に、自分なりにアレンジしてみた。
他にも様々なサンプルが載っていて、手元に置いておくと何かと役に立つ良書である。