黒板風デザイン

黒板風に見えるデザインとなるCSSです。画像はレイアウト調整用に透明GIFを使っています。width:1emだと を無視するブラウザが多くて挫折して画像に……。右側の日付と日直あたりを使わないのならば画像は不要です。というか日付と日直を画像にしたほうが手っ取り早いという話もあったりして(苦笑)。まあ、でもテキストのほうが何かあった時に修正が楽ですからね。こだわってみたという感じかな。

HTMLは以下のようにDIVを3つ使います。黒板っぽく見せる演出の日付や日直の名前は適当に変更してください。

<div class="blackboard">
<div class="dayduty">
<p>5月9日<img src="/img/layout.gif" alt=" " height="16px">
日直<img src="/img/layout.gif" alt=" " height="16px">
桂ヒナギク</p>
</div>
<div class="contents">
<p>（内容）</p>
</div>
</div>

黒板っぽく見せるためのblackboardは枠をそれっぽくborderで指定しています。heightはコンテンツ内容に合わせて変更してください。daydutyは横幅を1文字にしたブロック要素で、日付と日直の名前を配置するだけの目的で使用しています。こちらもコンテンツにあわせてpadding-topを変更してください。

.blackboard {
	border:			ridge 7px #936300;
	padding:		1ex;
	font-family:		sans-serif;
	color:			#fff;
	background-color:	#060;
	height:			15em;
}
.blackboard .contents {
	margin-right:		2em;
}
.dayduty {
	width:			1em;
	text-align:		center;
	font-weight:		bold;
	position:		relative;
	right:			0px;
	bottom:			0px;
	float:			right;
	padding-top:		1em;
}