忍者ブログ

DATE : 2017/05/25 (Thu)
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


DATE : 2006/07/16 (Sun)

ブログを巡回していて興味深い話があったので、ここにメモしておきます。

XHTML 1.0の仕様書(邦訳)を眺めてみると、「4.8 スクリプト要素およびスタイル要素」の項目に、スクリプトは CDATA として記述しなければならないという内容が書かれています。ここで、CDATA とは、簡単言えば文書中の文字列のことを言います。なお、XHTML 文書は PCDATA であり、これはブラウザの解析対象になる CDATA のことを言います。

つまり、PCDATA として記述しなければいけないところに CDATA の記述をそのまま混ぜると、スクリプト中にある「<」などの文字をブラウザが XHTML として処理してしまう恐れがあるというわけです。

上の仕様の中では、スクリプトを次のように記述するように勧告されています。

<script>
<![CDATA[
    // スクリプトの内容
]]>
</script>

「<![CDATA[ ... ]]>」で囲むことで、スクリプトを CDATA として記述しています。

実際には、次のように CDATA 宣言はコメントアウトします。(例は JavaScript の場合)

<script type="text/javascript">
// <![CDATA[
    // スクリプトの内容
// ]]>
</script>

script 要素の中身はスクリプトエンジンに解析されてしまいます。そのため、CDATA 宣言があると文法エラーになる場合があります。

CDATA の宣言なしで標準にあったスクリプトを書くには、「<」の部分を「\<」とエスケープするなどの方法があるようです。

また、XHTML 1.0 の仕様の「C.4 埋め込みスタイルシート及びスクリプト」では、XHTML の解析対象となっている文字が含まれる場合は外部スクリプトにするという勧告がなされています。具体的には、「<」・「]]>」・「--」が該当するようです。

XHTML に対応していないブラウザへの互換性も考えると、CDATA 宣言でスクリプトを記述するよりも、「<」・「]]>」・「--」が含まれている場合は外部スクリプトにした方が良いかもしれません。

もっとも私の場合は、面倒臭いので全部外部スクリプトにしようと思います。( ´ー`)コーディング時は、XHTML に埋め込みますが

ネタ元

PR

DATE : 2006/07/14 (Fri)

HTML 4 の仕様書(邦訳)の「18.2.4 文書の動的変更」の項目を見ると、「すべての SCRIPT要素は、文書が読み込まれる際の順番で評価される」そうです。

最近、Ajax などで HTML を動的に差し替える場合も多いのですが、その場合は script 要素は操作対象になる HTML 要素の最後に置かなければなりません。

具体的には、次のようにします。

(略)
<body>
    <!-- ページの HTML 要素 -->
    <!-- ページの HTML を操作する script 要素 -->
</body>

上の順序が逆になると、うまく動作しません。

ちなみに、私は上の順序を逆にしていて痛い目にあいました。現在常用しているブラウザは Firefox なのですが、 Firefox では順序が逆でも動作してくれるんですよね……。そのため、Internet Explorer ではうまく動作してくれず、上の仕様が分かるまでかなり時間がかかってしまいました orz

(;^ω^)ま、怪しいところは仕様書をちゃんとチェックしましょう……ということで。


DATE : 2006/04/05 (Wed)

XHTML 1.1 から導入された「ルビ付注(Ruby Annotation)」を使用すると、語句にルビを振ることができます。

例えば、「蜜柑」という語句に読み仮名を振る場合は、以下のようにします。

<ruby><rb>蜜柑</rb><rp>(</rp><rt>みかん</rt><rp>)</rp></ruby>

「蜜柑(みかん)」の要所要所をタグで挟み込む形になります。

なお、上のマーク付けは見づらいので、次のように構造を整理してみました。

  • <ruby>
    • <rb>(ルビを振る語句)</rb>
    • <rp>(ルビ付注に対応しないブラウザのために表示する開きカッコ)</rp>
    • <rt>(ルビ)</rt>
    • <rp>(ルビ付注に対応しないブラウザのために表示する閉じカッコ)</rp>
  • </ruby>

rb は「ruby base」、rt は「ruby text」、rp は「ruby parenthesis」の略です。

このマーク付けを表示すると、次のようになります。

蜜柑みかん

残念ながら、現在のところ、ルビを表示できるブラウザはわずかです。(少なくとも、 Internet Explorer は表示できますが、 Mozilla 系ブラウザでは表示できません)

ルビ付注の表示方法については、「CSS3 Ruby Module」(英語)で定義されています。しかし、現時点では「勧告候補」の状態です。

正式に勧告されていないために、 XHTML 1.1に対応しているブラウザでもルビ付注の表示には対応できないわけです。(Internet Explorer は、XHTML とは別に、独自に対応しています)

ちなみに、ルビ付注の仕様書では、上の例のようなマーク付けを「単純ルビマーク付け(Simple ruby markup)」と呼んでいます。

他に、「複雑ルビマーク付け(Complex ruby markup)」というマーク付けもあります。複雑ルビマーク付けでは、ルビを振る語句を細かく指定できます。

ただし、複雑ルビマーク付けでは、rp 要素がありません。また、その代わりとなるような、ルビ付注に対応していないブラウザへの救済措置がありません。(CSS を使えば対応できますが、少々骨が折れそうです)

そのためこの記事では、複雑ルビマーク付けは扱わないことにしました。

(;´∀`)必要に迫られれば書くかもしれませんが

