CSSの基本（19）

文章を縦書きで表記する指定方法

俳句・和歌/詩など、縦書きの方が趣が出る文章があります。
内容によっては、縦書きも面白い効果として使えます。

縦書き表示　⇒　writing: mode: tb-rl;

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
body {
color: #000000;
background: #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>


（画面クリックでWEB上のサイズを見てください。）