文字を縦書きにする

おくのほそ道

序章

月日は百代の過客にして行かう年も又旅人なり。 舟の上に生涯をうかべ、馬の口とらえて老を むかふる物は日々旅にして旅を栖とす。 古人も多く旅に死せるあり。 予もいずれの年よりか片雲の風にさそはれて、 漂白の思ひやまず、海濱にさすらへ、 去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、 春立る霞の空に白川の関こえんと、 そヾろ神の物につきて心をくるはせ、 道祖神のまねきにあひて、取もの手につかず。
（以下略）



このページのソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>CSS覚書</TITLE>
<STYLE type="text/css">
<!--
body {
margin-left:10%;
margin-right:10%;
color:#000000;
background-color:#ffffff;
}

h1 {
text-align: center;
color: #ff6600
}
div.poem {
writing-mode: tb-rl;　　　　　　　　　　　/* 縦書き表記にする */
font-family: HG行書体;　　　　　　　　　/* フォントをＨＧ行書体にする */
font-size: 18px;　　　　　　　　　　　　　 /* 文字のサイズを18ピクセルにする */
height: 15em;　　　　　　　　　　　　　　　/* 高さを15文字分にする */
line-height: 1.5;　　　　　　　　　　　　　 /* 行の高さを1.5文字分（＝行間を0.5文字分）にする */
border: double 4px maroon;　　　　　　/* 枠線を二重線・太さ4ピクセル・栗色にする */
background-color: #fff0e0;　　　　　　/* 背景色をクリーム色にする */
margin-left: 10%;　　　　　　　　　　　　　/* 枠線の位置を左端から10％にする */
margin-right: 10%;　　　　　　　　　　　　/* 枠線の位置を右端から10％にする */
padding: 0.4em;　　　　　　　　　　　　　　/* 文字から枠線まで（余白）を0.4文字分にする */
}
h2 {
font-size: 200%;　　　　　　　　　　　　　/* 見出しの文字を2倍(200%)の大きさにする */
}
h3 {
font-size: 150%;　　　　　　　　　　　　　/* サブ見出しの文字を1.5倍(150%)の大きさにする */
}
}
p {
text-indent: 1em;　　　　　　　　　　　　/* 段落の先頭を1文字分だけ字下げする */
}
-->
</STYLE>
</herd>
<BODY>

<h1>文字を縦書きにする</h1>

<div class="poem">
<h2>おくのほそ道</h2>
<h3>序章</h3>
<p>
月日は百代の過客にして行かう年も又旅人なり。
舟の上に生涯をうかべ、馬の口とらえて老を
むかふる物は日々旅にして旅を栖とす。
古人も多く旅に死せるあり。
予もいずれの年よりか片雲の風にさそはれて、
漂白の思ひやまず、海濱にさすらへ、
去年の秋江上の破屋に蜘の古巣をはらひてやゝ年も暮、
春立る霞の空に白川の関こえんと、
そヾろ神の物につきて心をくるはせ、
道祖神のまねきにあひて、取もの手につかず。（以下略）
</p>
</div>
</body>
</HTML>