ホームページできるかな/超初心者さん向きHP作成
Web dekirukana.net
サイトメニュー >> ホームページのデザインテンプレートをダウンロードできるサイト
トップページ
HPのはてな?
HPはどこにある?
HPのなかみ
HTMLって?
相対・絶対パス
つくってみよう!
用意するもの
作成手順
HP用素材
基本の小技集
HPを公開!
もっと知ろう!
タグのプレビュー
いろいろな色
特殊文字
記号のよみかた
PCコラム
メール
メールフォーム BBS
掲示板

リンク
リンクについて
お役立ちリンク
自動相互リンク
レンタルサーバー
プロバイダー
広告でおこづかい
参考文献
【クリック募金】


【ウィルス対策】
Click Here!

【HTMLタグ】
みんなのタグ辞書
TAG <index>

【PCトラブル】
Windows.FAQ

【ランキング】
206 Web Ranking
ホームページの情報屋さん

【P R】


Click Here!

Click Here!



文字(フォント)

> タグの簡易テスト(別窓)
| 改行 | 段落 | そのまま表示 | 大きさ | 装飾・色 | 動く文字 | 読み仮名 | 上、下付文字 |
| 縦書き | リスト | 文字化け防止 | コメント | コメント(非表示) |

読み仮名<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>
表示 記述
a2 a<sup>2</sup>
上付文字にしたいものを<sup>〜</sup>で囲みます。

■下付文字<sub>
表示 記述
H2O H<sub>2</sub>O
下付文字にしたいものを<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>
縦書きではなく、横書きのまま右から左へ書くこともできます。
ヘブライ語圏の方以外使い道なさそう・・・。あとは秘密日記?とか

このページのトップへ
BACK HOME
ホームページできるかな
相対パス・絶対パス HTMLって? ホームページのなかみ ホームページはどこにある? 作成手順 作成サンプル 用意するもの ホームページ用素材 HPを公開!FFFTP 基本の小技集 コラム 特殊文字 記号のよみかた いろいろな色 タグの簡易プレビュー
Copyright(C) 2003-2005 laz All rights reserved.
当サイト内の無断使用及び無断転載を固く禁じます。