@Style

mixiのXHTML・CSS関連コミュニティでもたまに語られる【dl要素】は様々な使い方がされている。アットスタイルやBlogStyleでも積極的に使用している。

XHTML+CSS (r)evolution: dl要素の応用例、ご意見募集でも数件の利用方法がコメントがされ、その後のXHTML+CSS (r)evolutionでもプレゼンされている。

プレゼン資料（XHTML+CSS (r)evolution スライド）によると

1. h1-h6要素はページ全体から見た文脈上の見出しでしかないため、個別的・直接的な見出しをdt要素で示し、対応する内容をdd要素で示す方法が好んで使われる。
2. dt要素の子要素にはテキスト/インライン要素しか置けないが、dd要素の子要素にはさらにブロックレベル要素も置ける。この内容モデルの自由さが多目的利用のひとつの理由に。
3. dl要素はtable要素の使用を避ける目的でも使われる。th要素をdt要素に、td要素をdd要素になぞらえる。

XHTML+CSS (r)evolution スライド

DTDを見てみる

<!-- definition lists - dt for term, dd for its definition -->
<!ELEMENT dl (dt|dd)+>
<!ATTLIST dl
  %attrs;
  >
<!ELEMENT dt %Inline;>
<!ATTLIST dt
  %attrs;
  >
<!ELEMENT dd %Flow;>
<!ATTLIST dd
  %attrs;
  >

接尾演算子に注目

(dt|dd)+であるため、順序には関係なくdtまたはddのいづれか一方が1回以上出現すればよい

あるサイトを見て最近気になったのが、以下の例

<dl>
  <dd>
    <pre>(ソースコード)</pre>
  </dd>
  <dt>(タイトル)</dt>
</dl>

dtより先にddが出現している。DTDから考えると間違いではないが、文書の構造的にはおかしくはないか...

1月22日追記：記事を一部修正いたしました。

abbr要素と acronym要素の違い

現在、草案段階のXML技術による次世代HTML である XHTML2.0 において、実は acronym要素は廃止される予定です。

abbr要素と acronym要素の違い

最新版の Win版Internet Explorer 7 より、abbr要素に対応することになったことで、ようやく abbr要素・acronym要素闘争問題にも終止符が打たれることとなりました。結論としては、本文書では主に abbr要素と acronym要素の両要素の違いについてみてきましたが、実は両要素を使い分けるというのは無駄なことでしかなく、略語はすべて abbr要素に統一しなさいということになるのでしょう。

abbr要素と acronym要素の違い

IE7の対応についてはまったく確認していなかった。

早速確認。他のモダンブラウザのように下部に点線ボーダーが出ないので、カーソルを合わせてみないとabbrを使っていることが一切解からない。

abbr {
    border-bottom-width: 1px;
    border-bottom-style: dotted;
    border-bottom-color: #666;
}

またも、IE7用の対応が必要です...

現在は閉鎖した個人的なブログへ2005年7月20日にエントリーしたものですが、本日、あえてこのブログにエントリーいたします。

去年くらいから、いろんなところで【ビジネスブログ】という言葉を見るようになった。

未だよくわからない。よくある社長Blogなのか、アフェリエイトを行うBlogなのか・・・それとも？ ビジネスブログウオッチを見てみたら、アフェリエイトばっかり。

私のサイトでは、ビジネスブログという言い方は一切していない。
テンプレートも【商用テンプレート】

Nucleusで構築した奥さんのサイトもコメントやトラックバックは受け付ける（本当はいらないんですが…）ようにしているけれども、サイドバーに一覧はない。だけどエントリーの中に買い物カゴは、ちゃんとある。
「BlogをCMSとして使う」という目標で、変更を続けている。（更新ではありません）

よく制作会社ではこんなことを書いてる。

ビジネスブログとは、ブログを利用したサイト構築サービスです。HTMLがわからない人でも簡単に、素早くサイトの更新をすることが可能となりました。SEOにも非常に相性の良いシステムになっていますので集客にも効果を発揮します・・・

自らをWebデザイナーと呼ぶ方もエントリーでbrを連発してみたり・・・
XHTMLの知識がないとエントリーは出来ません！

CSS実装徹底検証! そこが知りたいInternet Explorer 7

使用するサンプルソースはXHTML1.0 Strictで記述し、基本的にStandard(標準準拠)モードで表示する。IE7 beta2においても、Quirks(下位互換)モードで表示すると古いバージョンと同じ表示になってしまうため、注意が必要だ。また、特に断りのない限り、「Internet Explorer」は「IE」、「Internet Explorer 6」は「IE6」、「Internet Explorer 7 beta2」は「IE7 beta2」と略している。

CSS実装徹底検証! そこが知りたいInternet Explorer 7

かなり詳細までInternet Explorer 7に於けるCSS実装を検証している記事だ。

やはりInternet Explorer 7でもapplication/xhtml+xmlをサポートしないのだろうか。

いつになったら正式にXHTML 1.1を利用できるのか？CSS以前の問題では...

