縦書きとrubyタグの使い方 - 未経験のwebサイト制作の勉強

「writing-modeプロパティ」を使用し、縦書きにします。

p {
  -webkit-writing-mode: vertical-rl; /*ChromeとSafari用のベンダープレフィックス*/
  -ms-writing-mode: tb-rl; /*IE用のベンダープレフィックス*/
  writing-mode: vertical-rl; /*Firefox用はベンダープレフィックス無し*/
}

ルビの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。（2015年8月1日現在、Firefoxの最新版は39）
このため、IE、Chrome、Safari、Firefoxの主要4ブラウザーで表示が出来るようになりました。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦書きとrubyタグ</title>
<style>
body {
  background: #D05A6E;
}
p {
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
 "Hiragino Mincho ProN", "HG明朝E", serif;
  margin: 0 auto;
  color: #FCFAF2;
  font-size: 22px;
  line-height:3;
  padding: 1em;
  letter-spacing: 0.15em;
  -webkit-writing-mode: vertical-rl; /*縦書きにする(右から左)*/
  -ms-writing-mode: tb-rl;
}
</style>
</head>
<body>
<p><ruby>心<rt>こころ</rt></ruby>にも<br>
あらでうき<ruby>世<rt>よ</rt></ruby>に<br>
ながらえば<br>
<ruby>恋<rt>こい</rt>しかるべき</ruby><br>
<ruby>夜半<rt>よか</rt></ruby>の<ruby>月<rt>つき</rt></ruby>かな</p>
</body>
</html>