参考文献


DATE : 2006/04/04 (Tue)

便利なアクセスキー

Windows アプリケーションで Alt + F キーを押すと、たいていの場合、ファイルメニューが開きます。いわゆるショートカットキーです。

ウェブページにも、ショートカットキーを付けることができます(HTML 4.01 仕様書 では、「アクセスキー」と呼んでいます) 。アクセスキーをつけると、特定のキーを押すだけでリンクを辿らせたり、ボタンを押したり、テキストボックスなどにカーソルを移動させたりできます。

また、ウェブページのアクセシビリティについての指針を定めたHTML Techniques for WCAG 2.0 (2005/06/30草案、英語)の9.9節でも、リンクにアクセスキーを設定することを推奨しています。

アクセスキーの設定の仕方

具体的には、次のように accesskey 属性を付けます。

<a href="index.html" accesskey="T">トップページへ</a>

この例では、トップページへのリンクに「T」というアクセスキーを付けました。この HTML が書かれているウェブページであれば、T のアクセスキーを押すと、トップページへ移動します。(なお、アクセスキーの実行の仕方は、OS によって異なっています。Windows であれば Alt キーを押しながらアクセスキーを押します)

なお、accesskey 属性を設定できる要素は以下の通りです。

  • a
  • area
  • button
  • input
  • label
  • legend
  • textarea

不便なアクセスキー

反面、アクセスキーには問題点もあります。

まず、アクセスキーを設定したとしても、その存在が利用者に分からなければ利用してもらえません。

そして最大の問題点は、ブラウザのショートカットキーと重複してしまう場合があることです。上の例であれば、Windows アプリケーションのメニューとして一般的なツールメニューと重複します。アクセスキーとショートカットキーが重複した場合の動作は不明です。(Internet Explorer などでは、アクセスキーの方が優先されるようです)

個人的な感想

個人的には、アクセスキーを導入するのはしばらく待ちにしようと思っています。

アクセスキーの統一的な指針ができれば、問題なく導入できるのですが。

参考文献


DATE : 2006/04/04 (Tue)

HTML 関連のテクニックを収集する中で、これはと感じたものを取り上げています。

画面やリンクなどにコメントを付ける方法をメモしておきます。

「コメントを付ける」とはどういうことかと言いますと、……とりあえず、「ここにマウスポインタを合わせてみてください(視覚系ブラウザの方のみ)」

Internet Explorer や Mozilla を使用している方は、ツールチップが見えたと思います。

上の例のソースを以下に示します。

<span title="( ´∀`)" style="color:blue">(中略)</span>

ソース中にある title 属性が、ツールチップを見せていた正体です。

title 属性は、HTML 4.01 仕様書に次のように書かれています。

この属性は、当該要素に関する助言的情報を提供する。

(「7.4.3 title 属性」より)

ちなみに title 属性は、以下の要素以外で自由に使えます。

  • base
  • basefont
  • head
  • html
  • meta
  • param
  • title

ところで、画像上でツールチップを表示するために alt 属性を使用する例があります。しかし、仕様書には以下のように書かれています。

この属性は、画像、フォーム、アプレットを表示できないユーザエージェントのために、代替テキストを指定する。(以下略)

(「13.8 代替テキストの指定方法」より)

「画像(中略)を表示できないユーザエージェント」のための「代替テキスト」なので、ツールチップで表示される保証はありません。実際、 Mozilla 系のブラウザでは、画像が表示できる場合は代替テキストを表示しません。

そのため、コメントを付けたいのであれば、 alt 属性ではなく title 属性を使うべきです。そしてalt 属性には、代替テキストのみを書きます。

なお、 title 属性の中身はあくまでも「助言的情報」に過ぎません。そのため、テキストブラウザなどの表現能力に制限のあるブラウザでは、 title 属性が全く反映されないこともあります。

そのため、重要な情報は title 属性ではなく、地の文に書くようにした方がよさそうです。

ちなみに img 要素については、画像について解説するページを指定する longdesc 属性があります。

参考文献

HOME
忍者ブログ [PR]
ブログ内検索
最近の状況
リンク
カレンダー
04 2017/05 06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)
ブログ内検索
最近の状況
リンク
カレンダー
04 2017/05 06
S M T W T F S
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
使用許諾
最新コメント
(08/15)
(05/04)
(03/06)
(03/04)
(09/25)
最新トラックバック
T/O
(11/05)