あなたは ２００２年９月１０日新設以来

人目の訪問者です


HTML-Sample 集


索引はこちら

http://homepage3.nifty.com/takh/index_B.html

はじめに


　ハードディスクに資料が、玉石混淆ながらかなり貯まりました。当初はテキストにしてエディタで見ていました。しかし　テキストの場合、リンクが効かないので、目次を作ってもあまり役に立ちません。それに画像や音も使えません。

　そんなわけで最近は「html」形式で保存するようにしています。これだと使い慣れたエディタで書いたり張り付けたりして、「html」の拡張子を付けるだけです。

　ところが実際にやってみると、タグはうろ覚えだし一々書くのも面倒だし、ということで、コピーアンドペーストのできるサンプル集を作りました。

　せっかく苦労して作ったサンプル集なので、アップしてご披露しようと思います。作成目的が「自分用」なので、中身は中途半端です。タグという言葉も知らないような超初心者には不親切すぎるし、知ってる人には無用の長物ですかネ。

あと、スタイルシート・クリッカブルマップ・Form・CGI・JavaScript など、いろいろありますが、当面使いませんので取り上げていません。勉強して使いこなせるようになったら、追加するかもしれません。

　Windows98SE で作りました。一応 Netscape 4.51 と Internet Explorer 5 で動作確認をしていますが、誤りが無いとは言えません。

興味のない方は、ここから下をご覧にならないでしょうが、せっかくですから、取り敢えず
[18] 音楽 をクリックしてください。ここと同じ赤白文を読んで、一曲聴いてからお帰りください。私の大好きな曲ですが、｢taitai studio｣ さんのアレンジが抜群です。


平田孝之



* ページの背景では、俵屋年彦さんの ｢素材集｣から ｢kumo.gif｣ を使わせていただきました。しかし、色が少し濃いすぎて文字が読みにくいことに気づきました。それで変更しました。好きな背景で気に入っていたのですが残念です。俵屋年彦さん、ありがとうございました。
↑ ｢kumo.gif｣

* 背景色は 「色見本の館」 を参考にしました。ありがとうございます。

* [09] ハイパーリンク：<A HREF=""></A> では ｢G-TOOL｣ さんの ｢piyo.gif｣ を使わせていただきました。ありがとうございます。

* [18] 音楽では｢taitai studio｣ さんのページからドボルザークの交響曲第9番「新世界」第4楽章を使わせていただきました。ありがとうございます。

* [22] ＩＥ「お気に入り」のアイコンでは [よしくん] さんの 「アイコン格納庫」 から 「rasukar2.ico」 を使わせていただきました。ありがとうございます。




[01] 基本構造

<HEAD>
<TITLE>ファイル名又は表題</TITLE>
<SCRIPT></SCRIPT>
<META></META>
<STYLE></STYLE>
</HEAD>
<BODY>

ここに内容記載

</BODY>
</HTML>


[02] <BODY>〜<BODY> 本文

★ バックグラウンドはイメージを使って変化させることができる。 イメージを使えばロード速度は遅くなるが、色を変えるのはロード速度に影響を与えない。
<BODY BACKGROUND="wall.gif">


★ バックグラウンドやテキスト／リンクテキストに色を使って変化させることができる。
<BODY BGCOLOR="White" TEXT=#604535 LINK=#FF8080 ALINK=#F00030 VLINK=#8080FF>

