ルビ (ふりがな) を振る
ルビとは、漢字の上に振られる読み仮名のことです。ホームページ・ビルダーでルビを振る方法を紹介します
- XHTMLソース:
- <p>
- <ruby>
- <rb>ルビ</rb><rp>(</rp><rt>るび</rt><rp>)</rp>
- </ruby>
- とは、
- <ruby>
- <rb>漢字</rb><rp>(</rp><rt>かんじ</rt><rp>)</rp>
- </ruby>
- の
- <ruby>
- <rb>上</rb><rp>(</rp><rt>うえ</rt><rp>)</rp>
- </ruby>
- に
- <ruby>
- <rb>振</rb><rp>(</rp><rt>ふ</rt><rp>)</rp>
- </ruby>
- られる
- <ruby>
- <rb>読</rb><rp>(</rp><rt>よ</rt><rp>)</rp>
- </ruby>
- み
- <ruby>
- <rb>仮名</rb><rp>(</rp><rt>がな</rt><rp>)</rp>
- </ruby>
- のことです。</p>
ホームページ・ビルダーでルビ (ふりがな) を設定する方法です。
① ルビを振る文字列をドラッグで選択します。
② メニューバーから [書式 - 文字飾り - ルビ] を選択します。
③ [ルビ] にふりがなを入力します。
④ [OK] ボタンをクリックします。
- 選択していた文字列の右側に入力したルビの文字が表示されます。
- サンプル:
- ルビ(るび)とは、漢字(かんじ)の上(うえ)に振(ふ)られる読(よ)み仮名(がな)のことです。
⑤ プレビュー画面でルビを確認します。
- サンプル:
- ルビとは、漢字の上に振られる読み仮名のことです。
これを表示するマークアップは右のXHTMLソースとなっています。
ページトップへ
<ruby> タグ
- 文字にルビ (フリガナ) をふることができるタグです。
- ルビを振る対象となる文字は <rb> タグで、ルビの内容は <rt> タグでそれぞれ指定します。
<rb> タグ
- <ruby>~</ruby> 内で有効なタグで、ルビを振る対象となる文字を指定するために用います。
- <rb>~</rb>内が指定されますが、終了タグを省略すると、<rt>などのタグまでが有効となります。
<rt>タグ
- <ruby>~</ruby> 内で有効なタグで、ルビの内容を指定するために用います。
- <rt>~</rt>内が指定されますが、終了タグを省略すると、</ruby> などのタグまでが有効となります。
<RP>タグ
- <ruby>~</ruby> 内で有効なタグで、ブラウザが <ruby> タグに対応していない場合に、その表示をおかしくさせないために用います。
- 未対応のブラウザでは、ルビは単なるテキストとして表示されるので、<rp> タグを使いましょう。
- <rp>~</rp> 内の内容は、<ruby> タグに対応しているブラウザでは表示させず、未対応のブラウザだと表示されます。
- 終了タグを省略すると、</ruby> などのタグまでが有効となります。
ページトップへ
ルビのスタイル、すなわちルビの位置や配置がどのように設定できるかを、「スタイルの設定」ダイアログで見る。
[ルビの位置] ruby-position ルビの位置を指定することができます。
- 上部 (above)
- 横 (INLINE)
- 指定した文字の後ろにルビを付けます。
- (<ruby> 未対応のブラウザーのように表示されます。)
[ルビの配置] ruby-align ルビの配置場所を以下から選択します。
- 自動 (auto)
- 左 (left)
- 中央 (center)
- 右 (right)
- 両端揃え (distribute-letter)
- 均割 (distribute-space)
- 行末での処理変更 (line-edge)
[ルビの表示領域] ruby-overhang ルビの表示領域を以下から選択します。
- はみ出す (auto)
- スペース文字分までははみ出す (whitespace)
- はみ出さない (none)
ページトップへ
ルビを振る作業は、ワードで行うと、まとめて簡単に行うことができます。そこでワードで振ったルビ付のテキストを HTML に取り込むことを考えました。
① ワードでルビを振った文書を作成します。
閲覧上の注意: 左の docx アイコンをクリックすると、ファイルの拡張子が zip になることがあります。その場合は、「保存」 を選択します。保存が完了したら、解凍しないままでそのファイルを右クリックし、「名前の変更」を選択し、拡張子の
zip を docx に変更します。
「名前の変更」 ダイアログボックスが表示され、「拡張子を変更すると、ファイルが使えなくなる可能性があります。変更しますか?」 と出ますので、「はい」
をクリックします。
拡張子を変更したファイルを開くと、Word で表示されます。
docx ファイルをダウンロードしようとすると、拡張子が勝手に zip に変更されてしまう。
docx のファイルの実体は、テキストファイルではなく zip 形式です。zip は複数のフォルダやファイルを一つにまとめて全体のサイズを小さくするファイル形式です。
.docx は文書や画像、動画といった複数のファイルをまとめて内包し、 それを zip 形式で圧縮する形で保存しています。そのフォルダの拡張子を
docx としているだけなのです。docx としておけばその zip ファイルを Word で開き編集できることを意味しています。
このようなことなので、特定な条件下で、ブラウザが勘違いしてしまうようです。対処は上に記述したとおり、名前の変更でファイルの拡張子を変更することです。

