Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

HTML5新要素 rubyタグ

概要

rubyタグについて説明します。

内容

rubyはテキストにルビをふるためのタグです。

サンプル

「不運と踊っちまったんだよ」という文に
「ハードラックとダンスっちまった」というルビをふります。

<!DOCTYPE HTML>
<html lang="ja-JP">
  <head>
    <meta charset="UTF-8" />
    <title>ruby tag sample</title>
    <style type="text/css">
    header,article {
      background-color:#EEEEEE;
      margin:5px;
    }
    h1,h2,h4 {
      background-color:#99FF99;
      padding:5px;
      margin:5px;
    }
    hgroup {
      padding:5px;
    }
    </style>
  </head>
  <body>
    <div id="container">
      <header><hgroup><h1>rubyタグ 実装サンプル</h1></hgroup></header>
      <article>
      <hgroup>
      <h1>rubyによるルビのサンプル</h1>
      <h4>
      <ruby>
        不運と踊っちまったん<rt>ハードラックとダンスっちまった</rt>だよ
      </ruby>
      </h4>
      </hgroup>
      </article>
    </div>
  </body>
</html>

完成画面のキャプチャ