タグ「XHTML」が付けられているもの

MovableType 4でkeywordsを記述する【改訂版】

8月26日のエントリー【MovableType 4でkeywordsを記述する】をいじってみた。

予めサイト全体のキーワードを設定する。エントリーテンプレートでは設定されたキーワードとエントリー画面より入力されたキーワード及びタグを出力する。
エントリーテンプレート以外では予め設定されたサイト全体のキーワードを出力する

<MTSetVar name="keywords" value="キーワード1,キーワード2,キーワード3"><MTIf name="entry_template">
    <meta name="description" content="<$MTEntryExcerpt$>" />
    <MTIfNonZero tag="MTEntryKeywords"><meta name="keywords" content="<$MTEntryKeywords$><MTEntryIfTagged>,<MTEntryTags glue=","><$MTTagName$></MTEntryTags></MTEntryIfTagged>,<$MTGetVar name="keywords"$>" /><MTElse><meta name="keywords" content="<$MTGetVar name="keywords"$><MTEntryIfTagged>,<MTEntryTags glue=","><$MTTagName$></MTEntryTags></MTEntryIfTagged>" /></MTElse></MTIfNonZero>
<MTElse>
    <meta name="description" content="<$MTBlogDescription$>" />
    <meta name="keywords" content="<$MTGetVar name="keywords"$>" />
</MTIf>

記述例

  • エントリー画面より入力したキーワード:ヴィジュアルコミュニケーション
  • エントリー画面より入力したタグ:サイン, ピクトグラム
  • 予め設定した全体のキーワード:インターネット,ユニバーサルデザイン,ユニバーサルアクセス

出力例(個別記事)

<meta name="description" content="現在、ピクトグラムの利用と普及を考える会をpic-sign.orgにて準備中 サ..." />
<meta name="keywords" content="ヴィジュアルコミュニケーション,サイン,ピクトグラム,インターネット,ユニバーサルデザイン,ユニバーサルアクセス" />

MT4 テンプレート 2Columnのカスタマイズ その1

MovableType 4 無料テンプレート 2Columnはサイドバーの見出しとリストにdldtddを利用している。

通常は見出し(h2)+リスト(ul)を使用して以下のようなマークアップになることが多い。

<h2>MovableType</h2>
<ul>
<li><a href="blogtemptop2.php">有料テンプレートインデックス</a></li>
<li><a href="blogtemptop.php">無料テンプレート一覧</a></li>
</ul>

枠をつけたり背景色の変更などを行う際には更に外側を<div></div>で囲む必要が出てくる。MovableTypeのデフォルトテンプレート然りである。しかし、MovableType 4 無料テンプレート 2Columndl要素でマークアップしているので、既にブロック要素となっている。

<dl>
<dt>Pages</dt>
<dd>
<ul>
<li><a href="/mt4temp/mt42c1/profile.html" title="プロフィール">プロフィール</a></li>
</ul>
</dd>
</dl>

簡単なCSSの編集でMovableType 4 無料テンプレート 2Columnのイメージを変えてみた。

CSSの編集でイメージを変えてみた

作業時間3分で完了した。

Markup Validation Service

新しくなったW3CのHTML検証サービス | Web標準Blog

新しいバージョン0.8.0ではアーキテクチャが一新され、検証時間の短縮や信頼性の向上が図られています。加えて、XMLの整形式や名前空間、MIME タイプに関するチェックなど、XMLに関するエラー検証の精度が高まっています。このため、今までvalidとされていたXHTML文書が新しい validatorではinvalidとなる可能性があることにご注意ください。

新しくなったW3CのHTML検証サービス | Web標準Blog

Markup Validation Service

チェックしてみると検証時間がやけに長い。青いアイコンもある

Valid アイコン

Valid アイコンを貼っている方は必ず確認を...「嘘っぱちだ!」と思われないうちに!

追記:再度チェックしてみるとかなり高速で検証できました!

