最終更新日：2021.05.21

HTMLとCSSで漢字にルビを振る方法

今回はHTMLとCSSで漢字にルビを振る方法を紹介します。

前提条件は以下

IE11に対応する
Andoroidに対応する
サイト全体でgooglefontsのNoto Sans JP、もしくはNoto Serif JPを使う
rubyタグは使わず、data属性を使う

説明環境は以下

macOS Catalina v10.15.5
Visual Studio Code v1.52.1

この記事の目次

HTMLとCSSで漢字にルビを振る方法

rubyタグでも実装できますが、HTML上で本文とルビの判断がつきづらいため、data属性で実装します。

googlefontsのNoto Sans JP、もしくはNoto Serif JPを使う理由は、IE11対応と、Andoroid端末でも同じフォントで表示させるためです。

同じフォントで表示させることで、ルビを振ったときに位置がズレてしまったり、ルビの段落ちを防ぐことができます。

googlefontsをインストールする

まずはgooglefontsを読み込みます。以下はNoto Sans JPを読み込む例です。２行目にあるsubset=japaneseがないとIE11でフォントが適用されないので注意しましょう。

htmlファイルのhead内で読み込む場合は以下をコピペします。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&subset=japanese" rel="stylesheet">

cssから読み込む場合は、以下の１行をcssファイルの一番上にコピペします。

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap&subset=japanese");

HTMLで書くこと

ルビの部分にはクラス名c-rubyとdata属性を使います。

<p>
  <span data-ruby="きょう" class="c-ruby">今日</span>の<span data-ruby="てんき" class="c-ruby">天気</span>は<span data-ruby="は" class="c-ruby">晴</span>れだ。
</p>

Sassで書くこと

p{
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 2; //行間はルビがあるので広くとる
}

.c-ruby {
  
  &[data-ruby] {
    position: relative;
    text-align: center;
  }
  &[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em; //ルビの上下の位置を調整する
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    line-height: 1;
    white-space: nowrap; //ルビを段落ちさせないように
  }

ルビの位置は15行目のtopで調整します。ルビが段落ちする場合があるので20行目のwhite-spaceを指定して段落ちを防ぎます。

ルビの位置をそれぞれ調整するには？

ルビの長さによっては漢字の中央に配置できない場合あります。そのときは以下のようにクラス名c-ruby--vr2を追加して位置を調整します。

<p>
  <span data-ruby="はつばいちゅう" class="c-ruby c-ruby--vr2">発売中</span>の<span data-ruby="えいが" class="c-ruby">映画</span>の<span data-ruby="きゃくほん" class="c-ruby c-ruby--vr2">脚本</span>
</p>

sassでは18〜22行目のように指定します。

.c-ruby {
  
  &[data-ruby] {
    position: relative;
    text-align: center;
  }
  &[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
    top: -1em; //ルビの上下の位置を調整する
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.5em;
    line-height: 1;
    white-space: nowrap; //ルビを段落ちさせないように
  }

.c-ruby.c-ruby--vr2{
   &[data-ruby]::before {
    left: -0.5em;
  }
}