ルビの配置を自在に操る！ CSS Miscellaneous の ruby-position プロパティ

CSS Miscellaneous: ruby-position プロパティ解説

使い方

ruby {
  ruby-position: [値];
}

[値] には、以下のいずれかを指定できます。

• over：ルビをベース文字の上部に配置します。
• before：ルビをベース文字の左側に配置します。
• after：ルビをベース文字の右側に配置します。

各値の詳細

• over と under：

  • ruby-align プロパティと組み合わせて、ルビの左右の位置を調整できます。
  • ルビの縦方向の位置は、line-height プロパティによって影響を受けます。

• before と after：

  • ルビの左右の余白は、margin プロパティで調整できます。
  • ルビの縦方向の位置は、ruby-align プロパティと line-height プロパティによって調整できます。

実例

<ruby>
  漢字<rt>ルビ</rt>
</ruby>

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

上記コードでは、ルビが漢字の上部に中央揃えで表示されます。

注意点

• IE 11 以前では、ruby-position プロパティはサポートされていません。
• ルビの表示位置は、ブラウザやフォントの設定によって多少異なる場合があります。

さまざまな ruby-position サンプルコード

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.over {
  ruby-position: over;
}

.under {
  ruby-position: under;
}

ルビを左右に配置する

<p>
  <ruby>ルビ</ruby>漢字
  <ruby>ルビ</ruby>かな
</p>

ruby {
  font-size: 80%;
}

.before {
  ruby-position: before;
}

.after {
  ruby-position: after;
}

ルビの位置と整列を組み合わせる

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

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

.under-right {
  ruby-position: under;
  ruby-align: right;
}

ルビの余白を調整する

<p>
  <ruby>ルビ</ruby>漢字
  <ruby>ルビ</ruby>かな
</p>

ruby {
  font-size: 80%;
}

.before-margin {
  ruby-position: before;
  margin-right: 1em;
}

.after-margin {
  ruby-position: after;
  margin-left: 1em;
}

疑似要素と組み合わせて装飾する

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.after::before {
  content: "(";
}

.after::after {
  content: ")";
}

.after {
  ruby-position: after;
  position: relative;
}

アニメーションでルビを表示する

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

p:hover ruby {
  opacity: 1;
}

これらのサンプルコードを参考に、さまざまなレイアウトを試してみてください。

ruby-position 以外のルビの配置方法

ruby-align プロパティは、ルビの左右の位置を調整します。

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.left {
  ruby-align: left;
}

.center {
  ruby-align: center;
}

.right {
  ruby-align: right;
}

text-align プロパティは、ルビを含むテキスト全体の左右の位置を調整します。

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

マージンとパディング

ルビ要素にマージンやパディングを設定することで、ルビの位置を調整できます。

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.margin {
  margin-left: 1em;
}

.padding {
  padding-right: 1em;
}

疑似要素

::before や ::after などの疑似要素を使って、ルビの周りに装飾を施し、位置を調整できます。

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
}

.after::before {
  content: "(";
}

.after::after {
  content: ")";
}

.after {
  position: relative;
}

position プロパティ

ルビ要素に position: absolute; を設定することで、自由に配置できます。

<p>
  漢字<ruby>ルビ</ruby>
  かな<ruby>ルビ</ruby>
</p>

ruby {
  font-size: 80%;
  position: absolute;
}

.top-left {
  top: 0;
  left: 0;
}

.bottom-right {
  bottom: 0;
  right: 0;
}

これらの方法は、それぞれ異なる利点と欠点があります。目的に合った方法を選択してください。