16進数で指定する場合は、先頭にシャープ(#)記号をつける。色の名称で指定する場合は、色名をダブルクォーテーション(")で囲む。

LINK ⇒ リンクする以前のリンクテキスト
ALINK ⇒ リンクした瞬間のリンクテキスト
VLINK ⇒ 既にリンクしたことがあるリンクテキスト

[03] コメントタグ：<!--,-->

ブラウザはコメント部分を無視し表示しない。コメントは一行に記載し、複数行にわたらない。
<!-- ここにコメントを記述 -->


[04] 改行タグ(line BReak)：<BR>

この改行タグは行間に余分なス ペースを入れずに強制的に改行する。また、タグを書いた回数だけ改行される。
<BR>


[05] 段落タグ(Paragraph)：<P>

段落を行い、行間にスペースが挿入される。段落の最後に<P>タグを付けれ ば、段落分けされる。
<P>

<P ALIGN=left>左寄せの段落</P>
<P ALIGN=center>中央寄せの段落</P>
<P ALIGN=right>右寄せの段落</P>


[06] 水平線タグ(Horizontal Rule)：<HR>

<HR WIDTH=40%> / <HR WIDTH=60>
⇒ 線の長さを変える

<HR SIZE=4>
⇒ 線の太さを変える(デフォルト値は2 / 上限:100)

<HR NOSHADE> ⇒ 黒いラインにする


★ 水平ラインの左・右・中央寄せの属性にはALIGNを使う。デフォルトは中央。
<HR ALIGN="left"> ⇒ 左寄せ
<HR ALIGN="center"> ⇒ 中央
<HR ALIGN="right"> ⇒ 右寄せ


[07] プレフォーマットタグ(Preformatted text)：<PRE></PRE>

空白やタブ、改行、空行などを正確に表示する。
<PRE>
〜
</PRE>


[08] 段落整列タグ：<DIV>

指定した位置に段落を整列させる。
<DIV ALIGN="left"></DIV> ⇒ 左寄せ
<DIV ALIGN="center"></DIV> ⇒ 中央揃え
<DIV ALIGN="right"></DIV> ⇒ 右寄せ

中央表示：<CENTER>〜</CENTER>

中央表示


[09] ハイパーリンク：<A HREF=""></A>

★ アンカーリンク
<A HREF=""></A>

★ 画像を使ってリンク
<A HREF=""><IMG SRC="画像ファイル名.gif"></A>

★ 画像リンクの枠
リンクする画像を囲んだ枠の太さを変えることもできる。

<A HREF="url"> <IMG SRC="file name" BORDER="option"></A>
option=pix

このoptionの数字を変えれば枠の太さが変わる。またこの数字を０にすると枠は消える。


☆ 普通のリンク枠
<A HREF="link.html"><IMG SRC="piyo.gif"></A>

☆ ボーダー１０のリンク枠
<A HREF="link.html"><IMG SRC="piyo.gif" BORDER="10"></A>

☆ ボーダー０のリンク枠
<A HREF="link.html"><IMG SRC="piyo.gif" BORDER="0"></A>

★ 特定の場所へリンク。
☆ 移動したい場所に「<A NAME="ラベル名 "></A>」を記述しておく。
<A NAME=""></A>
☆ <A HREF="#ラベル名">同一文書内で、「ラベル名」に移動</a>
<A HREF="#"></A>
☆ <A HREF="B.html#ラベル名">「B.html」の「ラベル名」に移動</A>

★ 属性［<A HREF="..." TARGET=*****>］
［HREF="..."］の内容をどのウィンドウ（フレーム）に表示するかを指定する。
ターゲット名はアルファベットから始まらなければならない。そうでない場合は、ブラウザに無視される。

以下の４つのターゲット名は予約されていて、特別な意味がある。

・<A HREF="..."　TARGET=_blank>
　 ⇒ 毎回新しい名前の無いウインドウに表示

・<A HREF="..."　TARGET=_self>
　 ⇒ 元のドキュメントと同じウィンドウ（フレーム）に表示(TARGET 無指定の場合も同じ)

・<A HREF="..."　TARGET=_top>
　 ⇒ すでにあるフレームをすべて解除して、ウインドウいっぱいに表示。親フレームが無い場合には、「_self」と同じ

・<A HREF="..."　TARGET=_parent>
　 ⇒ 現在のフレームの親フレームに表示。親フレームが無い場合には、「_self」と同じ


[10] 文字の修飾

タグ語源見本
<B></B>Bold太字で表示
<I></I>Italic斜体で表示
<U></U>Underlineアンダーライン
<S></S>Strikethrough打ち消し線
<TT></TT>Fixed Width Typewriter等幅文字 HIW
<SUB></SUB>Subscript下付きの文字下付きの文字
<SUP></SUP>Superscript上付きの文字上付きの文字

文字が点滅：<BLINK>〜</BLINK>、Netscape 独自の拡張タグ

<BLINK>文字が点滅します</BLINK>

Netscape では、下の文字が点滅して見える。Internet Explorer では無視される。

「文字が点滅します」

文字の大きさと色を決める
：<FONT SIZE= COLOR= ></FONT>

<FONT SIZE=6 COLOR=#0000FF></FONT>

文字の大きさと色を決める

文字サイズを指定していないときの基本サイズを指定する。
この場合に、文中でサイズを変えたい文字があったら下のタグで囲む。基本サイズとの差のプラスマイナスを書く。
<BASEFONT SIZE=n>
<FONT SIZE=+/- n>...</FONT>
<BASEFONT SIZE=2>
BASE SIZE<BR>
<FONT SIZE=+2>+2 SIZE</FONT><BR>
<FONT SIZE=-1>-1 SIZE</FONT>

文字のフォントを指定するには、<BODY>　</BODY> の間に、<FONT face="フォント名">〜</FONT>　を挿入する。
フォント名の部分に使いたいフォントの名前を記入し、〜の部分には、指定されたフォントで表記されたい文面を記入する。
フォント名を指定する場合、全角半角、大文字小文字の全てを正しく記入しなければならない。また、フォント名にスペースが入る場合は半角のスペースを入れる。

例えば、ＭＳ Ｐ明朝だと、ＭＳとＰとは全角の大文字アルファベットで記入し、間に入っているスペースは半角のスペースを入れる。また、Comic Sans MS などの欧文フォントは全ての文字とスペースとを半角で記入する。

せっかくフォントを指定しても、ページ閲覧者の環境によっては、こちらの指定したフォントが無い場合もある。このような場合には、フォント指定は無視され、通常のフォントで表示される。
だが、フォント名とフォント名の間にカンマ （ , ） を付けて複数のフォントを指定すれば、一つ目のフォントがない場合には二つ目のフォントで、というように指定できまる。だから、フォント名を複数記入しておけば、いろいろな環境下で自分の思った通りのフォントで見てもらうことができる。
<BODY>
<FONT face="ＭＳ Ｐゴシック" size="6">HGP行書体,ＭＳ Ｐゴシック</FONT>
</BODY>


[11] 章(ヘッディング)：<H></H>

★ 太字フォントで表示され、下に改行が入る。

★ 1〜6 まで文字の大きさをきめる。
<H6>最小サイズ</H6>
<H1>最大サイズ</H1>

★ 位置を決める。
<H4 ALIGN=LEFT>左寄せの見出し</H4>
<H4 ALIGN=CENTER>中央寄せの見出し</H4>
<H4 ALIGN=RIGHT>右寄せの見出し</H4>


[12] 色名表と色指定

色名表
Black
#000000		 Olive
#808000		 Teal
#008080		 Red
#ff0000		 Blue
#0000ff		 Maroon
#800000
Navy
#000080		 Gray
#808080		 Lime
#00ff00		 Fuchsia
#ff00ff		 White
#ffffff		 Green
#008000
Purple
#800080		 Silver
#c0c0c0		 Yellow
#ffff00		 Aqua
#00ffff		 - -

☆ 詳細は[色名表（ＡＢＣ順）] へ

☆ 背景と文字との色の調和テストは[背景とテキストのカラーサンプル] へ


☆ 推奨 「本格的な色見本」 は 「色見本の館」 へ


☆ 色の指定方法 HTML で色を指定するには、以下のようにする。

指定する場所方　　　法
ブラウザの背景色<BODY BGCOLOR= ...>
テキスト全体<BODY TEXT= ...>
ハイパーリンク<BODY LINK= ...>
アクセス済みハイパーリンク<BODY VLINK= ...>
アクセス中のハイパーリンク<BODY ALINK= ...>
本文内のテキスト<FONT COLOR= ...>
表のデータセル<TD | TH BGCOLOR= ...>
表の罫線<TABLE BORDERCOLOR= ...>
<TABLE BORDERCOLORRIGHT= ...>
<TABLE BORDERCOLORLEFT= ...>
マーキー<MARQUEE BGCOLOR= ...>


［出典］http://w3.lab.kdd.co.jp/technotes/WWW/index.html 97.09.11 (02.08.28 時点閉鎖)


[13] ホームページ独自情報：<META>

<HEAD>〜</HEAD>のヘッダ部に記述する。
文書の著者を明示：
<META NAME="Author" CONTENT="Tohoho">

関連キーワードを指定し、検索ロボットの検索支援：
<META name="keywords" lang="ja" content="HTML,htm,ホームページ,タグ,見本,サンプル,色,色名">

10秒後にURL=...で指定したURLにジャンプ。ホームページの移動の際などに使用：
<META HTTP-EQUIV="Refresh" CONTENT="10;URL=http://xyz.com/">

漢字コードがシフトJISであることを宣言：
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=x-sjis">
EUC の場合は x-euc-jp、 JIS の場合は iso-2022-jp を指定。ブラウザ表示での文字化け防止。


[14] アドレス：<ADDRESS></ADDRESS>

<ADDRESS></ADDRESS> を使うとアドレスが斜体表示される。
「mailto:」を使うと、クリック時にメーラーが起動。

<ADDRESS>
<A HREF="mailto:yd8t-hrt@asahi-net.or.jp">
MAIL:yd8t-hrt@asahi-net.or.jp</A>
</ADDRESS>
MAIL:yd8t-hrt@asahi-net.or.jp


[15] 箇条書き

☆ 番号有り無し箇条書き
ソース結　果ソース結　果
<UL>
<LI>黒丸　あい
<LI>黒丸　かき
</UL>
  • 黒丸　あい
  • 黒丸　かき
<OL>
<LI>あいう
<LI>かきく
</OL>
  1. あいう
  2. かきく

「<UL TYPE=circle / =square>」で各項目の前に「白丸」「黒四角」が付く。

「<OL TYPE=A / =a / =I / =i>」で各項目の前に「A」、「a」、「I」、「i」 などが付く。

「<UL></UL>」 のデフォルト(「TYPE=」 無指定)は「黒丸」

「<OL><OL>」 のデフォルトは(「TYPE=」 無指定)は「１、２、３、」


☆ 定義リスト
ソース結　果
<DL>
<DT>四面楚歌
<DD>周囲を敵に包囲された状態。
<DT>面従腹背
<DD>表面的には従っていて、実際は背くこと。
</DL>
四面楚歌
周囲を敵に包囲された状態。
面従腹背
表面的には従っていて、実際は背くこと。


詳細は、[Kajo.html]へ


[18] 音楽

Netscape には LiveAudio というプラグインソフトが導入されている。LiveAudio は MIDIの他、WAVE、 AU、 AIFF といったサウンドファイルも再生できる。Netscape からこれらのファイルを直接指定すると LiveAudio で再生を始める。

Internet Explorer では Windows Media Player が起動して再生する。


<embed src="">表　示
<embed src="biz_menu.mid" width=144 height=60 loop="false" autostart="false">

右のスタート矢印をクリックすると、｢taitai studio｣ さんで頂いた 【ドボルザークの交響曲第9番「新世界」第4楽章】 が聞こえます。

☆ このタグは Netscape 、 Internet Explorer 双方対応。
☆ 自動的に演奏を開始は「autostart="true"」、「="false"」は開始しない。

☆ 反復再生は「loop="true"」、「=数字」は反復回数。「="false"」は反復しない。
☆ LiveAudio の画像をフルサイズ表示するには、「width=144 height=60」が必要。

☆ 「hidden=true」 ⇒ コントローラーを表示しない。


<bgsound src="001.mid"> ⇒ IE Internet Explorer 専用で Netscape は無視する。

<bgsound src="001.mid" LOOP=数字> ⇒ 再生する回数を指定。
LOOP=INFINITE ⇒ 無限再生繰り返し。


[20] 特殊文字

HTML はテキストファイルなので、文字によってはタグと誤解されてしう。また、キーボードにない文字を使いたい場合もある。例えば、「 < 」 をタグの一部でなく不等号として記述したいときや、「 ±」 を使いたいときなどである。
さらに、タグと誤解される心配はないしキーボードにも存在する文字ではあるが、ロボットがメールアドレスを収集するのを阻害するために、メールアドレスを記号化する必要がある。これらの場合に 「特殊文字」 が使用される。

それらの文字は「特殊文字」として記号化されている。

　&　⇒　&amp; 　<　⇒　&lt; 　>　⇒　&gt; 　"　⇒　&quot;
　¢　⇒　&cent; 　£　⇒　&pound; 　§　⇒　&sect; 　©　⇒　&copy;
　°　⇒　&deg; 　±　⇒　&plusmn; 　¶　⇒　&para; 半角空白　⇒　&nbsp
　@　⇒　&#64; 　™　⇒　&trade; 　µ　⇒　&micro; 　∑　⇒　&sum;

　A　⇒　&#65; 　B　⇒　&#66; 　C　⇒　&#67; 　D　⇒　&#68; 　E　⇒　&#69;
　a　⇒　&#97; 　b　⇒　&#98; 　c　⇒　&#99; 　d　⇒　&#100; 　e　⇒　&#101;
　F　⇒　&#70; 　G　⇒　&#71; 　H　⇒　&#72; 　I　⇒　&#73; 　J　⇒　&#74;
　f　⇒　&#102; 　g　⇒　&#103; 　h　⇒　&#104; 　i　⇒　&#105; 　j　⇒　&#106;
　K　⇒　&#75; 　L　⇒　&#76; 　M　⇒　&#77; 　N　⇒　&#78; 　O　⇒　&#79;
　k　⇒　&#107; 　l　⇒　&#108; 　m　⇒　&#109; 　n　⇒　&#110; 　o　⇒　&#111;
　P　⇒　&#80; 　Q　⇒　&#81; 　R　⇒　&#82; 　S　⇒　&#83; 　T　⇒　&#84;
　p　⇒　&#112; 　q　⇒　&#113; 　r　⇒　&#114; 　s　⇒　&#115; 　t　⇒　&#116;
　U　⇒　&#85; 　V　⇒　&#86; 　W　⇒　&#87; 　X　⇒　&#88; 　Y　⇒　&#89;
　u　⇒　&#117; 　v　⇒　&#118; 　w　⇒　&#119; 　x　⇒　&#120; 　y　⇒　&#121;
　Z　⇒　&#90; 　z　⇒　&#122;


　0　⇒　&#48; 　1　⇒　&#49; 　2　⇒　&#50; 　3　⇒　&#51; 　4　⇒　&#52;
　5　⇒　&#53; 　6　⇒　&#54; 　7　⇒　&#55; 　8　⇒　&#56; 　9　⇒　&#57;

　下線 _　⇒　&#95; 　ハイフン -　⇒　&#45; 　ドット .　⇒　&#46;

　a の１乗 （ a¹ ） ⇒ 「 a&sup1; 」 または （ a&#185; ）
　a の２乗 （ a² ） ⇒ 「 a&sup2; 」 または （ a&#178; ）
　a の３乗 （ a³ ） ⇒ 「 a&sup3; 」 または （ a&#179; ）
　中塗りハートマーク ♥ ⇒ 「 &hearts; 」 または （ &#9829; ）
　中抜きハートマーク ♡ ⇒ 「 &#9825; 」

ハートマークも HTML 上の 「特殊文字」 なので、色やサイズを指定できる。

ピンクハート ♥ ⇒ <FONT SIZE=6 COLOR=pink>&hearts; </FONT>
緑色中抜きハート ♡ ⇒ <FONT SIZE=6 COLOR=green >&#9825;</FONT>

[21] 空白を作る



☆ 半角でスペース・キーを押した場合、押し下げ回数に関係なく、空白は半角一個分しかできない。連続半角スペースは、この方法ではできない。

☆ 全角でスペース・キーを押した場合、押し下げ回数分だけ全角空白ができる。

あ 左半角３個、右半角５個(結果は各半角空白一個) 空白
あ　　　左全角３個、右全角８個　　　　　　　　空白

Internet Explorer と Netscape 共用
｢&nbsp｣ が半角一文字分のスペースを作る。必要な空白の長さ分だけ ｢&nbsp｣ を記述する。

右に半角五個分のスペースを作る。     五個分のスペース。
このように 「 &nbsp; 」 （＝「 non-breaking space 」 の略） を使うと、意図的に半角スペースを連続して挿入することができる。

ソース説　　　明見え方
Ａ&thinsp;ＢＡとＢとの間に半角より細めの空白Ａ Ｂ
Ａ&nbsp;ＢＡとＢとの間に半角の空白Ａ Ｂ
Ａ&ensp;ＢＡとＢとの間に半角よりやや広い空白Ａ Ｂ
Ａ&emsp;ＢＡとＢとの間に半角の２倍の空白Ａ Ｂ
上記以外のスペース （空白文字）

ただし、「 &emsp; 」 以外は、等幅フォントで表示させるとすべて同じ空白量になる。

HTML では、文章がウインドウの端やボックスの端に達すると、自動的に改行されるが、英語の場合は、英単語の途中ではなく、単語単位で改行される。英単語の区切りは 「スペース （空白文字） 」 なので、直前の空白文字の位置で改行することになる。
ところが、「 &nbsp; 」 は、「 nb 」 が 「 non-breaking 」の略であることからも判る通り、この位置での自動改行はされない。このように、「 &nbsp; 」 は空白量が通常のスペース （空白文字） と同じだが、表示領域の端に達したときの改行動作に違いが生じる。
なお、「 &nbsp; 」 以外の空白文字 （ &ensp; や &emsp; など） は、普通の空白と同じように自動改行の対象となっている。

Netscape 専用
右に５０ピクセルの空白<SPACER SIZE=50>左に５０ピクセルの空白

右に５０ピクセルの空白左に５０ピクセルの空白



[22] ＩＥ 「お気に入り」 のアイコン

URL を Internet Explorer の 「お気に入り」 に加えると、その URL に小さい青のｅマークが付いて 「お気に入り」 に保存されるが、そのマークが

、 、 、 のように、

そのサイトのロゴやサービス名をイメージする専用の絵柄に置き代わることがある。

このアイコンを設置する方法は、タグの 「HEAD」 と 「/HEAD」の間に以下の１行を挿入する。

<LINK REL="SHORTCUT ICON" href="favicon.ico">

「favicon.ico」は表示したい小さな画像 ［jpg 、 bmp 、 ico など］ を使う。

[24] インラインフレーム：<IFRAME></IFRAME>

インラインフレームは情報を処理するための独立したレイアウトの手段で、普通のフレームとは違う機能を持っている。それは画面を分割するためのものではなく、HTML ファイルの中の画像の領域と似たようなもので、HTML ファイルなどほかのソースをその中に表示できる。
特徴は、更新の煩雑さなどから別ファイルにしてメインのページの編集を避けたり、デザイン面でもコンパクトにまとめることができる点だが、サンプルの現物を見ればわかりやすい。 Web ブラウザがインラインフレームを理解しない場合に備えて、開始タグ <IFRAME> と、閉じタグ </IFRAME> の間にテキストやほかの要素を記述することができる。



上記のソース
<center> <IFRAME src="Iframe_Sample.html" width="60%" height="90" name="Iframe_Sample"><p>現在ご使用のブラウザーではインラインフレームを表示することができません。インラインフレームのページは以下のリンクで見ることができます。 <a href="Iframe_Sample.html">Iframe_Sample</a></p></IFRAME>

詳しくは 「インラインフレーム」のページへ

[25] ブログに動画を貼り付ける

外国産の YouTube や国産ではＮＴＴが運営している ClipLife など、動画を投稿できる Web サイトが出現して、投稿が激増している。一方、従来のホームページからブログへと、ユーザーの好みも変化してきている。このような背景の中で、ブログに動画を貼り付ける要求が増えてきた。

やり方は簡単で、ビデオカメラやデジタルカメラのビデオ撮影機能で、動画を撮影してその動画ファイルをパソコンに転送し、自分のホームページやブログにアップロードすればよい。しかし、一般的に動画ファイルは、文字や音声のファイルに比べてサイズが圧倒的に大きく、プロバイダ側の容量制限などがあって、ホームページやブログにファイル自体を添付するのは難しい。

そこで、上記の YouTube や ClipLife などの動画共有サイトに動画をアップロードして、それを自分のサイトに貼り付ければ、ファイルサイズを気にせず気軽にブログに動画を貼り付けることができる。
動画共有サイトにアップロードされた動画の右か下に 「引用タグ」、「リンクタグ」 又は 「 URL 」、「 Embed 」 というのがあるので、この 「リンクタグ」 又は 「 Embed 」 に記載されているコードをコピーして、自分のブログの本文欄に貼り付ければ完了する。

[26] ルビを付加する

ルビを振るには XHTML の文法で定義されている ruby 要素などのルビに関する要素を使う。この要素は、HTML では定義されていないが、HTML 中で使っても Internet Explorer 5.0以降なら表示される。

ルビを表示するには、以下に示す ruby 要素・rb 要素・rt 要素・rp 要素の４要素を使う。

  • ruby 要素 （ <ruby>〜</ruby> ） ：ルビ全体を ruby タグで囲む。

  • rb 要素 （ <rb>〜</rb> ） ：漢字などルビを振られる側の文字を rb タグで囲む。「 rb 」 は 「 Ruby Base 」の意味でベースになる文字を示す。

  • rt 要素 （ <rt>〜</rt> ） ：フリガナなどのルビ本体文字を rt タグで囲む。「 rt 」 は 「 Ruby Text 」 の意味でルビ文字そのものを指す。

  • rp 要素 （ <rp>〜</rp> ） ：ルビ対応ブラウザでは無視される要素だが、ルビ表示に非対応のブラウザ用に、「カッコ」 を記述するための要素。ここにカッコ記号を記述しておくことで、非対応ブラウザにのみカッコを表示させる。
    《　》 や ［　］ など、何でも構わない。なお、「 rp 」 は 「 Ruby Parenthesis 」 の意味でカッコを指す。
ソース対応ブラウザ非対応ブラウザ
<ruby>
<rb>四面楚歌</rb>
<rp>（</rp>
<rt>しめんそか</rt>
<rp>）</rp>
</ruby>
 四面楚歌 （ しめんそか ） 四面楚歌 （しめんそか）



ご意見、ご要望は下記へ
MAIL:

Copyright 2002 平田孝之 All Rights Reserved.