Angular Ansible Apache HTTP Server C C++ CMake Composer CSS Cypress date-fns Django Django REST Framework Eigen3 ESLint FastAPI Git GNU Make HTML htmx HTTP JavaScript Julia LaTeX MariaDB Node.js NumPy Octave pandas Perl PHP PostgreSQL Pygame Python PyTorch Qt R SQLite Tailwind CSS

CSSでルビの位置を自在に操る：ruby-positionの解説とサンプルコード


ルビの位置決め

ruby-position には、以下の値を設定できます。

  • relative：ルビの位置を他のプロパティで調整します。
  • inter-character：ルビを各文字間に配置します。
  • under：ルビを主文字の下に配置します。
  • over：ルビを主文字の上に配置します。これがデフォルトの設定です。

例：

ruby {
  ruby-position: over;
}

この例では、すべてのルビが主文字の上に配置されます。

垂直方向の位置調整

ruby-position と併用して、ruby-align プロパティを使用してルビの垂直方向の位置を調整することもできます。

  • bottom：ルビを主文字の最下部に揃えます。
  • center：ルビを主文字の中央に揃えます。
  • top：ルビを主文字の最上部に揃えます。
  • baseline：ルビを主文字のベースラインに揃えます。これがデフォルトの設定です。
ruby {
  ruby-position: over;
  ruby-align: center;
}

この例では、すべてのルビが主文字の上に配置され、かつ主文字の中央に揃えられます。

高さ調整

ruby-vertical-align プロパティを使用して、ルビの高さを調整することもできます。このプロパティは、ルビと主文字のベースライン間の距離をピクセル単位で指定します。

ruby {
  ruby-position: over;
  ruby-vertical-align: -2px;
}

この例では、すべてのルビが主文字の上に 2 ピクセル分上に配置されます。


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ruby position examples</title>
<style>
  ruby {
    font-size: smaller;
  }

  .over {
    ruby-position: over;
  }

  .under {
    ruby-position: under;
  }

  .inter-character {
    ruby-position: inter-character;
  }

  .relative {
    ruby-position: relative;
    top: -0.5em;
  }
</style>
</head>
<body>
  <p class="over">漢字に<ruby>ふりがな</ruby>を振ります。</p>
  <p class="under">送り仮名<ruby>（ふりがな）</ruby>を振ります。</p>
  <p class="inter-character">読みにくい<ruby>漢字</ruby>には<ruby>ふりがな</ruby>が必須です。</p>
  <p class="relative">ルビの位置を<ruby>微調整</ruby>しました。</p>
</body>
</html>

このコードを実行すると、以下のようになります。

  • 4番目の行は、ルビが主文字の上に配置され、かつ主文字の中央に揃えられます。
  • 3番目の行は、ルビが各文字間に配置されます。
  • 2番目の行は、ルビが主文字の下に配置されます。
  • 最初の行は、ルビが主文字の上に配置されます。

垂直方向の位置調整

以下のコードは、ruby-alignを使用してルビの垂直方向の位置を調整する例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ruby align examples</title>
<style>
  ruby {
    font-size: smaller;
  }

  .top {
    ruby-position: over;
    ruby-align: top;
  }

  .center {
    ruby-position: over;
    ruby-align: center;
  }

  .bottom {
    ruby-position: over;
    ruby-align: bottom;
  }
</style>
</head>
<body>
  <p class="top">ルビを<ruby>上揃え</ruby>にします。</p>
  <p class="center">ルビを<ruby>中央揃え</ruby>にします。</p>
  <p class="bottom">ルビを<ruby>下揃え</ruby>にします。</p>
</body>
</html>
  • 3番目の行は、ルビが主文字の上に配置され、かつ主文字の最下部に揃えられます。
  • 2番目の行は、ルビが主文字の上に配置され、かつ主文字の中央に揃えられます。
  • 最初の行は、ルビが主文字の上に配置され、かつ主文字の最上部に揃えられます。

高さ調整

以下のコードは、ruby-vertical-alignを使用してルビの高さを調整する例です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ruby vertical align examples</title>
<style>
  ruby {
    font-size: smaller;
  }

  .up {
    ruby-position: over;
    ruby-vertical-align: -2px;
  }

  .down {
    ruby-position: over;
    ruby-vertical-align: 2px;
  }
</style>
</head>
<body>
  <p class="up">ルビを<ruby>上に2px</ruby>上げます。</p>
  <p class="down">ルビを<ruby>下に2px</ruby>下げます。</p>
</body>
</html>
  • 2番目の行は、ルビが主文字の上に 2 ピクセル分下に配置されます。
  • 最初の行は、ルビが主文字の上に 2 ピクセル分上に配置されます。

疑似要素と絶対配置

代替方法として、疑似要素と絶対配置を組み合わせてルビを配置する方法があります。この方法は、比較的シンプルで、幅広いブラウザで動作します。

HTML

<ruby>
  <rb>主文字</rb>
  <rp>(</rp>
  <rt>ルビ</rt>
  <rp>)</rp>
</ruby>

CSS

ruby {
  position: relative;
}

ruby::after {
  content: attr(rt);
  display: block;
  position: absolute;
  /* ルビの位置を調整するプロパティ */
}

この例では、ruby::after 疑似要素を使用してルビを生成し、絶対配置で位置を調整しています。

display:table を使用した方法

display:table を使用して、ルビを含む行をテーブルとしてレイアウトする方法もあります。この方法は、比較的複雑ですが、より柔軟なレイアウトが可能です。

HTML

<table>
  <tr>
    <td>主文字</td>
    <td><ruby><rt>ルビ</rt></ruby></td>
  </tr>
</table>

CSS

ruby {
  display: table-cell;
  vertical-align: top;
}

ruby rt {
  display: table-cell;
  vertical-align: bottom;
}

この例では、ruby 要素と rt 要素をそれぞれテーブルセルとして表示し、vertical-align プロパティを使用して垂直方向の位置を調整しています。

上記以外にも、ruby-vertical-align プロパティや、margin や padding プロパティを組み合わせてルビを調整する方法があります。

  • 複雑なレイアウトの場合は、適切な方法を選択する必要があります。
  • いずれの方法を使用する場合も、各ブラウザでの動作を確認することが重要です。