先日、TinyMCE Plugin for Movable Type Ver1.00 Jaの開発プロジェクトサイトを構築されるとの事で有限会社ITプロフェッショナルの蒲生（Dakiny）さんと電話の最中、address要素の話となった。

address要素は問合せ先等の情報を示す際に用る。制作者の情報を記述する際にも良く用いられ、作成日、更新日、メールアドレス等記述する。address要素はブロックレベル要素で中身はインライン要素に限られる。

上記程度の知識なので、うまく説明できなかった。気になる...

Web標準の教科書

これまでのWebページ制作においても、かなり限定的ではあるがメタデータが利用されてきた。たとえば（X）HTMLのmeta要素（p.48）でその文書のキーワード、制作者などを示す、link要素（p.53）で他の文書との関係を示す、address要素（p.59）で作成者情報を示す、xml:lang属性で自然言語を示すといったことは、まさにその文書に関するメタデータの記述例である。

こんなに近くに答えがあった。

SEO-Equationさんのユニバーサル（普遍の）SEO を目指すを読んで初めて知ったのですが、MSNサーチには以下のような推奨事項があります。

MSNサーチ：Web サイトにおける技術的な推奨事項

整形式の HTML コードのみを使用してページを作成します。すべてのタグに終了タグが存在すること、およびすべてのリンクが正常に動作することを確認します。リンク先のないリンクがサイトに含まれている場合、MSNBot がそのサイトに関するインデックスを効率的に作成できないことがあります。また、ユーザーがサイトに含まれる一部のページを見ることができないことがあります。

MSNサーチ：Web サイトにおける技術的な推奨事項

Japan internet.com：整形式の HTML -- 1

テキストであれ子要素であれ、コンテンツのあるに要素は必ず開始タグと終了タグがなければならない。 HTML は、必ずしもそうでない場合もある。例えば、<P>、<DT>、<DD>、<LI>は、単独で使われる場合が多い。しかし、これはブラウザの種類によりけりで、要素がどこで終了するのかを正しく推測してくれればの話だ。ブラウザはいつも著者が考える通りに推測してくれる訳ではない。よって、開始タグは必ず終了タグで閉じたほうが賢明である。

Japan internet.com：整形式の HTML -- 1

XHTMLでは終了タグは必須。
最強のSEO...

先日、知り合いのSOHOから「新しいサイトを作ったのでW3C HTML 4.01 Validのバナーをはりたい。手を加えて欲しい。」とメールがあった。Dreamweaverで制作したテーブルレイアウトのサイトだった。ちょっと修正すればW3C 4.01 Validをもらうことは簡単に出来るけれども、文書構造としては一切成り立っていない。

Web::Blogoscope：XHTMLの最適化手法

当然、テーブルレイアウトの問題も絡んでくる。XHTML+CSSだがテーブルレイアウトを採用しているケース、つまり「ハイブリッドレイアウト」も書式上のエラーではなく使い方のエラーである。決められたボキャブラリと書式を守っていても、使い方が間違っていることになる。

Web::Blogoscope：XHTMLの最適化手法

「簡単だから自分でやりなさい」と・・・
正しくないものに手を貸すことは出来ません。

無料テンプレート配布ページでコードの表示をtextarea要素のreadonly属性を利用してマークアップしていた。コピーする際に簡単なのでtextarea要素を使用していたのだが、最近になって気なり始めた。やはりpre・codeでマークアップしなければ構造上間違いである。

ところが、私はCSSを書く際に水平タブ文字を空白文字としている部分がかなりあり、このままではpre要素に変更が出来ない。

9.3.4 Preformatted text: The PRE element

The horizontal tab character

The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

9.3.4 Preformatted text: The PRE element

400個程ある全ての水平タブ文字をスペースに書き換えた。

ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。

10代の若者が趣味で作るBlog（「Web logs」の省略形）が、真新しいWebサイトよりも優れたコードで書かれているとしたら、誰かが過ちを犯しています。そして、その誰かというのはあなた方、開発者です。真っ当な会社なら、あなたはクビにされているでしょう。オーウェル風の社会に例えるなら、あなたは「再教育キャンプ」に送られるのです。そのどちらも望まないのなら、本を読み、少なくとも笑い種にされない程度のレベルにまでスキルを高める必要があります。

ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。

私としては、もし今度あなたが「Web 2.0」を自称するサイトを調べる機会があれば、ボンネットを開き、ソースを見て、そのなかにWeb 1.0時代のサイトがつけていたような口紅が残っていないかチェックして欲しいと思います。そして、結果を運営側に伝えるのです......もちろん、あなたの Blog上で。

ミツエーリンクス【Web標準Blog ： リデザインの失敗】に面白いことが書いてあった。

仕事柄、他の制作会社のサイトや制作実績のサイトを見に行きます。
当然、ソースを見て必ずAnother HTML-lint gatewayで検証しますが、かなり多くのサイトが未だテーブルでレイアウトされており、文字サイズもpxで指定されています。
（他のブログでは多少指摘するとこともありましたが、このBlogで一切エントリーしていません。）

制作会社よりも、個人でBlogを利用する方のほうがWeb標準への意識が高い。Web標準は個人ブログのユーザーから！

