縦書きの表示 - Webデザインを学ぶ

f:id:hourin-g0913:20160303114955p:plain

HTML

<body>
<div id="header">
<p><ruby>日本<rt>にほん</rt></ruby>の<ruby>妖怪<rt>ようかい</rt></ruby></p>
</div>
</body>

CSS

body{
 background:url(bg2b.png) no-repeat left top;
 background-size:cover;
 background-attachment:fixed;
 background-color:#555;
}

#header{
 margin:0 auto;
 width:300px;
 background:rgba(255,255,255,0.5);
}

p{
 font-family:
 "ヒラギノ明朝 ProN",
 "HG明朝E", 
 "MS P明朝",
 "MS 明朝",
 serif;
 font-size:32px;
 padding-left:128px;
 -webkit-writing-mode:vertical-rl;/*縦書きにする（右から左）*/
 -ms-writing-mode:tb-rl;/*IE用の記述*/
 writing-mode:vertical-rl;/*firefoxの記述*/
		}