縦書きとrubyタグの使い方 - WEBサイト制作の勉強

「webは横書きが当たり前」そんな常識は変化しつつあります。
実はwebにおける縦書きの取り組みは、Internet Explorer5.5(2000年)が独自に実装していましたが、他のブラウザーでは実装されていませんでした。CSS3の策定を機会に最新の主要なウェブブラウザは縦書きを表現できるようになっています。

「writing-modeプロパティ」を使用し、縦書きにします。2016年11月現在、Firefoxも含めて、IE、Chrome、Safariと主要ブラウザー全てに対応しているので、積極的に使っていきましょう。またWebkit系とIEは共にベンダープレフィックスが必要なので、Firefoxには必要ないのでそちらも注意が必要です。

また、この機会に最新の明朝体に最適化されたfont-familyの指定もしっかり覚えておきましょう。

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

明朝体を使用する際のfont-family　2016年版

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", serif;

www.fieldcorp.jp

www.miyama-sansou.com

81-web.com

tategaki.github.io

ルビの使い方

HTML5から採用された「ruby」タグですが、以前はFirefoxで表示が出来なかったので実用的ではありませんでしたが、「Firefox 38」からルビ表示がサポートされるようになりました。（2015年8月1日現在、Firefoxの最新版は39）
このため、IE、Chrome、Safari、Firefoxの主要4ブラウザーで表示が出来るようになりました。今後の為にrubyタグの使い方をしっかりと覚えておきましょう。
http://yachin29.hatenablog.com/entry/2015/05/14/001720yachin29.hatenablog.com

rubyタグ対応前のFirefox

f:id:yachin29:20150513235308j:plain

rubyタグ対応後のFirefox（Ver.38以降）
f:id:yachin29:20150514000127j:plain

f:id:yachin29:20150801101806p:plain

index.html

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>縦書きとrubyタグ</title>
<style>
body {
  background: #D05A6E;
}
p {
  font-family:
    "ヒラギノ明朝 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>