WebInspector 5.02 Java6対応版

本日、あるサイトのチェックを行おうとして、インストールしてあるWebInspector 5.0を開こうとしても開かない。

WebInspector 5.02 Java6対応版が公開されていました。Javaバージョン6の方は必ずアップグレードしてください。

WebInspector 5.02 Java6対応版を公開しました。

【重要なお知らせ - 2007年6月7日以前にWebInspectorをダウンロードされた方へ】

Java バージョン6の環境で動作するWebInspector 5.02を公開しました。Windows版のWebInspector 5.0以前のバージョンは、Javaバージョン6の環境で動作しません。 WebInspector 5.0以前のバージョンをお使いの方は、お手数ですが、最新版 5.02を再度ダウンロードしてご利用ください。(なお、Macintoshをご利用の方は、従来のバージョンでそのままお使いいただけます。)

WebInspector : 富士通

Mac用があるとは知らなかった...

XHTML 1.1

MS、「IE 8」の基本設計を示唆--セキュリティと使いやすさを追求

Wilson氏は、「標準化団体ではローカルストレージやセキュリティモデルの改善に関する作業が進んでいる」と語り、MicrosoftがW3Cと、HTMLバージョン5とXHTMLバージョン1および1.1の標準化で協力していることも付け加えた。

MS、「IE 8」の基本設計を示唆--セキュリティと使いやすさを追求

二年後には一気に加速するかもしれない。

Web Designing

Web Designing (ウェブデザイニング) 2007年 05月号に寄稿いたしました。

「Movable TypeのデフォルトテンプレートをWeb標準に準拠させるには?」と題してカスタマイズポイントを幾つか例を挙げて紹介しています。

XHTML 1.1 Second Edition

Here is an example of an XHTML 1.1 document.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
     xml:lang="en" >
  <head>
    <title>Virtual Library</title>
  </head>
  <body>
    <p>Moved to <a href="http://example.org/">example.org</a>.</p>
  </body>
</html>

XHTML™ 1.1 - Module-based XHTML - Second Edition W3C Working Draft 16 February 2007

最大の変更はXML Schema 。text/htmlはどうなるのか...

3カラムテンプレート

3カラムのブログは個人的に文章をじっくり読む上で周りが気になり、あまり好きではない。しかし左にコンテンツがあり、その右に2つのカラムが並ぶようなレイアウトは視線上に余計なものが入らないために余り気にならない。個人的なことを書いているVoxもこのレイアウトで使用している。

こんな感じのテンプレートを作成してみようと思っている。

3カラムテンプレート

現在、レイアウトはほぼ完成、CSSの調整中。どのバージョンで公開(無料配布の可能性もあり)するかを検討中。

xml:lang属性

xml:lang属性は、指定した要素内の内容を書き表している言語を示します。 XHTML1.1 では、HTML互換の lang属性が廃止されたため、代わりに xml:lang属性を指定します。値は lang属性と同じでアルファベット2文字で言語の種類を表す言語コードを指定します。文書内で使用している言語を指定することで、検索エンジンのロボットが情報を収集する際の各言語別の文書インデックス化の手助けや音声出力環境の読み上げ時に言語特有の発声規則を使えるようになることが期待されます。

SEO対策とWeb標準のホームページ作成:xml:lang属性

他文書の引用などで文書内(blockquote要素等)での言語コードが変わる場合がある。

このブログの2006年4月14日のエントリー:pre要素の引用部分も言語コードが変わっている

<blockquote cite="http://www.w3.org/TR/html4/struct/text.html#h-9.3.4" lang="en" xml:lang="en"><p>The horizontal tab character</p>
<p>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.</p></blockquote>

同様に、複数の言語に対応したスピーチ・シンセサイザーが、適切なアクセントの正しい発音で内容を読み上げられるようになります。もし、言語の変更が示されていなければ、スピーチ・シンセサイザーは現在の言語内で最も適切だと思われる言葉で読み上げようとします。したがって、フランス語で車を表す「voiture」という言葉は、基本言語として英語を使用するスピーチ・シンセサイザーでは「voter」(投票者)と発音されてしまうことになります。

ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書:2.1 言語の変更を明示する

