小粋空間: ウェブスタンダード: 2005年7月アーカイブ

Top ＞ウェブスタンダード＞ 2005年7月

2005年7月28日

ブロックレベル要素とインライン要素

July 28,2005 11:58 PM
Tag：[WebStandards, XHTML]
Permalink

ウェブスタンダードなエントリーを書くための基礎知識です。タイトルについて、他に詳しく書かれたサイトが色々ありますが、当サイトでもまとめて記しておきたいと思います。

HTML要素の構造

HTML文書は一つのhtml要素からなります。さらに html要素は head 要素と body 要素からなります。そして、body 要素の中で使える要素（タグ）は大きく「ブロックレベル要素」と「インライン要素」の二つに分類することができます。

ブロックレベル要素

「ブロックレベル要素」とは、見出し（h1?h6）・段落（p）・リスト（ul/ol ）・テーブル（table）など、文書の基本的な構造を示すものです。その名の通り「ブロック（矩形）」として、要素の前後に改行を伴った表示がされます。
ブロックレベル要素の主なタグは次の通りです。

p / h1?h6 / ul / ol / dir / pre / dl / div / noscript / blockquote / form / hr / table /fieldset / adress

インライン要素

「インライン要素」は強調文字（strong）・リンク（a）といったテキストに装飾をしたり機能をもたせる、あるいは改行（br）のようにテキスト内のある部分に対して何らかの意味づけをしたりする機能を持たせるものです。インライン要素の前後には改行は含まれません。*1
インライン要素の主なタグは次の通りです。

i / b / u / s / em / strong / code / a / img / object / font / br / span / iframe / input / select / textarea / label / button / layer

なお単なるテキストもインライン要素に含まれます。

ブロックレベル要素とインライン要素の関係

ブロックレベル要素とインライン要素を記述するにあたって、次のような関係（制約）があります。エントリーの記述にあたって気をつけなければならないものを挙げておきます。

ブロックレベル要素の内容に、他のブロック要素やインライン要素を含むことができます（例外あり）
インライン要素の中にブロックレベル要素を含むことはできません
p 要素はブロックレベル要素ですが、子要素としてインライン要素しかもつことができません
div 要素・blockquote 要素は子要素としてブロックレベル要素しかもつことができません

その他

ul / ol / dl / hr / table の各要素の内容モデルは決まっています（例えば ul は li ）
HTML4.0/XHTML1.0 Strict の場合、body要素の直接の子要素としてインライン要素を記述することはできません（Transitional はOK）
li / dt / dd / td / tr 等は「内容モデル（ある要素の子要素になることができる要素）」として扱われるだけで、どちらの要素にも該当しません *誤解がありましたらご指摘ください

主な参考サイトは下記です。ありがとうございました。

以上です。この続編として、Movable Type でウェブスタンダードなエントリーを書くためのカスタマイズ方法について記していきたいと思います。

*1：CSSの display プロパティでブロックレベル要素として表示することも可能です

Comments [0] | Trackbacks [0]

2005年7月24日

BlogPeople の「List Me!」を valid にする

July 24,2005 11:55 PM
Tag：[BlogPeople, Customize, MovableType, WebStandards, XHTML]
Permalink

BlogPeople の「List Me!」を XHTML valid にするカスタマイズです。

BlogPeople のサービスのひとつに、他のブログピープル会員が簡単にあなたのサイト情報をリンクリストに追加することができる「List Me!（私を登録）」があります。当サイトでは下記のような形式のリンクになっています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

が、これをページに貼り付けるとThe W3C Markup Validation Serviceで以下のようなエラーと、これと似たようなメッセージが計12個表示されます。つまり「List Me!」を表示することで valid でなくなってしまいます。

Line xxx, column xx: cannot generate system identifier for general entity "u"
 
...//www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti=

