 
【クリック募金】
【ウィルス対策】

【HTMLタグ】
【PCトラブル】
【ランキング】
【P R】





|
文字(フォント)
タグの簡易テスト(別窓)
| 改行 | 段落
| そのまま表示 | 大きさ
| 装飾・色 |
動く文字 | 読み仮名
| 上、下付文字 |
| 縦書き | リスト
| 文字化け防止 | コメント
| コメント(非表示) |
読み仮名<ruby>
| 基本 | IE5以上以外 | 応用 |
難しい漢字や特殊な読み方の地名など、「読み仮名は付かないのかな〜」と思ったことはないでしょうか。わたしはしょっちゅうです(笑)。これも一手間かければ出来ちゃいます。
■基本
| 表示 |
記述 |
| 薔薇
|
<ruby>薔薇<rt>バラ</rt></ruby> |
まず、読み仮名をつけたい文字を<ruby>〜</ruby>で囲みます。そしてその中に<rt>〜</rt>で囲んだ読み仮名自体をいれ、入れ子にします。IE(インターネットエクスプローラー)5以上のブラウザでしたらこれだけでOKです。<ruby>で囲んだ文字の上に<rt>で指定した読み仮名が表示されます。
ただ、IE以外やIE5以前のブラウザですと、読み仮名として表示されず「薔薇バラ」になってしまいます。
■IE5以上以外
| 表示 |
記述 |
| 薔薇
|
<ruby>薔薇<rp>(</rp><rt>バラ</rt><rp>)</rp></ruby>
|
IE5以上以外のブラウザは、どうがんばっても読み仮名は表示されません。そこで()や<>など、読み仮名と分かるように記号を入れることができます。この記号部分は<rp>〜</rp>で囲みます。カッコ始まりとカッコ終わり、どちらも<rp>〜</rp>で囲み、またそれを<ruby>〜</ruby>の中、<rt>読み仮名</rt>の前後に配置させます。
↓色を付けるとこんなかんじです。
<ruby>薔薇 <rp>(</rp> <rt>バラ</rt> <rp>)</rp> </ruby>
すると、IE5以上以外のブラウザでは「薔薇(バラ)」と表示されます。記号の指定次第で「薔薇<バラ>」、「薔薇-rose-」というふうにもできます。
IE5以上のブラウザではカッコは無視され、読み仮名のみ表示されます。
■応用
| 表示 |
記述 |
| 薔薇の華
|
<ruby>薔薇<rp>(</rp><rt>バラ</rt><rp>)</rp></ruby>
の
<ruby>華<rp>(</rp><rt>はな</rt><rp>)</rp></ruby> |
応用というか、一つの文章内に読み仮名をつけたい文字が複数あった場合の記述です。ひとつひとつ<ruby>〜</ruby>で囲まなくてはなりません。そうしないとこんなことに・・・
| 表示 |
記述 |
| 薔薇の華
|
<ruby>薔薇<rp>(</rp><rt>バラ</rt><rp>)</rp>
の
華<rp>(</rp><rt>はな</rt><rp>)</rp></ruby>
|
<ruby>は、難しい漢字のハンドルネームをお持ちの方が自己紹介欄などに使用すると、とてもスマートだと思いますよ。
このページのトップへ
上、下付文字
化学式や数式をブラウザで正しく表示させたい時に。
| 上付文字 | 下付文字 |
■上付文字<sup>
上付文字にしたいものを<sup>〜</sup>で囲みます。
■下付文字<sub>
下付文字にしたいものを<sub>〜</sub>で囲みます。
このページのトップへ
文字表記
| 縦書き | 右から左へ |
■縦書き
日本人なんだからHPも縦書きにしたい!という方はスタイルシートを使いましょう。IE5.5以上のブラウザで表示されます(それ以外のブラウザは横書きのまま)。
スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。
<html>
<head>
<title> </title>
☆スタイルシートはこの部分に記述します☆
</head>
<body>
</body>
</html>
| 記述 |
表示 |
<style type="text/css">
<!--
td { writing-mode: tb-rl }
-->
</style>
|
日本人なんだからHPも縦書きにしたい!という方はスタイルシートを使いましょう。IE5.5以上のブラウザで表示されます(それ以外のブラウザは横書きのまま)。
スタイルシートは<body>〜</body>の表示部分とは別に、<head>〜</head>内に記述して使います。すると<body>〜</body>の表示部分は何もしなくてもよく、ページ全体にスタイルシートの内容が適用されます。 |
この場合は<td>(テーブルのセルの中)に縦書きのスタイルシートを適用しています。
■右から左へ
横書きのまま右から左へ書くこともできます。
| 記述 |
表示 |
<bdo dir="rtl">文字</bdo>
|
縦書きではなく、横書きのまま右から左へ書くこともできます。 |
ヘブライ語圏の方以外使い道なさそう・・・。あとは秘密日記?とか
このページのトップへ
|