上で示したようにhtml要素で指定した以外の言語コードが出現するたびに再度指定する必要があり、音声出力の読み上げにも大きく影響する。

参考になるリソース

map要素

map要素は複数のリンクをグループ化してナビゲーションの読み飛ばしに利用することができる。

ウェブコンテンツ・アクセシビリティ・ガイドライン1.0 HTML技術書:6.2 リンクのグループ化とそれを読み飛ばす仕組

【例】
この例では、MAP要素によってリンクをグループ化し、title属性によってそれがナビゲーション・バーであることを示しています。そして、グループ化したリンクの中の最初のリンクは、グループの後にあるアンカーへと移動するようになっています。また、各リンクは、リンクしていない印刷可能な(両端をスペースで囲った)文字で区切られていることに注意してください。 (【訳注】MAP要素には、HTML4.01の場合はname属性を、XHTML1.0の場合はid属性を必ず指定する必要がありますので注意してください。)

<BODY>
     <MAP title="ナビゲーション・バー">
       <P>
       [<A href="#how">ナビゲーション・バーを読み飛ばす</A>]
       [<A href="home.html">ホーム</A>]
       [<A href="search.html">検索</A>]
       [<A href="new.html">更新情報</A>]
       [<A href="sitemap.html">サイトマップ</A>]
       </P>
     </MAP>
     <H1><A name="how">このサイトの使い方</A></H1>
   <!-- このページのコンテンツ -->
   </BODY>     

6.2 リンクのグループ化とそれを読み飛ばす仕組

DTD

<!ELEMENT map ((%block; | form | %misc;)+ | area+)>
<!ATTLIST map
  %i18n;
  %events;
  id          ID             #REQUIRED
  class       CDATA          #IMPLIED
  style       %StyleSheet;   #IMPLIED
  title       %Text;         #IMPLIED
  name        NMTOKEN        #IMPLIED
  >

元々イメージマップのために定義された要素型であるため解説しているサイトも少ない。アクセシビリティアップを目指してmap要素を有効に利用しよう。

dl要素

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日追記:記事を一部修正いたしました。

エキスパート連載コラム

エキスパート連載コラム / 実践ノウハウ - Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』

アクセシビリティ、Web標準(Webスタンダード)、SEO(検索エンジン最適化)、ライティング、それぞれの第一人者の皆さんによる連載コラムです。"木を見て森を見ず" にならないように、アクセシビリティを関連するキーワードとあわせて考えてみましょう。

エキスパート連載コラム / 実践ノウハウ - Webアクセシビリティポータルサイト『infoaxia(インフォアクシア)』

植木 真・大藤 幹・住 太陽・益子貴寛・木達一仁の4名による連載コラム。

"守り" ではなく、"攻め" のアクセシビリティのススメ

ここ数年のキーワードとして "SEO(検索エンジン最適化)" というのがあります。そして、さらにもう一歩引いてみると、"Web標準(Webスタンダード)" というキーワードがあるのです。昨今のサイト運営において無視することのできないこれらのキーワードは、一見するとアクセシビリティとは何の関係もなくバラバラの点のように見えます。しかし、アクセシビリティとSEOには共通点が多くあり、さらにこれらはWeb標準の構成要素でもあるのです。つまり、それぞれが相互に関連しあっており、その関連性の中でそれぞれを考えていくことが大切です。

守り" ではなく、"攻め" のアクセシビリティのススメ

タイトルと引用部分だけで全てが言い尽くされているのかもしれません。

はなまるチェッカー

使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)

いつも参考にさせていただいているこのサイトで新しい検証サイトが紹介されている。

アクセシビリティチェック