② ルビを振ったワード文書を、「Web ページ (フィルター後)」 で、名前を付けて保存します。
HTML 形式で保存する場合には 「Web ページ (*.htm, *.html)」 または 「Web ページ (フィルター後) (*.htm;
*html)」 のどちらかを選択します。どちらの形式も HTML 形式で文書を保存しますが、フィルターを行った場合には Word 固有の情報を除去した後で
HTML 形式で保存します。その為、フィルターを行うと一部の情報が抜け落ちる場合があります。
保存後にあらためて Word で編集を行う場合はフィルタを行わずに保存し、最終的に HTML 文書としてだけ利用する場合にはHTML 形式としては不必要な情報をフィルターして保存します。
単一ファイル Web ページ (MHTML) とは
インライン グラフィックス、アプレット、リンクされた文書、文書内で参照されるその他のアイテムを MHTML 形式で単一のファイルに保存した HTML
文書。
③ ホームページ・ビルダーで HTML ページを開き、ルビ付き文書を挿入する該当場所で、クリックします。
④ 「挿入」 から 「ファイル」 で 「その他ファイル」 をクリックし、挿入するファイルを指定し、「開く」 をクリックします。
⑤ 「ファイルの挿入」 ダイアログボックスが表示されるので、ファイルを挿入する方法で、「HTML ファイルの挿入(ページ内部品のみ)」 にチェックを入れます。
ファイルを挿入する方法を指定します。
[1つのベタ書き段落を作成]
- 読み込んだページ全体がベタ書きの段落内に取り込まれます。ベタ書きなので改行位置やスペースは元の状態のまま保存されますが、構造を持たない1つの大きな段落になります。
[改行位置を保持]
- 読み込んだページ全体が標準の段落内に取り込まれ、元のページの改行位置に明示的な改行を補います。改行位置は元の状態のまま保存されますが、構造を持たない1つの大きな段落になります。
[空行を境に標準段落に分割]
- 読み込んだページ中の空行を境に標準段落に分割して挿入します。元のページの改行位置は保存されません。
[コンマ区切りのデータを表に変換]
- 表計算ソフトなどが出力するコンマ区切りのデータ (CSV) を表に変換して挿入します。
[タブ区切りのデータを表に変換]
- 表計算ソフトなどが出力するタブ区切りのデータを表に変換して挿入します。
[HTML ファイルの挿入 (文書のみ)]
- 他のHTML ファイルのページ内部品をそのまま挿入します。ページ内に貼り付けられている画像ファイルやアプレットなどの関連ファイルはコピーされません。
[HTML ファイルの挿入 (ページ内部品のみ)]
- 他のHTML ファイルを挿入します。ページ内に貼り付けられている画像ファイルやアプレットなどの関連ファイルもコピーされます。ヘッダーに含まれるスタイルシート、ページタイトル、メタ情報などのヘッダー情報や、背景・文字色などはコピーされません。
[HTML ファイルの挿入 (ヘッダー/ページ内部品)]
- 他のHTML ファイルを挿入します。ページ内に貼り付けられている画像ファイルやアプレットなどの関連ファイルもコピーされます。また同時に、ヘッダーに含まれるスタイルシートなどもコピーされます。ただし、ページタイトルや、背景・文字色、メタ情報の一部は無視されます。
⑥ 「OK」 をクリックします。
ルビを振った文字が挿入されます(下記)。
赤い蘇鉄の 実も熟れる頃
加那も年頃 加那も年頃
大島育ち
黒潮黒髪 女身ぬかなしゃ
想い真胸に 想い真胸に
織る島紬
朝は北風 夜は南風
沖の立神 沖の立神
また片瀬波
夜業おさおさ 織る筬の音
せめて通わそ せめて通わそ
この胸添えて
ページトップへ