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

【ここから続き】のスペーサー画像

先のエントリー【MovableTypeの小技(微技)】には、やはり不具合がありそうです。

音声ブラウザに対応しいても、追記のないエントリーに対して、【ここから続き】のスペーサー画像(0px)が挿入されます。本文を読み終わった後に【ここから続き】まで読み上げてしまいます。
とりあえず、Lynxにて表示させてみたのですが、本文の最後に表示されています。

音声ナビゲーションとして【ここから続き】を挿入したい場合には、MTEntryIfExtendedを利用し、追記のあるもののみに対して、【ここから続き】を挿入するようにするべきではないでしょうか。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more"><img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" /> <$MTEntryMore$> </div>
</MTEntryIfExtended>

AccessibleでStrict

1columnテンプレート
昨日公開の1columnテンプレートは、究極ともいえるのではないでしょうか?

GUIでの見た目はよくありません。

スタイルシートを切ってみるとよくわかるのですが、h1にすぐ下にナビゲーションリンクを設定して、それぞれのエリアへスムーズに移動できるようにしました。

通常はWebInspectorのみのアクセシビリティの検証ですが、aDesignerの非常に厳しいチェックを行い、合格いたしました。音声ブラウザでも十分読み取れるページ構成となっています。

公共性の強いサイト・利用者の年齢層が高いサイトなどにご利用いただきたいと思います。

IE7もXHTML1.1を非サポート?

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文書としてもよいのだろうけれども、いつになったら正しく使えるのか・・・

クリエイティブ・コモンズのメタデータ

Movable Type テンプレートのダウンロードページには、商用利用不可を明記するために、クリエイティブ・コモンズを利用しております。XHTML内にコメントとしてC.C.メタデータを埋め込んでおり、XHTMLのコメント内では、<や>が使用できないので改善の必要がありました。

The Web KANZAKI クリエイティブ・コモンズのメタデータ

CCのサイトの説明では、RDFをHTMLに結びつける手段として、(1)外部ファイルとして保存し、link要素で参照する、(2)head要素内に直接記述する、(3)body要素内に直接記述する、(4)HTML内にコメントとして(<!-- -->で囲んで)記述する、という4つの方法をあげ、その中で(4)のコメント方法を推奨しています。しかし(4)の方法は、「マシンが理解できるようにRDFとしてライセンスを提供する」という考え方と矛盾しており(コメントはHTML作者などの人間が読むためのものです)、適切とは言えません。

早速、link・meta要素を利用して書き換えてみました。

<link rel="schema.CC" href="http://web.resource.org/cc/" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />

mozCCでもうまく判別されています。

テンプレートがStrictでも

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

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

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

企業向けMovableTypeテンプレート

いろんなところのMovableType構築サービスを調べてみたのですが、Validなテンプレートは数少ないようです。

XHTML1.0なのにタグを閉じてなかったり、たくさんの問題が・・・

http://www.w3.org/MarkUp/2004/xhtml-faqによると

Can I just put the XML declaration on top of existing HTML documents? Can I intermix HTML 4.01 and XHTML documents?
(XHTML に移行するには)現在あるHTML文書の先頭にXML宣言を入れるだけでいいんでしょうか? また、文書中の記述においてHTML 4.01とXHTMLを混在させてもいいでしょうか?

http://www.w3.org/MarkUp/2004/xhtml-faq

No. HTML is not in XML format. You have to make the changes necessary to make the document proper XML before you can get it accepted as XML.
ダメです。HTMLはXMLの形式を取っていません。文書をXMLとしてアクセスさせる前に、HTML文書を XML に適合するように変更しなければいけません。

http://www.w3.org/MarkUp/2004/xhtml-faq

そんな訳で、企業のサイトに使用してもよいくらいのデザインを少々加えたStrictなMovableTypeテンプレートを制作いたしました。

Web標準 MovableType テンプレート 003