The Web KANZAKI -- Japan, music and computer

この使い分けについては、従来から発音に基づく（acronymはひとつの単語として発音されるもの、abbrは1語ずつ別々のもの）とか、頭文字によるものがacronymで略語一般がabbrなど、いろいろな説が唱えられてきました。定義の背景はさておき、これをいちいち区別して使い分けるというのはたいして有益なこととは思えません。

実際のところ、利用者にとってはWWWがacronymかabbrかということは本質的な問題ではなく、そのフルスペルがWorld Wide Webであることが伝わればよいわけです。迷うようなら、より一般的な範疇であるabbr要素としてマークアップしておくのがよいでしょう（XHTML 2.0の2002年12月草案では、acronym要素は削除されてしまいました）。いずれにしても、これらの要素を理解しないブラウザもあるので、重要な語句には（）で説明を加えるなどの手段も併用する必要があります。要は、利用者に親切なページづくりをしようということです。

The Web KANZAKI -- Japan, music and computer

Win版IE5/6はacronym要素のみ対応しており、abbr要素には反応しません。（Mozilla、Opera、Mac版IE5およびiCabは両方OKです。）

現在のところ@Styleでは abbr要素からacronym要素への変換スクリプトを使用してIEに対応しています。しかし、（）などで明記したほうがGUI利用者、またスクリーンリーダー利用者にとっても便利ではないでしょうか。

MicrosoftはXHTML1.1を非サポート　株式会社 ミツエーリンクス Web標準Blog

少なくともMicrosoftは、ASP.Net 2.0においてXHTML 1.1をサポートしないとのこと。これは悪いことでしょうか？初期の反応は、それが同社の後退であるとして、ショックと憤りのいずれかだったかもしれません。別の反応としては、それが現実的な決定であり、なお標準のサポートを実質的に推し進めるものとして、受け入れられるかもしれません。W3Cは、XHTML 1.1文書のMIMEタイプにapplication/xhtml+xmlを指定すべきとしていますが、Internet Explorerは目下そのMIMEタイプをサポートしていません。今回の発表から察するに、IE7は（XHTML 1.1とapplication/xhtml+xmlの）どちらもサポートしないのではと推測しています（後で私が間違っていたと証明されるのは歓迎しますが）。

期待のIE7もXHTML 1.1は非サポートの可能性もある？XHTML1.1は2001年の勧告ですが、MSIEにとって現実的ではない。MIMEタイプを無視しXHTML 1.1文書としてもよいのだろうけれども、いつになったら正しく使えるのか・・・

別のBlogの「（X）HTMLの知識がないと」でエントリーしたように、いくらテンプレートをStrictにしたからといっても、ユーザーが理解していないと適切な文書は完成しない。同じ事を書いてあるところがあった。

「技術の行く先」とWeb標準：株式会社 ミツエーリンクス Web標準Blog

しかしここで注意しなければならないのは、ツールはあくまでもツールに過ぎず、それを使用する人間の意識もまたWeb標準志向にならなくては、真に優れたコンテンツは制作できないであろう、という点です。仮に(X)HTML仕様を知らずとも文法的に妥当な文書を作成できるツールが登場したとしても、ユーザがその仕様をある程度意識して文書を作成（例：見出しを見出しとして識別し入力）しなくては、適切な情報構造を伴った文書は作成できないのではないか？と思います。

XHTMLで作成した文書がIE6で閲覧時、レイアウトが崩れることがあります。

XML宣言を行うとIEでは、互換モードとなります。このため多くのXHTML文書ではXML宣言が行われていないのが現状です。

先日、面白いものを見つけました。

phpの場合に以下のように記入すると、ユーザーエージェントを判断しIE6以外でXML宣言を記入することが出来ます。

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((ereg("Windows",$ua) > 0) && (ereg("MSIE",$ua) > 0)) {
if (ereg("MSIE 6.",$ua) > 0) {
echo '';
}
} else {
echo '<?xml version="1.0" encoding="Shift_JIS"?>'."\n";
}
?>

エンコードは書き換えてください。

Another HTML-lintでも100点を取ったまま、標準モードもOK！

只今、XHTML 1.0 StrictのMovableTypeテンプレートを製作中です。
今夜、大体のところが出来たので、Land.toサーバーの規約どおりに広告を張ってみました。

ところが広告タグはIframeだったので、XHTML1.0Strictには使えない。

そうだった、私が頼み込んで、どうにかTransitionalで使用できるようにしてもらったんだった。

また明日、XREAに移します・・・

【Web標準の教科書】

Webで標準的に使用される技術を「Web標準」といいます。誰でもアクセスでき、どんなブラウザから見ても見栄えの変わらないサイトを作るにはWeb標準技術が欠かせません。本書は、「XHTML」と「CSS」を中心に、正しいWebページの作り方を単なる仕様の説明ではなく、常に「実際にどう生かせるか」という観点から実践的な説明を随所に盛り込み、解説しました。すべてのサイト制作者、必携の一冊です！

ぜひ購入したいですね・・・