これを回避するため、最初に考えたのは、リンクから一旦空のウィンドウを開き、そこから BlogPeople の JavaScript を起動するという案です（=メインページでエラーにならなければ良い）。

最初のリンクを下記のように書き換えてウィンドウ（ここでは bp.html）を開く
<a href="javascript:void(bloppop=window.open('http://www.koikikukan.com/bp.html','blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>
 
　　　　　　　　　　↓
 
新しいインデックステンプレート（bp.html）を作り、この中で自動的に JavaScript を実行するように記述
<body onload="window.location.href = 'http://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti='+escape('<$MTBlogName encode_html="1"$>');">

こういったテクニックを用いれば valid かつ正常に表示されるようですが、やや面倒です。

さて、The W3C Markup Validation Service のエラーをよくみると、後方に

Line xxx, column xx: entity was defined here
 
...://www.blogpeople.net/addlink.jsp?n=1&u=http%3A%2F%2Fwww.koikikukan.com%2F&ti

とあります。これが本来のエラーで、XHTMLではページ内の "&" を "&" と記述する必要があります。URLでも同様です（HTML 2.0の時からこの点も明記されていましたが、ブラウザは "&" のままでもきちんと処理するように求められていたこともあり、これでも機能していました *1）。

つまり「List Me!」のリンクは下記のように "&" の後ろに青色の "amp;" を追加するだけで valid になります。リンクをクリックした時のページ内容が元の設定の時と同じことも確認しています。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=http%3A%2F%2Fwww.koikikukan.com%2F&amp;ti='+escape('<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">List Me!</a>

2005.07.25 追記
コメントでお分かりの通り、Ogawa::Memoranda さんよりアドバイス頂きまして、valid かつ JavaSript がOFFでも使えるスクリプトを提供して頂きました。この場をお借りして改めてお礼申し上げます。

元のスクリプトの代わりに下記のタグを表示したい位置に設定します（「List Me!」の文言以外は教えていただいたものをそのまま掲載させて頂いてます）。nofollow も付与されているというきめ細かさ。

<script type="text/javascript">
function popup_blop(url) {
    var c = url.indexOf('ti=');
    url = url.substr(0,c+3)+escape(decodeURIComponent(url.substring(c+3,url.length)));
    window.open(url,'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes');
}
</script>
 
<a title="List Me!" href="http://member.blogpeople.net/addlink.jsp?n=1&amp;u=<$MTBlogURL encode_url="1"$>&amp;ti=<$MTBlogName encode_url="1"$>" onclick="popup_blop(this.href);return false;" onkeypress="popup_blog(this.href);return false;" rel="nofollow">List Me!</a>

*1：The Web KANZAKI：XHTMLの書き方と留意点より引用

Comments [6] | Trackbacks [0]

2005年7月23日

XHTML 1.0 Transitional バナーを表示

July 23,2005 11:55 PM
Tag：[Record, WebStandards]
Permalink

The W3C Markup Validation Serviceが配布している「XHTML 1.0 Transitional」であることを示すバナーを右下に表示しました。valid であることを確認できているのは今のところトップページのみですので予めご了承ください。

先日買った Designing with Web Standards をようやく読破しまして、ウェブスタンダードなサイトを作ることの重要性を改めて認識致しました（CSSはハックを利用しているので valid ではありませんが）。ウェブスタンダードのスキルがほとんどない状態から1年余りでそれなりに身につけられたのはラッキーだったと思います。
~~ダジャレ~~Movable Type のテンプレートやカスタマイズを中心に運営しているサイトですので、今後はできるだけウェブスタンダードに準拠する内容にできればと考えています。またこれまでに公開してきたエントリーでウェブスタンダードに準拠していない（またはそうであることを示唆していない）内容については適宜訂正していきたいと思います。

なお BlogPeople の List Me!! が Validation Service にひっかかっていたのですが、カスタマイズによってクリアできました。これについては追ってエントリーしたいと思います。

Comments [0] | Trackbacks [4]