縦書きとrubyタグの使い方

css3

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

「writing-modeプロパティ」を使用し、縦書きにします。現在は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;

yachin29.hatenablog.com

www.jishouin.jp

http://thana531223.webcrow.jp/shirane/

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/001720 yachin29.hatenablog.com

rubyタグ対応前のFirefox

rubyタグ対応後のFirefox（Ver.38以降）

index.html

<!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>

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

ルビの使い方

index.html

コメント

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