試験版、時折「なんでそこにツッコミがはいるのぉ?」とアイスクリームを隠れて食べているのをばれたようなコドモの気持ちになりますが、その辺は診断終了後「そこはちゃうねん」とツッコミが入れられます。

アクセシビリティチェック

はなまるチェッカーを使ってみた。

結果は65点!

hanamaru.png

リンクテキスト(リンクの設定されている文字)には判別しやすいように下線をつけましょう。どこにリンクがあるのかがはっきりわかるような表現をすることが重要です。リンク部分がわからないと、リンクをたどることができません。他のページへ移動することができないため、サイト全体を理解することができず、情報が十分に伝わりません。

早速ツッコミを。

ナビゲーションバーにもリンク下線がいるのでしょうか...

WebInspector Proを使う

WebInspector Proをダウンロードし試用してみた。

WebInspector Proのヘルプより

ウェブ・アクセシビリティ診断/修正ツール「WebInspector Pro」(以降、本ソフトウェアと記す)は、HTML、XHTMLのウェブ・アクセシビリティをチェックし、アクセシビリティの問題点を簡単・効率的に修正することができるソフトウェアです。

アクセシビリティチェック機能により、HTML、XHTMLのソース上の問題点を見つけ出すことや、イメージ一覧機能により、画像のalt属性の編集を一括して行えるなど、HTML、XHTMLのウェブ・アクセシビリティの向上に必要な機能が多数搭載されています。

昨日のエントリーの時点ではWebInspector 5.0の高機能版と思っていたのだが、WebInspector 5.0とはまったく違う。アクセシブルな文書を制作する為のテキストエディタと考えるべきだろう。

文書を開く

上部のソース編集エリアのXHTML/HTMLソースに問題のある箇所にマークが付き、下部のユーティリティエリアには問題の解説が表示される。

修正を行えば以下のような表示となる。

チェックをクリアした画像

普段テキストエディタでの制作を行うことの無い方は、DreamweaverなどのWYSIWYGエディタで制作したページをWebInspector Proでチェックすると簡単・効率的に修正することができる。

しかし、どこにでもあらゆるタグの挿入ができるので、XHTML/HTMLの知識は必須となる。

WebInspector Pro

ウェブ・アクセシビリティの診断・修正ツールを販売開始

当社はこのほど、「Webアクセシビリティ・ソリューション」(注1)の一環として、ホームページ制作者や管理者などを対象に、ウェブ・アクセシビリティ(注2)診断・修正ツール「WebInspector Pro(ウェブインスペクター プロ)」を開発し、12月1日より販売開始します。

ウェブ・アクセシビリティの診断・修正ツールを販売開始

[特長]

  1. 各種規格、指針に対応したホームページの診断ができる

    本製品は、「JIS X 8341-3」、「みんなの公共サイト運用モデル」、「富士通ウェブ・アクセシビリティ指針」に基づいて診断を行い、HTML、XHTMLソース上の問題点を検出します。


  2. 各種規格、指針のガイドラインの表示により、問題点と対処方法を理解することができる

    問題点の検出だけでなく、アクセシビリティのガイドラインを表示して、問題の詳細と対処方法を示すことができます。これにより、ホームページ制作者や管理者が問題点と対処法を理解することができます。


  3. 問題点を効率的に修正することができる

    アクセシビリティに問題のあるホームページで数多く検出される、画像への代替テキスト情報付与漏れを効率的に編集・修正することができます。ページ内の全ての画像を一覧表示し、画像にテキスト情報をまとめて付与することができます。

    また、文字色と背景色の組み合わせを確認する「ColorSelector」を搭載しており、コントラストによる問題点を簡単に修正することができます。

ウェブ・アクセシビリティの診断・修正ツールを販売開始

無料ツールのWebInspector 5.0から機能アップしています。特に3つめの修正機能は期待できるかもしれません。

IE7でabbr要素

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用の対応が必要です...

XHTMLの知識がないと

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

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

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

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

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

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

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

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