"ハイブリッドデザイン"と"XHTML" に関する管理人ノート

XHTMLの遵守事項

ソースは全て小文字で記述。
■HTML4.01の<a>タグ（アンカー）に指定するname属性は、XHTML1.1の場合、全てid属性を用いる。
（XHTML1.0を宣言する場合はname属性とid属性を併記）
■属性値は必ず引用符で括る。→　　"　"　
■空要素タグは必ず（半角スペースを挿入し）スラッシュで閉じる。→　　/　
　例　<meta="・・・・・・・" />
　例　<img src="・・・・・・・" />
　例　<br>タグは <br />
■htmlでは省略可能なタグ例えば、<p>や<li>タグなどは終了タグを省略しない。
■インラインスタイルシートの記述に用いるstyle属性は非推奨属性とされ外部CSS設定を推奨。
■<iframe>はHTML4.0、HTML4.01、XHTML1.0またはIE用のタグ。→XHTML1.1ではNG。
　XHTML1.1文法タグ参考文献　>>　Another HTML-lint様　XHTML1.1
■セレクタに対してwidthとpaddingを同時に指定しない。Windows IE6（後方互換モード）対策。
　>>　ADP様　floatレイアウトでつまづかないためのTips

XHTMLの利点

ルビ（ふりがな）が可能・・・ruby要素　（IE＝対応、ネスケ＝非対応）
<ruby>〜</ruby> の中にふりがなを付けたいテキスト部分を
rb要素  <rb>〜</rb> で挟み、
続けてルビ部分を rt要素  <rt>〜</rt> で挟む。
-注-　2011.11.13加筆
ルビテキストのフォントサイズは、通常はベースのフォントサイズの半分である。「ルビ」という名前は、実はイギリスの印刷における 5.5 pt フォントサイズの名前に由来するものであり、これが通常のテキストに一般的に使われる 10pt フォントサイズの約半分なのである。
W3Cワーキングドラフト 1998年12月21日 序章//どら猫本舗さま翻訳より引用
　　▼
<ruby><rb>明後日</rb><rt>あさって</rt></ruby>
■ルビの作例
孔雀草アスター　　蒲公英たんぽぽ　　菖蒲あやめ　　百日紅さるすべり　　女郎花おみなえし　　紫陽花あじさい　　向日葵ひまわり
蒟蒻こんにゃく　　心太ところてん　　大蒜にんにく　　蛤はまぐり　　鳳梨パイナップル　　檸檬レモン　　桜桃サクランボ　　麦酒ビール
欠伸あくび　　嚔くしゃみ　　掌てのひら　　拳こぶし　　眉唾まゆつば　　三位一体さんみいったい
BIOSバイオス　　USBユーエスビー　　Windowsマイクロソフト　　水晶クリスタル　　白金プラチナ
海豚イルカ ・・・ 因みに”入鹿（いるか）”は歴史上の人物　>>　蘇我入鹿そがのいるか
　□応用作例
ふりがなを付けたいテキスト部分・・・CSS設定の呼び出しによる文字強調
ルビ部分・・・フォントサイズ指定・フォントカラー指定および文字間調整
　　▼
It's no use crying over spilt milk.こぼしたミルクを嘆いても仕方がない
という英語の諺があり、日本の諺で「覆水盆に返らず」が同義なそうです。
■ルビを表示しないブラウザへの対応要素・・・rp要素
　（ルビの部分を括弧で書き、その括弧を表示させる要素）
　□作例　>>　一喜一憂(いっきいちゆう)
　　▼ソース表示 （説明の便宜上、記述のポイントを装飾・強調 表示。）
<ruby>
<rb>一喜一憂</rb><rp> ( </rp><rt>いっきいちゆう</rt><rp> ) </rp>
</ruby>
上記作例の場合、IEでは"一喜一憂"の上に"いっきいちゆう"のルビが付いていますが、ネスケでは
一喜一憂（いっきいちゆう）
となります。
"一喜一憂"の後にルビ部分"いっきいちゆう"が括弧で表示されます。
■rbc要素・・・複数のrb要素を包括
　　rtc要素・・・複数のrt要素を包括
　　▼上述"一喜一憂"までの復習作例
覆水盆(ふくすいぼん）に返(かえ）らず
　　▽　ソース表示
<ruby><rb>覆水盆</rb>
<rp>(</rp>
<rt>ふくすいぼん</rt>
<rp>）</rp>
</ruby>に
<ruby><rb>返</rb>
<rp>(</rp>
<rt>かえ</rt>
<rp>）</rp>
</ruby>らず
　　▼rbc要素・rtc要素で包括した作例
覆水盆(ふくすいぼん）に返(かえ）らず
　　▽　ソース表示
<ruby><rbc><rb>覆</rb><rb>水</rb><rb>盆</rb></rbc>
<rp>(</rp>
<rtc><rt>ふく</rt><rt>すい</rt><rt>ぼん</rt></rtc>
<rp>）</rp>
</ruby>に
<ruby><rb>返</rb>
<rp>(</rp>
<rt>かえ</rt>
<rp>）</rp>
</ruby>らず
■ルビの並記・・・rbspan属性
ルビ要素 <rt>〜</rt> を更に追加するときは
<rtc><rt>〜</rt>・・・<rt>〜</rt></rtc>の記述中、
追加ルビに該当する<rt>に rbspan属性を追加記述する。→<rt rbspan="　">
rbspan="　" の数値は、rbc要素内における<rb>〜</rb>の組数の和。
　□作例
ふりがなを付けたいテキスト部分・・・CSS設定よる文字強調
　　▼　一文字ごとにルビ
篝（かがり）火花（びはな）
"篝・かがり"＝単独のルビ
　火・花＝それぞれをrb要素で記述し、全体をrbc要素で包括
　び・ばな＝それぞれをrt要素で記述し、全体をrtc要素で包括
　
　　▼　荒技に挑戦！！　一文字ごとにルビ＋追加ルビ
さん ＋ じゅうく ＋ そう ＋ 【トリオ】
三重奏（さんじゅうそう【トリオ】）
　　▽　ソース表示
下述の<span class="ruby_kana">は予めCSS設定したクラス名称
<ruby>
<rbc>
<rb> <span class="ruby_kana">三 </span> </rb>
<rb> <spanclass="ruby_kana">重 </span> </rb>
<rb> <span class="ruby">奏 </span> </rb>
</rbc>
<rp>（ </rp>
<rtc>
<rt>さん </rt> <rt>じゅう </rt> <rt>そう </rt>
<rt rbspan="3">【トリオ】 </rt>
</rtc>
<rp>） </rp>
</ruby>
■ルビに関する参考文献：Academic HTML様

XHTMLの盲点？

■ネットスケープは<a>タグの訪問済みリンクに
a :hover { font-weight:bold; }
を指定すると、リンクにマウスを近づけたとき、そのリンクテキストが光り出したような現象を引き起こし、マウスを乗せると白い箱形の背景が見え隠れする。
ネスケのバグ？？
初記 2005/09/06　
▲Top
<<　HOME