縦方向link bar

ニュースサイト等で頻繁に見かけますが、自分の巡回先などをリストにしてサイトの右か左に寄せて配置しているパターンです

サンプルではこのようになりますね。ソースを書くと

<div class="link_bar">
	<h1>巡回先</h1>
	<ul>
		<li><a href="">リンク１</a></li>
		<li><a href="">リンク２</a></li>
		<li><a href="">リンク３</a></li>
		…（以下省略

と言う風に、link_barクラスの中に、リンクの内容を入れていきます

スタイルシートの方は

div.link_bar {
	border:dashed 2px #cb8;
	width:10em;
	padding:0.2em;
	
}
ul {
	list-style-type:none;
	margin:0.2em;
	padding:0;
}
ul a {
	color:#654;
}
div h1 {
	font-size:1.0em;
	margin:0 0.2em;
}

となっていますが、要点はここらへん

div.link_bar {
	width:10em;
}
ul {
	list-style-type:none;
	margin:0.2em;
}
ul a {
}
div h1 {
	font-size:1.0em;
	margin:0 0.2em;
}

ほとんどは、デフォルトの設定の上書き部分ですが、他には、link_barクラスにwidthを指定しておくことがポイントです