NoteBook風デザイン

ノートっぽいデザインとなるようなCSSです。画像を使っているので画像をダウンロードしておいてください。HTMLは以下のようにDIVを2つ使います。

<div class="notebook">
<div class="notebookbox">
（ページ内容）
</div>
</div>

これを左側のリングの部分となるnotebookは左に背景画像を縦に配置し、左側の空きを18pxとします。background-imageのpathは運用環境に合わせて変更してください。ページの枠となるnotebookboxは1pxで枠を作っておきましょう。ページの高さはheightでデザインに合わせて調整してください。うまく調整しないとリング部分が中途半端になるので、横幅もwidthできっちり指定しておいたほうがよいかもしれません。

.notebook {
	padding:		0 0 0 18px;
	background-repeat:	repeat-y;
	background-image:	url("/img/2009/ring.png");
}
.notebookbox {
	border:			solid 1px #67a6dd;
	padding:		1em 1em 1em 30px;
	height:			270px;
}