IE6に困ったら

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!

Iframeに泣く

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

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

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

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

Web標準の教科書

【Web標準の教科書】

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

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

まずはFirefox

CSSの勉強にCSS Creatoをよく見に行く。

そのサイドバーに本日のブラウザ統計が表示されている。

Firefoxが好調とはいえ、IEの倍近く。
IEが90%以上のシェアを誇っているのに、この数字があらわすものは・・・

CSSでテンプレートを作る場合には、まずFirefoxで確認し、IEでちゃんと表示できるように修正。一時期のネットスケープとは逆転した状態です。

バグだらけのIEは使い物になりません。

ナビゲーションバーを作ろう!

CSSを使ってブログとウェブサイトにナビゲーションバーを作ろう!

bannerやheaderの後にナビゲーションのクラスやIDを作りリストで指定します。 たとえば私のところはこんな感じ・・・

<div class="none"><a href="#main">メニューを読み飛ばす</a></div>
<map id="Navigation" name="Navigation" title="Navigation">
        <ul>
                <li><a href="/" title="Web標準 Webサイト制作  アットスタイル ホーム">ホーム</a></li>
                <li><a href="service.php" title="Web制作">Web制作</a></li>
                <li><a href="blogtemptop.php" title="テンプレート">テンプレート</a></li>
                <li><a href="form.php" title="お問い合わせ">お問い合わせ</a></li>
                <li><a href="http://s36ph.s72.xrea.com/" title="ブログ">ブログ</a></li>
                <li><a href="http://style.jp.land.to/phpbb/index.php" title="フォーラム">フォーラム</a></li>
        </ul>
</map>
<div class="none">ナビゲーション閉じる</div>

スタイルシートで整形すればOK!

#navi  {
        float: left;
        margin: 0;
        padding: 0px;
        width: 100%;
}
#navi ul {
        font-size: 0.7em;
        margin: 0;
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: #333333;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #333333;
        padding: 0;
        width: 100%;
        float: left;
        list-style: none;
        background: #D2D2D2 url("webimg/background.png") 0% 40% repeat-x;
}
#navi ul li {
        float: left;
        margin: 0;
        padding: 0;
}
#navi a, #navi a:visited {
        display: block;
        padding: 2px 10px;
        margin: 0;
        color: #000;
        text-decoration: none;
        font-weight: normal;
        border: 0;
        border-top: 1px solid #EEEEEE;
        border-left: 1px solid #EEEEEE;
        border-right: 1px solid #333333;
}
#navi a:hover {
        background: url("webimg/over.png") 0% 40% repeat-x;
        border-top: 1px solid #FFFFFF;
        border-left: 1px solid #FFFFFF;
}

css.maxdesign.com.au - CSS resources and tutorials for web designers and web developersに迷ってしまうほどたくさんのリストナビゲーションが紹介されています。

お気に入りが見つかるかも・・・

MovableTypeのPHP化その2

省略されている方も多いと思いますが、必ず一行目にXML宣言を記入し<?php echo '~'."\n" ?>でかこみます。

<?php echo '<?xml version="1.0" encoding="<$MTPublishCharset$>"?>'."\n" ?>

次は、サイドバーなどのモジュール化ですね・・・

ただいま制作中

ただいま制作中・・・といってもちょっと時間が空いたので、うちの奥さんのサイトです。

MBWS

今のサイトは4年ほど前に制作した画像スライス・テーブルレイアウトのため、スタイルシートから全て新作です。

もちろんValid XHTML(1.0)・テーブルは一切なし!です。

細かいところを作りこまないといけません。さらに画像などを追加予定です。
(完成までには、当分かかりそうです・・・)

Gene Berg japan

Gene Berg japan様のサイトを5月25日完成・納品いたしました。

Gene Berg japan

XHTML・スタイルシートレイアウト(伸縮2カラム)・フラッシュ・ショッピングカートCGI